用 jekyll + Github Pages搭建个人博客

最新推荐文章于 2024-03-14 11:41:00 发布

爱博客大伯

最新推荐文章于 2024-03-14 11:41:00 发布

阅读量1.1w

点赞数 4

分类专栏： # github 个人博客文章标签： github

本文链接：https://blog.csdn.net/u013553529/article/details/54588010

版权

github 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

个人博客

2 篇文章 0 订阅

订阅专栏

用 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/

爱博客大伯

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
9
评论
用 jekyll + Github Pages搭建个人博客

用 jekyll + Github Pages搭建个人博客20170408 update.这里只介绍一种快速搭建个人博客的方式（Linux 环境 Ubuntu 15.10）：（1）在本地安装jekyll：主要目的是预览，在本地编辑好文件后，在本地可以看到效果，这样只需要一次git push就可以了。如果本地不安装jekyll，github pages中一旦出现显示问题，就需要不断地修改，并不断
复制链接

扫一扫