使用jekyll和Github搭建个人博客

一．使用jekyll和Github三步搭建个人博客

1. 在 Github 上建一个库，库的名字是xxx.github.com，其中的xxx是你的github的账号名（图中标注的不要勾选）

注:如果没有Github账号，需要注册一个，进入Github官网，

 

1. 在Jekyll模板中选择自己喜欢的模板clone到本地（这里选Bef做实例）

1. 对模板中的信息进行修改(注释掉_config.yml文件里：baseurl：“/bef”)，将模板push到自己的库中，然后访问xxx.github.io，可访问到自己的博客，so easy！

注:由于此模板图片较多，所以加载较慢，视觉效果还是不错的。

 

二．So cool发生了什么？

为什么只是简单的三步操作，就完成了个人博客的搭建呢？

搭建网站的整体思路就是:先在本地编写符合Jekyll规范的网站源码(在模板基础上更改)，然后上传到github，这种上传并不是单纯的上传，而是会经过Jekyll程序的再处理。由github生成并托管整个网站。

1.Jekyll是什么？

Jekyll是一个简单的静态站点生成器，它会根据网页源码生成静态文件。是两大静态博客主流框架（jekyll和hexo）之一。jekyll有很多模板，可以结合gitHub用来搭建免费的个人博客，jekyll使用Liquid模板语言(官方文档),是基于ruby的，所以如果在本地使用jekyll必须先搭建jekyll环境，我的建议是不必花时间在本地安装环境，由于gitHub page已经安装好环境，所以直接push到gitHub看实际效果更为明智.

2.Github Pages是什么？

   Github Pages 是Github 面向用户、组织和项目开放的公共静态页面搭建托管服务，允许站内生成网页，也允许用户自己编写网页，然后上传。站点可以被免费托管在 Github 上，可以选择使用 Github Pages 默认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持自动利用 Jekyll 生成站点，Github Pages可以被认为是用户编写的、托管在github上的静态网页。

3.优劣分析

优势：简单，免费，文章保存在github上，并且使用git的版本管理功能，不用担心文章遗失，可以在任何时间地点写文章push到gitHub发布，而且支持markdown语法，可以把主要精力放在写文章上。

劣势：有一定技术门槛，你必须要懂一点git和网页开发。它生成的是静态网页，添加动态功能必须使用外部服务，例如评论功能。因为没有用到数据库，每运行一次都必须遍历全部的文本文件，网站越大，生成时间越长。所以它不适合大型网站。

但是，总的来说，搭建中小型Blog，特别是个人博客，确实是个很好的选择。既拥有绝对管理权，又享受github带来的便利，更主要的是，这一切是免费的，github提供无限流量。

三．刨析实例

1.目录结构

 

2._config.yml:这个文件特别重要是保存配置的，标题，描述，评论等；基本上博客的所有配置可以放在这个文件里。

3._layouts这里存放的是模板文件，发布的文章会根据文章顶部的yaml文件头来设置一些元数据，如"layout:default"，表示该文章的模板使用_layouts目录下的post.html文件；"title: "，表示该文章的标题，如果不设置这个值，默认使用嵌入文件名的标题等等。4._includes这里面的就是可以重复利用的文件。这个文件可以被其他的文件包含，重复利用。{% include head.html %}，就是引用head.html。

5._posts这里的文件就实际的文章内容了。文件名必须使用“年-月-日-文章标题.后缀名”的格式。在博客上发布文章的时候，只需要在此文件夹中加入带有 YAML 头信息的 markdown 文件，然后 push 到 Github，就会被自动渲染成 HTML。

 

四．给个人博客加评论功能。

第三方的评论系统有很多，这里选择gitalk来进行演示，gitalk是纯客户端组件，无 Server 端，使用 Github 登录，所有评论数据存储为 Github Issue。

1.首先需要注册GitHub Application，Authorization callback URL 填写当前使用插件页面的域名。具体见下图。

 

2.创建comments.html，内容如下，添加到about页面（这里以about页面为例，其它页面类似）

{% if page.comments != false %}

    {% if site.comments_provider == 'gitalk' %}
        <div id="gitalk-container"></div>
        <script src="/assets/js/gitalk.min.js"></script>
        <script>
        var gitalk = new Gitalk({
            id: '{{ page.url }}',
            clientID: '{{ site.gitalk.clientID }}',
            clientSecret: '{{ site.gitalk.clientSecret }}',
            repo: '{{ site.gitalk.repo }}',
            owner: '{{ site.gitalk.owner }}',
            admin: ['{{ site.gitalk.owner }}'],
            labels: ['gitment'],
            perPage: 50,
        })
        gitalk.render('gitalk-container')
        </script>
    {% endif %}
{% endif %}

3.在gitHub上创建仓库blog-comments，添加如下代码到_config.yml

注：clientID和clientSecret是第一步注册的时候得到的，owner是自己的用户名

comments_provider: gitalk
# !!!重要!!! 请修改下面这些信息为你自己申请的
gitalk:
    owner: jueye3
    repo: blog-comments
    clientID: fa5504fe07f319cba9ee
    clientSecret: 30532bea61e8b63dc5a852e448621a8c89cef99b

4.下载gitalk.min.js（放到assets/js文件夹下）和gitalk.css（放到assets/css文件夹下）， push后访问，效果如下图

 

5.使用gitHub账号登陆初始化，就可以使用评论功能了。效果如下图。

 

五．给个人博客加统计功能

相信很多人对自己的博客访问量还是很感兴趣的，好的关注度和大的访问量能给自己写博客很大信心，下面我就介绍一下如何给自己的博哥添加统计功能（以百度统计为例）

1.在百度统计上注册账号并登陆，然后新增网站

2.在_includes下创建baidu-anaylysis.html，内容是百度统计生成的代码，

3.在head.html文件中添加{% include  baidu-anaylysis.html %}，Push后可以检查是否成功。

4.代码正确安装，可以查看报告了

 

六．给个人博客绑定域名

首先需要有域名，如果没有域名，可以通过很多渠道注册域名，有了域名之后，新建一个CNAME文件（无后缀名），然后用文本编辑器打开，在首行添加你的网站域名，如http://xxxx.com，注意前面没有http://example.com或者xxx.example.com。

 

在域名解析提供商，下面以百度云为例。
（1）先添加一个CNAME，主机记录写@，后面记录值写上你的http://xxxx.github.io

（2）再添加一个CNAME，主机记录写www，后面记录值也是http://xxxx.github.io

这样别人用www和不用www都能访问你的网站（其实www的方式，会先解析成http://xxxx.github.io，然后根据CNAME再变成http://xxx.com，中间是经过一次转换的）。

注:上面，我们用的是CNAME别名记录，也有人使用A记录，后面的记录值是写github page里面的ip地址，但有时候IP地址会更改，导致最后解析不正确，所以还是推荐用CNAME别名记录要好些，不建议用IP。等十分钟左右，刷新浏览器，用你自己域名访问下试试

 

结束语

按照本篇文章搭建起个人博客应该不成问题，并且应该不会花费多少时间就能完成，但是要博客个性化，搭建一个自己喜欢的博客，可能就需要下一番功夫了，我建议还是模板上改，先找一个自己喜欢的模板，在改的过程中会有一些自己的想法，慢慢搭建一个自己喜欢的具有个人风格的博客。欢迎大家和我在交流，