用 jekyll + Github Pages搭建个人博客
20170408 update.
这里只介绍一种快速搭建个人博客的方式(Linux 环境 Ubuntu 15.10):
(1) 在本地安装jekyll: 主要目的是预览,在本地编辑好文件后,在本地可以看到效果,这样只需要一次git push就可以了。如果本地不安装jekyll,github pages中一旦出现显示问题,就需要不断地修改,并不断git push提交修改。
(2)预览jekyll测试用的博客: 可以快速看到博客的样子,以及博客中都有哪些文件。
(3)Fork github中其他人的博客:github pages是托管博客的服务器,并提供了jekyll支持。github pages托管的博客,默认都是public的,即每个人都能看到。也可以设置成private的,需要每年付费84美元(目前的价格)。
(4) 在本地预览其他人的博客:这样就可以基于别人的博客继续修改完善,形成自己的博客风格。
(5)设置自己的域名:为了个性化和容易记住。默认的域名是
<github-account>.github.io
。
网上有大量的教程,以及有大量用jekyll+github pages搭建的博客,都是很棒的参考资料,更详细的内容,可以google或者继续阅读参考中的链接。
0 用jekyll+GitHub pages的优缺点
我用的时间不长,只说我目前理解的。
0.1 优点
(1)jekyll是静态页面生成器,也就是说博客中的内容都是静态文件,不像WordPress有数据库相关的漏洞。
(2) GitHub pages禁掉了所有jekyll的插件,为安全考虑
(3) Github pages托管所有代码,方便,空间大(1GB)。
参考此页:https://help.github.com/articles/what-is-github-pages/
(4) 建站速度快。共享的站点资源很多。
0.2 缺点
缺点也很明显。
(1) GitHub pages禁掉了所有jekyll的插件,不灵活。如果使用插件,需要本地生成好,直接push到github中。
(2) 需要学习的很多,虽然不难。比如,需要学习的有:Jekyll、git、liquid、css、html、javascript、yaml等,可以参考本文最后的【参考】。
(3) 在手机上发blog不方便。不像公众号那样可以在手机上方便编辑发送。
1 安装Jekyll
1.1 需要安装的软件
需要安装的软件 | 执行的命令 |
---|---|
ruby | sudo apt-get install ruby |
ruby-dev | sudo apt-get install ruby-dev |
jekyll | sudo gem install jekyll |
bundler | sudo gem install bundler |
nodejs | sudo apt-get install nodejs |
对于其他gems | 可以尝试bundle update 更新gems包 |
git、python等都是ubuntu自带的,不用再安装了。
PS: Ruby 的gem类似于Python的pip。gem程序是基于ruby的组件或者库。
1.2 查看各软件的版本
$ ruby -v
ruby 2.1.5p273 (2014-11-13) [x86_64-linux-gnu]
$ gem -v
2.2.2
$ nodejs -v
v0.10.25
jekyll -v
jekyll 3.3.1
python --version
Python 2.7.10
2 运行Jekyll测试用的网站
2.1 执行jekyll new myblog
我生成目录位置是:/home/galian/site/myblog
$ jekyll new myblog
New jekyll site installed in /home/galian/site/myblog.
Running bundle install in /home/galian/site/myblog...
Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
Resolving dependencies...
Using public_suffix 2.0.5
Using colorator 1.1.0
Using ffi 1.9.17
Using forwardable-extended 2.6.0
Installing sass 3.4.23
Using rb-fsevent 0.9.8
Using kramdown 1.13.2
Using liquid 3.0.6
Using mercenary 0.3.6
Using rouge 1.11.1
Using safe_yaml 1.0.4
Using bundler 1.13.7
Using addressable 2.5.0
Using rb-inotify 0.9.7
Using pathutil 0.14.0
Using jekyll-sass-converter 1.5.0
Using listen 3.0.8
Using jekyll-watch 1.5.0
Using jekyll 3.3.1
Installing jekyll-feed 0.8.0
Installing minima 2.1.0
Bundle complete! 3 Gemfile dependencies, 21 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Post-install message from minima:
----------------------------------------------
Thank you for installing minima 2.0!
Minima 2.0 comes with a breaking change that
renders '<your-site>/css/main.scss' redundant.
That file is now bundled with this gem as
'<minima>/assets/main.scss'.
More Information:
https://github.com/jekyll/minima#customization
----------------------------------------------
2.2 进入myblog目录:cd myblog/
2.3 执行bundle exec jekyll serve
$ bundle exec jekyll serve
Configuration file: /home/galian/site/myblog/_config.yml
Configuration file: /home/galian/site/myblog/_config.yml
Source: /home/galian/site/myblog
Destination: /home/galian/site/myblog/_site
Incremental build: disabled. Enable with --incremental
Generating...
done in 1.18 seconds.
Auto-regeneration: enabled for '/home/galian/site/myblog'
Configuration file: /home/galian/site/myblog/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
2.4 在浏览器中预览博客:http://127.0.0.1:4000/
以上基本是参考http://jekyllcn.com/中的“快速开始”。
更多jekyll的说明,请参考:http://jekyllcn.com/docs/usage/ 中文说明 或者 去官网https://jekyllrb.com/阅读英文说明。
3 克隆其他人的博客
使用jekyll的站点有很多,可以从 【使用Jekyll的站点】查询到。参考别人的代码是学习jekyll的最好方法,也是最快速的。
以我自己的为例:https://github.com/galian123/galian123.github.io
克隆我自己的博客源文件
git clone https://github.com/galian123/galian123.github.io
生成目录galian123.github.io
,里面都是我的个人博客的文件。
为了学习jekyll、liquid、yaml、css等相关知识,找一些简单的个人博客的源文件作为学习的样本,可以减少学习的压力,加快学习、理解的速度。
可以在github中fork别人的博客源文件,然后在clone到本地进行修改。
我参考过的博客:
https://github.com/yanping/art
https://github.com/waynezhang/blog
https://github.com/pizn/pizn.github.com
https://github.com/jokinkuang/stepbystep/
https://github.com/daodaoliang/daodaoliang.github.com
https://github.com/noyobo/noyobo.github.com
使用 Jekyll 写博客: http://peiwen.lu/2013/blogging-with-jekyll
https://github.com/P233/3-Jekyll
https://github.com/tianshan/tianshan.github.io
搭建github博客:http://www.quts.me/github-blog/
https://github.com/javachen/javachen.github.io
https://github.com/aborrero/alfabravo.org 是在jekyll原始风格上改的
http://codinfox.github.io/
https://github.com/codinfox/codinfox-lanyon
4 预览Github Pages上的个人网站
接着上一步,进入galian123.github.io
目录。
4.1 执行bundle update
将缺少的gems安装上。
$ bundle update
Fetching gem metadata from https://rubygems.org/..............
Fetching version metadata from https://rubygems.org/...
Fetching dependency metadata from https://rubygems.org/..
Resolving dependencies....
Installing i18n 0.7.0
Installing json 1.8.6 (was 1.8.3) with native extensions
Installing minitest 5.10.1
Installing thread_safe 0.3.5
Installing addressable 2.4.0
Installing coffee-script-source 1.12.2 (was 1.11.1)
Installing execjs 2.7.0
Using colorator 1.1.0
Using ffi 1.9.17 (was 1.9.14)
Installing multipart-post 2.0.0
Using forwardable-extended 2.6.0
Installing gemoji 2.1.0
Installing net-dns 0.8.0
Installing public_suffix 1.5.3
Using sass 3.4.23 (was 3.4.22)
Using rb-fsevent 0.9.8
Installing kramdown 1.11.1
Using liquid 3.0.6
Using mercenary 0.3.6
Using rouge 1.11.1
Using safe_yaml 1.0.4
Installing mini_portile2 2.1.0
Installing jekyll-paginate 1.1.0
Installing jekyll-swiss 0.4.0
Installing minima 2.0.0
Installing unicode-display_width 1.1.3 (was 1.1.1)
Using bundler 1.13.7
Installing tzinfo 1.2.2
Installing coffee-script 2.4.1
Installing ethon 0.10.1
Using rb-inotify 0.9.7
Installing faraday 0.11.0 (was 0.10.0)
Using pathutil 0.14.0
Installing jekyll-sass-converter 1.3.0
Installing nokogiri 1.7.0.1 (was 1.6.8.1) with native extensions
Installing terminal-table 1.7.3
Installing activesupport 4.2.7
Installing jekyll-coffeescript 1.0.1
Installing typhoeus 0.8.0
Installing listen 3.0.6
Installing sawyer 0.8.1
Installing html-pipeline 2.5.0 (was 2.4.2)
Using jekyll-watch 1.5.0
Installing octokit 4.6.2
Installing jekyll 3.3.0
Installing github-pages-health-check 1.2.0
Installing jekyll-gist 1.4.0
Installing jekyll-avatar 0.4.2
Using jekyll-feed 0.8.0
Installing jekyll-github-metadata 2.2.0
Installing jekyll-mentions 1.2.0
Installing jekyll-redirect-from 0.11.0
Installing jekyll-seo-tag 2.1.0
Installing jekyll-sitemap 0.12.0
Installing jemoji 0.7.0
Installing github-pages 104
Bundle updated!
4.2 执行bundle exec jekyll serve
$ bundle exec jekyll serve
Configuration file: /home/galian/site/galian123.github.io/_config.yml
Configuration file: /home/galian/site/galian123.github.io/_config.yml
Source: /home/galian/site/galian123.github.io
Destination: /home/galian/site/galian123.github.io/_site
Incremental build: enabled
Generating...
done in 2.26 seconds.
Auto-regeneration: enabled for '/home/galian/site/galian123.github.io'
Configuration file: /home/galian/site/galian123.github.io/_config.yml
Server address: http://127.0.0.1:4000/
Server running... press ctrl-c to stop.
Incremental build 是为了在修改博客文件、新添加博客日志时,可以实时预览效果,而不用每次重新执行bundle exec jekyll serve
。
如果Incremental build: enabled
这里不是enabled,可以通过bundle exec jekyll serve --incremental
启用Incremental build。
注意:修改_config.yml
文件,需要重新执行bundle exec jekyll serve
。
4.3 预览
5 设置自己的域名
5.1 申请域名
我是在https://wanwang.aliyun.com/domain/ 申请的域名,申请的域名galian.wang
是不需要实名制也不需要备案的。
20170408 注: 现在都需要实名制了。具体的公告,请参考: https://help.aliyun.com/noticelist/articleid/20273717.html
5.2 配置域名解析
在买到的域名订单中,找到域名,添加域名解析:
记录类型,选CNAME。
记录值,是github pages中自己主页的域名xxx.github.io 。
如图:
5.3 修改xxx.github.io个人主页中的CNAME文件
将你的域名写到CNAME文件中,不带http。
例如,我的CNAME:
5.4 配置DNS
这一步是为了尽快的看到域名的效果。
DNS:223.5.5.5
DNS:223.6.6.6
看到域名起作用后,就可以将这两个DNS删掉了,否则可能引起其他的域名解析错误。
参考:https://help.github.com/articles/setting-up-a-custom-domain-with-pages
6 参考
(1) 安装jekyll: http://jekyllcn.com/docs/installation/
(2) 关于RubyGems: https://zh.wikipedia.org/wiki/RubyGems
(3) Rubygems官网的说明: http://guides.rubygems.org/
(4) 快速开始Jekyll建站:http://jekyllcn.com/
(5) 使用Jekyll的站点
(6) 介绍Liquid模板语言的网站:
Liquid for Designers: https://github.com/Shopify/liquid/wiki/Liquid-for-Designers
liquid basics: https://help.shopify.com/themes/liquid/basics
(7) 介绍yaml语法的网站:
yaml官网:http://www.yaml.org/
YAML 语言教程: http://www.ruanyifeng.com/blog/2016/07/yaml.html
(8) Github pages :http://pages.github.com/
有许多基础的介绍。例如:
https://help.github.com/articles/using-jekyll-with-pages
https://help.github.com/articles/setting-up-a-custom-domain-with-pages
(9) GitHub pages的限制:https://help.github.com/articles/what-is-github-pages/
(10) CSS、HTML、Javascript的知识,可以参考:http://www.w3schools.com/
(11) 搭建一个免费的,无限流量的Blog—-github Pages和Jekyll入门: http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
(12)为 Jekyll 博客添加 category 分类:http://pizn.github.io/2012/02/23/use-category-plugin-for-jekyll-blog.html
(13)https://developmentseed.org/blog/2011/09/09/jekyll-github-pages/: Using Jekyll and GitHub Pages for Our Site
(14)搭建 Jekyll 博客的一些小技巧:http://pizn.github.io/2012/03/01/some-tips-for-jekyll-blog.html
(15)Github Pages 视频教程:http://yanping.me/cn/blog/2013/08/11/github-pages-step-by-step-video/
(16)关于Github Pages 视频教程:http://yanping.me/cn/blog/2013/08/12/about-github-pages-step-by-step-video/
(17) 如何使用tags和categories: http://codinfox.github.io/dev/2015/03/06/use-tags-and-categories-in-your-jekyll-based-github-pages/
(18)Github Pages + Jekyll 独立博客一小时快速搭建&上线指南: http://playingfingers.com/2016/03/26/build-a-blog/