教你用github page搭建一个自己的个人化博客网站-原创手记-慕课网

前言

你是不是跟我一样，一直想搭建一个自己的个人博客，却因为服务器、数据库、管理后台、前端页面、后台开发等等一系列原因所困。来吧，看了这篇文章，教你用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插件高亮博文内容，这样内容页也就出来了。

<template>
    <div class="content-view"
         v-loading="is_loading"
         element-loading-text="loading...">
        <div class="content-inner" v-html="content"></div>
    </div>
</template>
<script>
    import API from '../../assets/api'
    import marked from 'marked'
    var rendererMD = new marked.Renderer();
    marked.setOptions({
        renderer: rendererMD,
        gfm: true,
        tables: true,
        breaks: true,
        pedantic: true,
        sanitize: true,
        smartLists: true,
        smartypants: true
    });
    marked.setOptions({
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });
    export default {
        data () {
            return {
                content: '',
                is_loading: false
            }
        },
        created () {
            this.fetchArticleById();
        },
        methods: {
            fetchArticleById () {
                this.is_loading = true;
                API.Req_FetchArticleById(this.$route.params.id).then((article) => {
                    setTimeout(() => {
                        this.is_loading = false;
                    },300);
                    this.content = marked(article);
                });
            }
        }
    }
</script>

现在的话，要是你想添加新博客，只需要在article文件下新增一个md文件，写好博文之后，利用node形成一个json文件，axios请求这个json文件，首页就会有这篇博文，然后点击进去，axios会根据json文件博文对应id去请求md文件形成博文内容。

思想我可能说得有些绕口，但是操作起来十分的简单。
这里最麻烦的两点就是利用node去生成那个json，已经axios请求md文件编译成对应的html。我也都贴出了源码。

以上就是本文的全部内容，如果对你有所帮助或者绝对应用不错，欢迎给星。如果有什么疑问或建议，也欢迎随时找我。o(∩_∩)o

好啦，溜了溜了~~~

教你用github page搭建一个自己的个人化博客网站原创