用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 安装

参考 JekyllCNMac下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>

博客图片管理

Table of Contents