用 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 需要安装的软件
需要安装的软件 | 执行的命令 |
---|---|
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包 |
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.101
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目录。将缺少的gems安装上。
4.1 执行bundle update$ 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 设置自己的域名我是在https://wanwang.aliyun.com/domain/ 申请的域名,申请的域名
5.1 申请域名galian.wang是不需要实名制也不需要备案的。
20170408 注: 现在都需要实名制了。具体的公告,请参考:https://help.aliyun.com/noticelist/articleid/20273717.html在买到的域名订单中,找到域名,添加域名解析:
5.2 配置域名解析
记录类型,选CNAME。
记录值,是github pages中自己主页的域名xxx.github.io 。
如图:将你的域名写到CNAME文件中,不带http。
5.3 修改xxx.github.io个人主页中的CNAME文件
例如,我的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(1) 安装jekyll: http://jekyllcn.com/docs/installation/
6 参考
(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/
相关文章推荐
- 使用 jekyll + github pages 搭建个人博客
- 使用GitHub Pages+ Jekyll搭建个人博客
- github-pages+jekyll搭建个人博客(一)
- 搭建基于Github Pages和Jekyll的个人博客
- 在Github 搭建个人博客(通过Github pages 或 jekyll)
- 使用github pages和jekyll搭建个人博客
- 用Jekyll搭建的Github Pages个人博客
- Win10如何用jekyll + Github Pages搭建个人博客
- 使用jekyll在GitHub Pages上搭建个人博客【转】
- 使用Jekyll + GitHub Pages搭建个人博客(绑定域名)
- 用Jekyll搭建的Github Pages个人博客实践2
- 利用 Jekyll + Github pages 搭建个人博客
- 用Jekyll搭建的Github Pages个人博客实践2
- 用 jekyll + Github Pages搭建个人博客
- 使用Jekyll + GitHub Pages搭建个人博客
- 利用GitHubPages+jekyll+Markdown搭建个人博客
- 【Jekyll搭建GITHUB个人博客】安装Ruby 环境、包管理器 RubyGems、Jekyll与错误解决
- Hexo+GitHub pages 搭建个人博客
- GitHub Pages搭建个人博客
- github pages + Hexo + 域名绑定搭建个人博客