手记

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

前言

你是不是跟我一样,一直想搭建一个自己的个人博客,却因为服务器、数据库、管理后台、前端页面、后台开发等等一系列原因所困。来吧,看了这篇文章,教你用github page搭建一个属于自己独一无二的个人博客网站。

目标

可能大家一听github page这个容易,创建一个仓库,命名成 github帐号名.github.io ,然后上传一个html就可以了。不错,今天创建博客就是这么简单,当然,今天还需要在这个的基础上更进一步。只需要懂得markdown 语法,把博客写成.md文件,就可以动态生成一篇篇的博文。
所以目标就是,把需要发布的博文写成markdown 语法的md文件。然后结合nodejs打包,再发布到github上,动态生成一篇篇的博文。例如下面这样。
首页:

文章内容页:

在线预览博客效果

https://woshiajuana.github.io

准备工作、技术栈
  1. node.js npm
  2. vue + vue-router + axios
  3. 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

好啦,溜了溜了~~~

29人推荐
随时随地看视频
慕课网APP

热门评论

我也觉得hexo好些

!!!111111111

啊啊啊啊啊啊啊啊啊啊啊啊啊啊

查看全部评论