使用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。等十分钟左右，刷新浏览器，用你本身域名访问下试试

 

结束语

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