在Github上创建一个博客

2013-04-28 Zhang zhengzheng 更多博文 » 博客 » GitHub »

github jekyll pages

原文链接 http://www.tychio.net/tech/2013/04/28/create.html
注:以下为加速网络访问所做的原文缓存,经过重新格式化,可能存在格式方面的问题,或偶有遗漏信息,请以原文为准。


创建

jakyll使用Github创建博客,项目名必须是username.github.io,然后直接使用主分支master即可。github使用的jekyll会自动根据相关文件生成一个_site文件夹,包括整个blog的静态文件用于访问。

_layouts文件夹为模板文件夹,可以创建一个default(自定)的html文件作为模板,并使用{{content}}作为模板接受的内容变量,另外还有{{page.title}}之类的变量。 _posts文件夹为博客文章文件夹,发布文章的格式为yyyy-mm-dd-blogname,也就说文章的日期是自定的。格式可以使用html、md、textile。当然更易于管理的方式是建立Year>Month>Day这样的目录结构。 <!-- more --> 无论是模板还是页面都可以在文件的开始,写入YAML的配置信息,使用三个横杠分隔,像这样:

---
layout: post
category: Other
tags: github page blog config
title: Create Blog on Github
---

最关键的是_config.yml文件,这个是jekyll的配置文件。其中auto为boolean值,是否自动根据修改重建网站静态文件。

destination: ./_site
auto:        true
lsi:         false

当然根目录中的index.html是必不可少的首页了,另外也许还需要一个about.html之类的页面,都放在根目录中即可,然后在模板中的导航直接放入这些页面的链接。如果不喜欢有HTML这样的后缀,可以使用文件夹代替,并在文件夹中使用index.html这样的名字。比如about/index.html 在访问时路径为www.example.com/about/

更详细的wiki可以看这里,Jekyll Wiki,可以查看各种配置和使用方法。或者访问Jekyll主页

评论

我使用的是Disqus第三方评论,国内的模仿者还有友言灯鹭多说等,它们大致的原理都一样,引入一段js,然后动态加载一个iframe,将第三方提供的输入框和评论数据呈现出来,另外这需要一个帐号,用来保存和管理你的评论。

首先注册一个Disqus的帐号,然后输入需要添加评论的网站地址,以及名称和简称,然后会自动生成一段js代码,和一个div,这个div就是容器,只要放到你的网站中需要放置评论的地方就可以了。js代码可以放在body的最后加载。

var disqus_shortname = 'tychio blog';
var disqus_title = '{{ page.title }}';
var disqus_identifier = '{{ page.id }}';
var disqus_url = 'http://www.tychio.net/{{ page.url }}';

(function() {
    var dsq = document.createElement('script'); 
    dsq.type = 'text/javascript'; dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();

disqus_shortname是简称,disqus_title是标题,disqus_identifier是标识,disqus_url是地址。

另外disqus可以自动根据网站样式生成样式,我没有做任何样式的修改,disqus就生成了文字颜色与我的blog一致的评论框。

本地环境

Jekyll是由Ruby编写的,所以首先需要下载Ruby,在这里下载Ruby1.9.3,注意不能下载Ruby2,之后会出现问题。

在下载页面中还能找到DevKit,也一并下载了,注意自己的操作系统选择对应的版本。

Ruby的安装很简单,如果是安装版连环境变量都不用配置。然后是DevKit稍微复杂点,需要几行命令:

cd /d/DevKit/
ruby dk.rb init
ruby dk.rb install

如此基本环境就准备好了,然后使用gem安装jekyll:

gem install jekyll

最后在需要建立blog的文件夹下,使用以下命令即可创建jekyll博客。

jekyll new

然后无论是否用jekyll创建的blog,在其目录下使用以下命令即可在本地启动jekyll服务:

jekyll serve

这条命令其实还包含了build命令用以生成_site文件夹,也就是博客的静态页面。如果希望每次修改都会生成,可以使用参数--watch或-w

jekyll serve -w

这样一个基本的Jekyll博客就建好了,把除了_site的其他文件push到github上即可用有自己的Blog了。