2016 October 11 jekyll-blog

用Jekyll和Github搭建个人博客

References

Goal

Git配置, Github建立repo

买域名与github pages链接

个人是在Goddady 上买的域名，可以百度一些优惠码，并且支持支付宝支付。接下来就是将 XXX.github.io 绑定到你买的域名上，参考Configuring a Godaddy domain name with github pages， 以下步骤来设置：

  1. Set up my user page on Github (zhenzhao.github.io)

    • to put it simple, follow the steps: New repository-> username.github.io->create (done)
    • refer here

  2. Commit a file called CNAME with one line: zhaozhen.me (the domain name you brought)

    $ cd zhenzhao.github.io
$ echo "zhaozhen.me" > CNAME
$ git add .
$ git commit -m 'CNAME'
$ git push -u origin master

  3. Go to GoDaddy site to manage your URL

    • log in and go to the ‘Domain Management’

  4. Add an “A (Host)” record with “host” = @ and “Points to” = 192.30.252.153

    • 自己的域名下添加一条A记录，地址就是Github Pages的服务IP地址

  5. Add a “CNAME (Alias)” record with “host” = www and “Points to” = zhenzhao.github.io

    • add the alias (your github page address) to your domain

  6. Wait for changes to propogate.

    • try to access your brought domain, which should link you to the github page

    • or, you can test it with dig

      dig zhaozhen.me +nostats +nocomments +nocmd

Jekyll 介绍

jekyll是一个基于ruby开发的，专用于构建静态网站的程序。它能够将一些动态的组件：模板、liquid代码等构建成静态的页面集合，Github-Page全面引入jekyll作为其构建引擎，这也是学习jekyll的主要动力。同时，除了jekyll引擎本身，它还提供一整套功能，比如web server。我们用jekyll–server启动本地调试就是此项功能。读者可能已经发现，在启动server后，之前我们的项目目录下会多出一个_site目录。jekyll默认将转化的静态页面保存在_site目录下，并以某种方式组织。使用jekyll构建博客是十分适合的，因为其内建的对象就是专门为blog而生的，在后面的逐步介绍中读者会体会到这一点。但是需要强调的是，jekyll并不是博客软件，跟workpress之类的完全两码事，它仅仅是个一次性的模板解析引擎，它不能像动态服务端脚本那样处理请求。

Jekyll 安装

参考 JekyllCN 和Mac下Jekyll安装, 以MacOS为例，

Jekyll的简单使用

$ jekyll build
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中。

$ jekyll build --destination <destination>
# => 当前文件夹中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --source <source> --destination <destination>
# => 指定源文件夹<source>中的内容将会生成到目标文件夹<destination>中。

$ jekyll build --watch
# => 当前文件夹中的内容将会生成到 ./_site 文件夹中，
#    查看改变，并且自动再生成。

$ jekyll serve
# => 一个开发服务器将会运行在 http://localhost:4000/
# Auto-regeneration（自动再生成文件）: 开启。使用 `--no-watch` 来关闭。

$ jekyll serve --detach
# => 功能和`jekyll serve`命令相同，但是会脱离终端在后台运行。
#    如果你想关闭服务器，可以使用`kill -9 1234`命令，"1234" 是进程号（PID）。
#    如果你找不到进程号，那么就用`ps aux | grep jekyll`命令来查看，然后关闭服务器。[更多](http://unixhelp.ed.ac.uk/shell/jobz5.html).

Jekyll 语法

jekyll-grammar

评论功能

模板本身有评论功能，但是用的是国外的Disqus，Disqus在国内被屏蔽的。 主流的评论系统有Disqus, Facebook comment, IntenseDebate, Livefyre等。我这里选择的是IntenseDebate，其它的访问速度貌似较慢。 去IntenseDebate注册账号，并获取到key，并定义在_config.yml中，如： intensedebate_identifier: 1ce8d80a5f6d373a46f4ceaf3dff8859，intensedebate_identifier取你自己想定义的名称，值为你注册后获取到的key 在_includes目录下创建disqus.html，并添加如下代码，这样文章就有了评论功能。

img

静态的网站不可能自己存放评论，于是只能考虑外挂评论了，查了一下比较靠谱和广泛的就是DISQUS了; Disqus是一个社会化的评论解决方案，请允许我使用这个烂透了的词，调用它的接口非常简单，在自己的页面加载他的一段JS代码即可，如果别人注册了Disqus，那么就可以方便的留言，交流，一处登录，处处方便，而且Disqus也提供了一些spam等策略，不用自己操心了，并且可以和一些现有的博客系统很好的转换对接。越来越多的网站开始使用Disqus的服务了，这是一个非常不错的趋势，Jekyll配合Disqus实在是完美了。我别无所求了。

站内搜索

blog当然不能缺少站内搜索功能。主流的站内搜索都是主流的搜索引擎提供的。作为一个google控，当然必须选择google啊。当然你必须拥有一个google帐号。

google的站内搜索叫：custome search engine：http://www.google.com/cse

创建一个自定义搜索与添加评论类似只要三步：

  1. 填写自定义搜索的名字、描述、语言、站点信息，这些信息中唯一需要注意的是站点信息，建议使用mydomain.com作为搜索范围，因为这样的话，会自动转化成.mydomain.com/，能包含全站的内容
  2. 选择样式和尝试搜索。尝试搜索有时不能成功，但是不要紧
  3. 将生成脚本写到网页中

这时，可能搜索功能仍然无法使用，尤其是你的网站没有什么名气，也没有什么外链。因为google的爬虫不可能很快的抓到你的网站。但这里有个技巧可以让你的网站立刻被google收录（姑且不论排名），那就是google的Webmaster Tools工具，该工具是免费的，而且还集成了站点流量统计功能，十分强大。

进入地址：https://www.google.com/webmasters/tools/home

搜索的思路有2种：

  1. 用Google或百度做站内搜索。 总觉得村花嫁东村秀才不成，也不愿屈从了村中恶霸。所以选择第二种。
  2. 生成本博客信息的xml/json文件，然后通过ajax获取该文件，使用正则表达式搜索。默认RSS的feed.xml文件限制10篇文章，给别人订阅用很好，所以不动feed.xml，另外生成个json文件。因为要在全部博客内容中搜索，加载慢，所以单独做了个搜索页面。

站点统计

我这里添加百度统计，添加谷歌统计因为被墙了，会影响文章的访问速度，添加也需要先去百度统计网站注册账户，申请key，申请到key后类似上一步定义在_config.yml中，同时会得到一段代码，把它添加到_includes目录下的head.html中,这样统计功能就添加完成

<!--百度统计-->
<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?56385150d223d3a72bebe8a0d4a94e19";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>

这里介绍的站点统计是google的analytics，analytics的使用十分简单，同样的原理，利用注入脚本来实现流量统计的外挂，统计功能十分强大，谁用谁知道。这里就不再唠叨了。。

添加访问量

在_includes目录下的head.html中添加

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

在_includes目录下的footer.html中添加如下代码，这样文章底部有了统计访问量功能

<span id="busuanzi_container_site_pv">本站总访问量：<span id="busuanzi_value_site_pv"></span>次</span>

在_layouts目录下的post.html中添加如下代码，这样每篇文章有了统计访问量功能

<span id="busuanzi_container_page_pv"> | 访问量：<span id="busuanzi_value_page_pv"></span> 次</span>

博客图片管理

Copyright © 2018 Zhen Zhao. All rights reserved.

Buit with Jekyll and 3-Jekyll theme • Hosted on Github

Table of Contents