你是不是跟我一样，一直想搭建一个自己的个人博客，却因为服务器、数据库、管理后台、前端页面、后台开发等等一系列原因所困。来吧，看了这篇文章，教你用github page搭建一个属于自己独一无二的个人博客网站。
目标可能大家一听github page这个容易，创建一个仓库，命名成 github帐号名.github.io ,然后上传一个html就可以了。不错，今天创建博客就是这么简单，当然，今天还需要在这个的基础上更进一步。只需要懂得markdown 语法，把博客写成.md文件，就可以动态生成一篇篇的博文。
所以目标就是，把需要发布的博文写成markdown 语法的md文件。然后结合nodejs打包，再发布到github上，动态生成一篇篇的博文。例如下面这样。
首页：
文章内容页：
https://woshiajuana.github.io
准备工作、技术栈- node.js npm
- vue + vue-router + axios
- marked + highlight
首先你需要申请一个github帐号，然后新创建一个仓库，命名为 帐号名.github.io 的形式，比如说我的github帐号是woshiajuana ，然后我就新建了一个woshiajuana.github.io仓库，然后上传页面，访问地址https://woshiajuana.github.io 就是我上传的页面了。这个是创建博客的第一步。
第二步，你创建好仓库之后，把仓库克隆下拉，这里你可以用git 或者操作git的一些软件都是可以的。比如我用的就是sourcetree。
第三步就多样化了，就是写前端页面，这个对于我们写前端简单的很。这里我选择了用vue来搭建自己的博客，前端页面写好了之后。你就可以把代码通过git或者sourcetree提交到github上面。此时你再去访问https://woshiajuana.github.io就能看到你上传的页面了。
第四部。上传博文，博文用markdown语法写成一个个的md文件，然后通过nodejs根据文件名打包生成一个json文件，这个json文件就作为博客首页数据请求用到的接口数据。
具体代码：
(function findDirBuildTree(dir) {
dir = dir || '.';
var directory = path.join(__dirname, '../src/article', dir);
fs.readdirSync(directory).forEach(function (file) {
var fullpath = path.join(directory, file);
var stat = fs.statSync(fullpath);
var extname = path.extname(fullpath);
if (stat.isFile() && extname === '.md') {
var keyname = path.join(dir, path.basename(file, extname));
var base_url = ENV === 'SC'
? 'https://raw.githubusercontent.com/Woshiajuana/woshiajuana.github.io/master/src/images/'
: 'http://localhost:8080/src/images/';
var article = {
id: keyname,
src: base_url + keyname +'.jpg',
};
outTree.unshift(article);
} else if (stat.isDirectory()) {
var subdir = path.join(dir, file);
findDirBuildTree(subdir);
}
})
})();
从上面代码可以看出，我把所写的博文md文件全部放在article目录下，然后用node去遍历出所有文件，然后组成一个对象，在放在一个数组中，最后再把这个数组通过node生成一个json文件：
[
{
"id": "201801050953",
"src": "https://raw.githubusercontent.com/Woshiajuana/woshiajuana.github.io/master/src/images/201801050953.jpg"
},
{
"id": "201801050952",
"src": "https://raw.githubusercontent.com/Woshiajuana/woshiajuana.github.io/master/src/images/201801050952.jpg"
},
]
博客首页的时候，用axios去get请求这个json文件，就可以得到文章的id也就是文章md文件名，因为简单，我写的md文件名都是对应年月日时分来命名的。然后给文章配图也是对应文章的名字命名。
这样的话就一一对应了，对了图片在上传到github上之后，图片的地址是
https://raw.githubusercontent.com/Woshiajuana/woshiajuana.github.io/master/src/images/201801050952.jpg 这样的。201801050952.jpg是图片名也就是对应这201801050952.md博文
这样的话首页的博文列表就大功告成。
然后就是博文内容页了。
首页根据博文的id也就是那个json文件里的id，对应着博文文件名，所以到了博文内容页，用axios根据id去get请求对应的博文md文件即可，把请求到的md文件，利用marked包编译成html格式，再利用highlight插件高亮博文内容，这样内容页也就出来了。
现在的话，要是你想添加新博客，只需要在article文件下新增一个md文件，写好博文之后，利用node形成一个json文件，axios请求这个json文件，首页就会有这篇博文，然后点击进去，axios会根据json文件博文对应id去请求md文件形成博文内容。
思想我可能说得有些绕口，但是操作起来十分的简单。
这里最麻烦的两点就是利用node去生成那个json，已经axios请求md文件编译成对应的html。我也都贴出了源码。
以上就是本文的全部内容，如果对你有所帮助或者绝对应用不错，欢迎给星。如果有什么疑问或建议，也欢迎随时找我。o(∩_∩)o
好啦，溜了溜了~~~
