最近在整理自己的知识，想着要不就直接在gitbook上写书，理想是美好的，现实是残酷的，gitbook一直转圈，加载不出来，所以就只能想其他方案了
我的需求很简单
- 要有热刷新功能，写完保存就可以看到博客效果
- 除了可以发布文章外，还需要具备基本的评论回复功能
- 博客ui要简单清爽
- 拒绝复杂的部署，可以一键部署到线上
中间的摸索折腾过程我就不说了，功夫不负有心人，我找到了一个比较完美的方案，那就是docsify + github page
搭建教程非常简单，先给大家看看我的博客线上效果
封面是今年最流行的渐变色，嘿嘿
首页
使用Docsify快速创建一个博客项目
Docsify是一个动态生成文档网站的工具。不同于 GitBook、Hexo 的地方是它不会生成将 .md 转成 .html 文件，所有转换工作都是在运行时进行,更多介绍建议异步官网
首先一键安装脚手架
npm i docsify-cli -g
新建一个目录，假设为Blogs，在Blogs文件夹下执行下面命令初始化项目
docsify init ./docs
执行完以上命令， Blogs文件夹下会生成 docs， docs文件目录下会生成以下 3 个文件：
index.html：入口文件
README.md：会做为主页内容渲染
.nojekyll：用于阻止GitHub Pages忽略掉下划线开头的文件
运行，docsify serve docs即可本地启动项目
然后在README.md里面写东西保存就可以热刷新了
定制博客的导航栏
官方支持两种方式，可以在 HTML 里设置，但是链接要以 #/ 开头，另外一种通过 Markdown 配置导航，我用的是后者
首先在docs/index.html配置 loadNavbar: true，之后创建 docs/_navbar.md文件.
<script>
window.$docsify = {
loadNavbar: true
}
</script>
<script src="//unpkg.com/docsify"></script>
这里配置并不是很复杂，根据缩进生成对应的目录结构，注意目录的跳转链接是当前 (docs) 目录下的文件(javascript文件夹在docs下)
docs/_navbar.md写入以下内容
* Introduction
* [简介](README.md)
* JavaScript
* [基础](/javascript/base.md)
* [This](/javascript/this.md)
效果如下
将博客发布到线上
将我们搭建的 Blog 托管到 Github，在项目的 Settings 里开启 GitHub Pages功能
选择 docs 文件目录，如下所示：
以后修改项目代码，push之后线上博客就更新了，爽爆了有没有
集成Gitalk
一个没有评论功能的博客是没有灵魂的，要集成博客评论功能, 就需要Gitalk了，虽然不只这一种方案，但是这种方案简单方便，用户多，强烈安利!!
首先要申请Gitalk应用
第一步：创建OAuth Application 申请授权地址点击这里，
参数解释：
Application name：项目名，随便填
Homepage URL：博客地址，也就是要访问的地址，我的是https://wxiaoshuang.github.io/Blogs/
Application description：应用描述，随便填
Authorization callback URL: 直接跟上面的Homepage URL一样即可
填完之后点击Register application会生成相应的clientID和clientSecret
第二步：配置gittalk 打开docs下index.html，添加上
<link rel="stylesheet" href="//unpkg.com/gitalk/dist/gitalk.css">
<script src="//unpkg.com/docsify/lib/plugins/gitalk.min.js"></script>
<script src="//unpkg.com/gitalk/dist/gitalk.min.js"></script>
<script>
var gitalkConfig = {
clientID: '', //上面生成的clientID
clientSecret: '',//上面生成的clientSecret
repo: 'Blogs',//Github博客项目名
owner: '',//github用户名
admin: [],//github用户名，可以添加多个
distractionFreeMode: false
}
window.$docsify = {
loadSidebar: true,
plugins: [
// 评论会自动同步成为项目的issue, //这些代码是给issue添加lable以及更改样式 //我的博客是取每个路由地址的第一级目录名称作为label，你可以自己操作路径// ，自己自定义
function (hook, vm) {
hook.doneEach(function () {
var label='', domObj, main, divEle, gitalk;
var labels = vm.route.path.split('/');
if(labels.length) {
for (let i = 0; i < labels.length; i++) {
var v = labels[i]
if(v && v !=='README') {
label = v
break;
}
}
}
domObj = Docsify.dom;
main = domObj.getNode("#main");
Array.apply(
null,
document.querySelectorAll("div.gitalk-container")
).forEach(function (ele) {
ele.remove();
});
divEle = domObj.create("div");
divEle.id = "gitalk-container-" + label;
divEle.className = "gitalk-container";
divEle.style = "width: " + main.clientWidth + "px; margin: 0 auto 20px;";
domObj.appendTo(domObj.find(".content"), divEle);
gitalk = new Gitalk(
Object.assign(gitalkConfig, {id: !label ? "home" : label})
);
gitalk.render("gitalk-container-" + label);
});
}
]
}
</script>
这篇文章只介绍了侧边栏配置和评论功能配置，docsify还有很多自定义配置和插件，比如代码复制，分页，tabs功能，想好好捯饬自己博客的可以去官网好好研究，我自己也捯饬了一天，才配置好了我的博客功能
真的很简单，我相信聪明的你们肯定很快就可以搭建好
完结散花，谢谢！！！
