您的位置:首页 > 编程语言

用 jekyll + Github Pages搭建个人博客

2018-01-27 22:48 435 查看
 


用 jekyll + Github Pages搭建个人博客

版权声明:本文为 Abracadabra(爱博客大伯) 原创文章,转载请注明作者及链接,请勿用于任何商业用途。

目录(?)[+]

用 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 需要安装的软件

需要安装的软件执行的命令
rubysudo apt-get install ruby
ruby-devsudo apt-get install ruby-dev
jekyllsudo gem install jekyll
bundlersudo gem install bundler
nodejssudo 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14


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 ----------------------------------------------
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
32
33
34
35
36
37
38
39
40
41
42
43
44


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.
1
2
3
4
5
6
7
8
9
10
11
12
13


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[/code]1 
生成目录
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!
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63


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.
1
2
3
4
5
6
7
8
9
10
11
12
13

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/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  github