使用Github Pages和Jekyll建站小记

使用Github Pages建立博客

每个Github账户都能使用Github Pages这样一个免费空间为自己搭建一个博客, 像很多Hexo之类的博客就很流行, 也很美观, 但是实际上写起博客来还是会很重, 而且定制化不强, 其实主要还是博客都是别人帮你直接弄好的, 你用模板就行了, 所以经常博客出现了什么问题, 也没有很好的办法解决, 自己去定制的话, 也会很麻烦.
当然, 你去把博客的源码完整地读一遍也是可以的.

Github Pages现在建立博客很简单, 只需要新建一个名为 username.github.io 的仓库, github会自动为你的仓库建立在github pages上(以前是需要自己进入仓库设置里手动点选github pages才行的)

为什么选择Jekyll

Jekyll是一个静态博客生成器, github pages也支持jekyll, 也就是说我们只需要将jekyll生成好的文件上传到你的username.github.io仓库里, github pages就会自动帮你构建jekyll环境, 将你的静态博客运行起来.

为什么我要从wordpress弃用换成用jekyll生成静态博客呢?其实主要有这么几个原因

  • wordpress会比较笨重, 而且有大量的功能都是我不需要的, 我如果只是纯粹想写作的话, 用wordpress会很累赘
  • wordpress的文档都保存在数据库里, 相比起来想要提取以前写过的文档, 会麻烦很多, 不是直接以某种文件形式保存起来
  • 我比较喜欢一种极简风, 现在的静态博客排版十分清晰爽朗, 让我可以一眼看清楚我写了哪些文章.
  • 使用jekyll设置好之后, 我只需要本地写好markdown博文后push到我的github仓库上, 即可更新博文, 相比wordpress更加直接快速, 且易于保存
  • 可定制性很强, 虽然排版会很花时间, 但是我可以自由地管理各个参数. 而托管在github pages也省去了我管理服务器的麻烦.

来吧, 本地搭建jekyll环境

本地搭建jekyll环境的话, 可以说jekyll的官方文档很贴心详细, 讲的浅显易懂, 所以我大部分操作都是根据官方文档进行的, 当然也有借鉴别人的经验.

在安装jekyll之前, 需要解决一些软件依赖, 所以你首先需要安装如下:

  • Ruby Jekyll是基于ruby的, 因此我们需要本地安装ruby. 但你放心, 我们并不需要编写ruby代码
  • RubyGems 可以说这是ruby的一个包管理器, 我们可以使用gem命令很方便地安装很多东西
  • Linux, Unix, or Mac OS X 不建议在windows平台下安装jekyll, 但是当然windows也有专门的jekyll安装程序

随后我们就需要使用RubyGem来帮助我们安装jekyll了, 我们只需要在终端输入以下命令即可安装jekyll

1
$ gem install jekyll

那么实际上我们的jekyll已经安装完毕了, 但是这里我还需要安装一个软件, 它是Bundler

Bundler是负责管理RubyGems组件的版本, 我们装上它就能保证本地的jekyll环境和远程github pages环境一致

安装命令也很简单, 终端输入以下命令

1
gem install bundler
  • 注意!当我们安装好bundler后, 在之后我们的网站文件目录下, 我们需要建立 Gemfile 文件, 并添加以下两行:
1
2
3
source 'https://ruby.taobao.org'
gem 'github-pages'
#添加好后在终端执行bundle install

jekyll和bundle的可用命令

bundle的命令比较简单, 但是我们之后都需要用bundle来运行jekyll

1
2
3
4
5
6
#用来确保本地与github pages的jekyll运行环境相同, 保持gem版本一致
bundle update
#用于运行jekyll生成静态博客文件
bundle exec jekyll build
#用于启动我们的静态博客, 通过访问 http://localhost:4000 预览网站
bundle exec jekyll serve

jekyll的命令, 其实在bundle里我们就有接触了, 这里我们列一下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$ jekyll build
# => The current folder will be generated into ./_site

$ jekyll build --destination <destination>

# => The current folder will be generated into <destination>

