GitHub+docsify搭建个人博客

最近看到CodeSheep转载了一篇文章，是用github+docsify搭建博客，于是我自己就试了试,效果还可以，羊哥的文章：https://mp.weixin.qq.com/s/grsv_rx3DL862M8dBsHd_A

1.环境

• 你要有：
• Git
• GitHub账号
• Node,js

2.安装docsify

安装（必须有Node.js）cmd输入：
npm install docsify-cli -g
(最后-g随便加不加都行，建议加上）

开始搭建

首先要选择一个目录，来作为站点目录，比如我的是D:\MyBlogs
然后cmd里面cd到这个目录，执行：
docsify init ./docs
这时，你去看你的目录里，就多了一个docs文件夹

同时会生成3个文件

• index.html 入口文件
• README.md 作为主页内容
• .nojekll 阻止GitHub Pages忽略下划线开头的文件

启动

其实到这里，框架就搭建好了，惊不惊喜意不意外？
同样，cmd里cd到MyBlogs，执行
docsify serve docs
会这样

浏览器访问localhost:3000
就可以看到：

大体就好了！
有木有很简单！？

美化

１.侧边栏

先新建一个_loadSidebar.md文件(开头要有下划线)，可以这样写：

- 一个题目
	- [还是题目，可以加链接](Blogs\乱搞.md)
	- [另外一个题目](Blogs\还是乱搞.md)

其实就是个普通的md文件，也没啥

光动这里还不行，还要改一下index.html

在里面的js脚本中添加一行：loadSidebar: true

我们再打开localhost:3000

看到了吗？左边就有了_loadsidebar的的内容，具体可以根据自己的情况来改动。

2.封面

其实原理一样一样的

先新建_coverpage.md

然后输入：

# MyBlogs
> 后退！我要装逼了！
[一个沙雕的个人博客,点这里访问我的GitHub](github.com/A1walker)
[点这里访问GitHUb项目地址](https://github.com/A1walker/Blogs)

同样，可以改动。

然后在index.html的js脚本中添加一行：

coverpage: true

现在，整个网页都弥漫着一股沙雕气息…

然后鼠标滚动就可以看到你的文章了

README.md

有没有发现，我们到现在还没有动docs里面的README.md?

这里可以当做首页一样，比如：

其实这里可以放上自己认为很牛逼的经历，就行了。

部署到GitHub

我们现在就只差域名+服务器了，肿么办？买吗？

不需要！可以用github的GitHub Pages功能啊

登录GitHub，创建仓库

随便一点，起个名比如我的就叫Blogs

除了名字，别的什么都不需要，直接点击Create New repository就行了。

因为我是建好了再演示，所以会有那个叹号，不用管就自己起个名字就行了。

仓库建好了,我们从本地导入

先进到站点目录，右键，选择Git Bash Here，打开Git命令行

（这个真心截图截不下来）

然后分别输入一下命令：

git init   #初始化一个仓库
git add -A   #添加所有文件到暂存区（先交给git管着）
git commit -m "fuck"  #提交到git仓库，-m后面是注释
git remote add origin https://github.com/A1walker/Blogs.git  #网址要根据情况变化
git push -u origin master  #推送到远程Blogs仓库

这时，本地MyBlogs应该就同步到GitHub上面了，除非你运气无敌差…

用GitHub Pages 建立站点

相当简单，令人发指的简单！

在GitHub上你的仓库那里，选中Settings选项，

向下滑动到GitHub Pages页签，在Source下面选择master branch/docs folder

OK,好了，完美结束啦，是不是so easy？

还会提示你去哪里访问你的站点。

访问就行了。

是不是很爽？

手机也可以哦