搭建Jekyll个人博客与配置 Google Analytics 和 Disqus 教程

Jekyll 介绍

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown （或者 Textile） 以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上。

可以通过创建文章、改变头信息来控制模板和输出、修改 Jekyll 设置来使你的站点变得更有趣。

学习指导：jekyll官网

安装与运行

• Ruby http://rubyinstaller.org/downloads
  直接运行exe文件。在安装好rubyinstaller后可以通过命令ruby -v检测是否安装成功
• RubyGems https://rubygems.org/pages/downloads，在cmd with ruby界面运行ruby setup.rb

借助 RubyGems 安装 Jekyll

安装 Jekyll 的最好方式就是使用 RubyGems. 你只需要打开终端输入以下命令就可以安装了：

    gem install jekyll
    jekyll new myblog
    cd myblog
    jekyll serve
    # => Now browse to http://localhost:4000

如果安装成功，会安装在D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems目录下，并把相应的依赖项一起安装下来。

检测是否安装成功

jekyll -v

卸载

gem uninstall jekyll

运行

jekyll serve --detach
# 该功能和jekyll serve命令相同，但是会脱离终端在后台运行。
# 如果你想关闭服务器，可以使用`kill -9 r234`命令，"1234" 是进程号（PID）。
# 如果你找不到进程号，那么就用`ps aux | grep jekyll`命令来查看，然后关闭服务器。

基本用法

配置

还有一些可以配置的配置选项. 很多配置选项既可以在命令行中作为标识(flags)设定，也可以在源文件根目录中的 _config.yml 文件中进行设定。Jekyll 会自动加载这些配置。比如你在你的 _config.yml 文件中添加了下面几行：

source:      _source
destination: _deploy

那么就等价于执行了以下两条命令：

jekyll build
jekyll build --source _source --destination _deploy

头信息

正是头信息开始让 Jekyll 变的很酷。任何只要包含 YAML 头信息的文件在 Jekyll 中都能被当做一个特殊的文件来处理。头信息必须在文件的开始部分，并且需要按照 YAML 的格式写在两行三虚线之间。

---
layout: post
title: Blogging Like a Hacker
---

安装插件到网站

添加Google Analytics监控你的Jekyll站点

1. 到GA官网(需要科学上网)输入想观察的站点地址获取对应的“跟踪id”
   跟踪 ID：UA-127******80-1

2. 配置_config.yml
   google_analytics:UA-127******80-1

3. 在_includes/google_analytics.html

{% if site.google_analytics %}

<script>
(function(i,s,o,g,r,a,m){
  i['GoogleAnalyticsObject']=r;
  i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},
i[r].l=1*new Date();
a=s.createElement(o),
m=s.getElementsByTagName(o)[0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m)
})
(window,document,'script''https://www.google-analyticscom/analytics.js','ga');
ga('create', '{{ site.google_analytics }', 'auto');
ga('send', 'pageview');
</script>

{% endif %}

4.在_includes/head.html添加

  <!-- 配置Google Analytics -->
  {% if jekyll.environment == 'production' and site.google_analytics %}
  {% include google-analytics.html %}
  {% endif %}

添加 Disqus 评价系统到 Jekyll

1. 注册Disqus

    设置和拿到shortname：Your website shortname is ho****ah.
   

2. 在_config.yml添加

    ```yml
    # disqus settings
    disqus:
    shortname: hongaah
    ```
   

3. 添加_includes/disqus_comments

    ```html
    {% if page.comments %}
    <div id="disqus_thread"></div>
    <script>
    var disqus_config = function () {
    this.page.url ="https://hongaah.github.io/{{page.url}}" // <--- 修改成你的博客地址
    this.page.identifier ="https://hongaah.github.io/{{page.url}}";
    };
    (function() { // DON'T EDIT BELOW THISLINE
    var d = document, s = d.createElemen('script');
    s.src ='https://hongaah.disqus.com/embed.js';// <--- 修改成你的 disqus 站点缩写名
    s.setAttribute('data-timestamp', +newDate());
    (d.head || d.body).appendChild(s);
    })();
    </script>
    <noscript>Please enable JavaScript toview the <a href="https://disqus.com/ref_noscript" rel="nofollow">commentspowered by Disqus.</a></noscript>
    {% endif %}
    ```
   

4. 在_includes/signoff.html添加

    ```js
    <br/><br/><br/><br/><br/><hr/>
    <div>
    {% if site.disqus.shortname %}
    {% include disqus_comments.html %}
    {% endif %}
    ```
   

5. 在_posts/日志下

    Add a variable called comments to the YAML Front Matter and set its value to true. A sample front matter might look like:
   
    ---
    layout: default
    comments: true （ture为有评论/false为无）
    # other options
    ---
   
    In between a {% if page.comments %} and a {% endif %} tag, copy and paste the Universal Embed Code in the appropriate template where you'd like Disqus to load.
   
    Note: Comments can be disabled per-page by setting comments: false or by not including the comments option at all.