$ jekyll build --source <source> --destination <destination>

# => The <source> folder will be generated into <destination>

$ jekyll build --watch

# => The current folder will be generated into ./_site,
# watched for changes, and regenerated automatically.

$ jekyll serve

# => A development server will run at http://localhost:4000/
# Auto-regeneration: enabled. Use `--no-watch` to disable.

$ jekyll serve --detach

# => Same as `jekyll serve` but will detach from the current terminal.
# If you need to kill the server, you can `kill -9 1234` where "1234" is the PID.
# If you cannot find the PID, then do, `ps aux | grep jekyll` and kil

$ jekyll serve --no-watch

# => Same as `jekyll serve` but will not watch for changes.
# As of version 2.4, the "serve" command will watch for changes automatically.

正常来说, 我们只需要用 jekyll build 和jekyll serve就行了, 当然在前面还要加上bundle exec

jekyll 基本结构

关于jekyll基本结构, 最好还是看官方文档, 文档里有很详细的说明, 一般的jekyll网站目录结构如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.
├── _config.yml #jekyll的配置文件, 很重要也很有用
├── _drafts #存放草稿, 这个随意看个人习惯
| ├── begin-with-the-crazy-ideas.textile
| └── on-simplicity-in-technology.markdown
├── _includes #你可以加载这些包含部分到你的布局或者文章中以方便重用.
| ├── footer.html
| └── header.html
├── _layouts #我们上传的博文会根据layout类型来进行相应的排版布局
| ├── default.html
| └── post.html
├── _posts #这里放的就是你的文章了. 文件格式很重要, 必须要符合: YEAR-MONTH-DAY-title.MARKUP
| ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
| └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _data #随意
| └── members.yml
├── _site #我们用jekyll生成好的静态html文件都存放在这里
└── index.html#首页

这里有几点必须要注意

  • _post里的文件以及网站根目录下的html文件, 都必须要有YAML头信息, 才会被jekyll转换
  • 凡是有”_”开头的文件夹, 在经过jekyll转换后, 都不会被包含在_site文件夹里
  • 其他一些未被提及的目录和文件如 css 还有 images 文件夹, favicon.ico 等文件都将被完全拷贝到生成的 site 中.
  • 我们在关于jekyll自动生成html文件时, 需要使用到liquid语法

ok,那么开始生成自己的网站目录吧

建立本地的project

我们将github上的username.github.io仓库clone到本地后, 按照上面的目录结构, 将各个文件夹都建立起来之后, 就可以使用jekyll运行了.

1
2
$ bundle exec jekyll build
$ bundle exec jekyll serve

关于配置方面, 我大部分都是参考别人的仓库代码, 你也可以参考这个:programminghistorian/jekyll

这里我就不细说啦, 因为太多了. 看代码就是了

代码高亮

搭建好我们的博客后, 我们要将代码高亮. 这里其实我被困扰很久, 因为我尝试的几个markdown解析器, 都无法正确解析markdown的代码块格式并正确着色, 因此我这里是使用的highlight.js, 之后在我们的header.html里添加如下代码调用即可

1
2
3
<link rel="stylesheet" href="/css/atom-one-light.css">
<script src="/js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

域名绑定

其实就是将www.vancir.com的dns解析到我的vancir.github.io, 方法很简单, 但是容易出问题

我们只需要打开vancir.github.io仓库的settings在最下面的github pages项的custom domain上填上自己的域名, 不要加上任何比如说http或www的东西. 比如我的就是vancir.com
然后在你的域名管理平台上设置域名解析, 一般都会有新手快速设置一类的东西, 只需要我们填写ip地址.

关于我们的github pages的ip地址的获取, 我们只需要简单ping一下

1
ping vancir.github.io

得到ip地址后在域名解析处填好就可以了.

心得

整个差不多弄完了, 当然你也可以弄些比如rss, mathjax, 评论之类的功能. 其实整个站都是比较简单的, 只是在很多细节问题上, 常常会困扰很久.
但最起码的, css的排版样式问题是最最花时间了!