您的位置 首页 > 数码极客

独立博客的搭建方法(5分钟教你搭建个人博客)

  基于Github Pages + docsify,我花了一小时搭建好了个人博客还顺手还写了这篇文章

  效果:

  封面

  内容页

  经验之谈:就个人博客来讲,笔者已经折腾过很多了,用过WordPress、Typecho、Hexo等等,主机也用过基于免费的GitPages或者付费的VPS,最后都不了了之,原因要么是VPS到期了懒得续费,要么是数据迁移各种费心,博客要么是基于动态的比如WordPress需要数据库,要么是基于静态的比如Hexo,一迁移你将要面对的是一堆数据库的数据或者是HTML代码,移植都太麻烦。最后我挖掘了我两个核心需求:免费,易移植,那么Github Pages + docsify完全满足了我的需求

  免费:Github Pages本来就是免费的

  易移植:docsify是基于js将md文档转换成html,计算在客户端,不在服务器端,服务器只用存md,这个就很舒服了,以后你的博客数据不会是一堆数据库数据或者html代码,而是具有可读性的md文档,下面详细介绍一下

  docsify和一般的使用Hexo、Jekyll、Hugo等博客框不同的是,支持Markdown格式,对程序员的博主们是很友好的。 不用生成html文件,写完MD格式的博客直接往上一放,框架自己在运行时解析渲染成html页面。

  准备工作

  1、git环境,github账号

  windows下安装git可以看下这篇Git简易教程之git简介及安装

  因为我们要使用Github Pages来部署我们的应用,请先注册下github的账号,官网:Github

  2、有node环境

  Windows下安装node环境

  简单而言

  去官网下载nodejs:https://nodejs.org/en/,安装好

  npm设置代理或镜像,不然因为周所周知的原因会慢到你可能无法想象设置代理,按照实际情况来# http代理

  npm config set proxy=http://127.0.0.1:8087npm config set registry=http://registry.npmjs.org# https代理npm config set https-proxy http://server:port# 设置用户名或密码,没有就不管npm config set proxy http://username:password@server:portnpm confit set https-proxy http://username:password@server:port# 取消代理npm config delete proxynpm config delete https-proxy设置镜像(推荐),如果没有代理,可以设置个国内镜像# 设置淘宝镜像

  npm config set registry https://registry.npm.taobao.org# 验证成功没npm config get registry

  3、简要说明一下步骤

  使用docsify命令生成文档站点

  在github上部署站点

  docsify官网

  地址:https://docsify.js.org/#/ docsify官网

  使用docsify命令生成文档站点

  安装docsify-cli 工具

  推荐安装 docsify-cli 工具,可以方便创建及本地预览文档网站。

  npm i docsify-cli -g

  因为我们已经安装了node环境,所以直接打开CMD窗口执行上面的命令就好了。

  初始化一个项目

  docsify init ./docs

  index.html 入口文件

  README.md 会做为主页内容渲染

  .nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件

  启动项目,预览效果

  到这里,就可以启动项目,然后看下效果了。 使用下面命令启动项目:

  docsify serve docs

  流程器输入:http://localhost:3000

  1、配置左侧导航栏

  不建议配置,配置了就不能显示当前文章的目录

  在\docs目录下新建一个_sidebar.md的md文件,内容如下:

  - 我的博客

  - [第一章节](blog/博客搭建.md)

  在index.html文件中配置一下。在内嵌的js脚本中加上下面这句:

  loadSidebar: true

  2、配置个封面

  套路和上面配置左侧导航栏是一样的。

  首先新建一个_coverpage.md的md文件,这里面的内容就是你封面的内容。

  # Myblogs

  > 我的博客

  [CSDN](https://blog.csdn.net/xxx)

  [滚动鼠标](#introduction)

  然后在index.xml文件中修改js脚本配置,添加一句:

  coverpage: true

  3、配置首页

  其实就是 docs目录下README.md` 文件的内容。

  我们一直没有管他,默认就是这个样子的:

  改一下,放上自己牛逼的经历或者是标签。

  # 个人简介

  部署到Github上

  登录github账号,建仓库

  创建本地仓库,推送到github

  右键Git Bash Here打开git命令行初始化一个仓库,并提交所有的博客文件到git本地仓库。

  涉及命令如下:

  git init // 初始化一个仓库

  git add -A // 添加所有文件到暂存区,也就是交给由git管理着

  git commit -m "myblogs first commit" // 提交到git仓库,-m后面是注释

  git remote add origin https://github.com/xxx/myblogs.git

  git push -u origin master // 推送到远程myblogs仓库

  按上面的命令顺序操作,不出意外的话,我们的本地myblogs已经同步到了github上面了。

  使用Github Pages

  在myblogs仓库下,选中Settings选项,找到GitHub Pages页签,在Source下面选择master branch / docs folder选项。即可完成

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“独立博客的搭建方法5分钟教你搭建个人博客”边界阅读