使用docsify+github建立个人网站

写在前面的话

我之前根据网上的教程，用Python的Django搭建博客，需要写代码，申请域名和服务器，对于我这种代码小白来说，真的很艰难。后来群里大神推荐了docsify这个神器，一切都变得那么轻松可爱~

安装docsify工具

docsify中文官网：https://docsify.js.org/#/zh-cn/quickstart

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

npm i docsify-cli -g

在这之前，你要确保，你可以使用npm命令。如果你不能使用npm命令，你需要先安装Node.js。在Node.js官网下载最新的版本（太旧的版本，会不支持docsify，Windows又不能直接升级，就很麻烦）

下载之后，直接一路next下去，直至安装结束，过程很快。

然后重新打开命令提示符，输入npm i docsify-cli -g，这时候就没问题了。

部署github

在官网上，安装之后，就直接让大家初始化项目，生成doc文件了。但是我觉得，先部署github更方便。部署之后，直接在里面初始化项目。

打开github，右上角新建一个仓库。

仓库命名的时候，选一个好听的名字，因为你后面生成的主页，就是这个名字。最好用英文。选择Pulic属性，Private属性不能发布成网页。

仓库建好之后，在本地电脑上，选择一个你喜欢的地方，克隆这个库。
你可以在Clone or download中看到你应该克隆的网址。

克隆的时候，有两种类型，你可以选择HTTPS克隆，也可以选择SSH克隆。区别在于，HTTPS不需要输密码，SSH需要输密码（可以点击右上角进行切换）。因为是公开的库，所以其实任何人都可以下载，只是上传的时候，需要密码确认。

如果你选择HTTPS克隆，那直接输入你的http网址就可以直接克隆了，不需要密码。

git clone https://github.com/yangyang0126/blog.git

如果选择SSH克隆

git clone git@github.com:yangyang0126/blog.git

等待系统提示你输入密码，然后完成克隆

初始化项目

在命令提示符中，定位你刚刚克隆的文件夹位置。比如我定位到D盘的blog文件夹

D:\>cd blog

这时候，直接通过 init 初始化项目

docsify init ./docs

本地预览效果

在你创建docs文件后，系统会提示你，可以输入docsify serve ./docs，来预览效果

docsify serve ./docs

输入之后，你会看到，系统给了你一个网址http://localhost:3000

这时候，你就可以在浏览器输入这个网址，看看你现在的成果。

开始写文档

初始化成功后，可以看到 ./docs 目录下创建的几个文件

• index.html 入口文件
• README.md 会做为主页内容渲染
• .nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件

直接编辑 docs/README.md 就能更新网站内容。在你没有设置封面之前，首页的地址是：http://localhost:3000/#/README

个性化定制

具体关于侧边栏、封面等设置，大家都可以参考官网（中文版）：https://docsify.js.org/#/zh-cn/quickstart。这里就提一下，官网里所有的代码，都是写在index.html 中的。

配套的.md文件，需要自己新建

附上部分插件的详细说明（有些插件，官网写的太简单了，没办法直接用）

• docsify：设置Gitalk评论系统
• 完整网页设计可参考：https://github.com/yangyang0126/blog
• 网页预览可参考：https://yangyang0126.github.io/blog/

上传github

在本地，你把docs下面的文档都写好了，那么我们就上传到GitHub上面去。

还是在blog这个文件下，右击Git Bash Here

检查文件夹状态

git status

添加所有修改的文件

git add .

给添加的文件注释,"***"里面写你觉得合适的注释

git commit -m "update 2020.02.20"

上传GitHub

git push origin master

这时候会让你输入密码的，你就输入（屏幕上并不会显示），然后回车

生成网站

进入GitHub，确认文件都传上去了。然后点击右上角的Settings

把页面一直往下翻，找到GitHub Pages，将source选为master branch/docs folder，这时候，你会在上面看到一个网址，我的是 https://yangyang0126.github.io/blog/

这个就是你做的网站了，是不是很神奇~