使用 Jekyll 在 GitHub 上搭建自己的网站

韩俊强2018/8/4大约 5 分钟

使用 Jekyll 在 GitHub 上搭建自己的网站

1、介绍

Jekyll 是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过 Markdown（或者 Textile）以及 Liquid 转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Pages 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。

使用 Jekyll 搭建博客之前要确认下本机环境：Git 环境（用于部署到远端）、Ruby 环境（Jekyll 是基于 Ruby 开发的）、包管理器 RubyGems。如果你是 Mac 用户，你就需要安装 Xcode 和 Command-Line Tools。下载方式：Preferences → Downloads → Components。

Jekyll 是一个免费的简单静态网页生成工具，可以配合第三方服务，例如：Disqus（评论）、多说（评论）以及分享等等扩展功能，Jekyll 可以直接部署在 GitHub（国外）或 Coding（国内）上，可以绑定自己的域名。

2、安装 Ruby & Devkit

官网地址：https://rubyinstaller.org/downloads/
选择版本：Ruby+Devkit 2.4.4-2 (x64)

下载完成之后，跟随提示操作一路安装就可以了！

测试是否安装成功：

ruby -v
gem -v

3、安装 Jekyll

安装 Jekyll：

gem install jekll

测试是否安装成功

jekyll -v

创建博客

jekyll new myblog

进入博客目录

cd myblog

启动本地服务

jekyll serve

也可以使用 jekyll server 或 jekyll s。

然鹅博主屁股一沉，发现事情没这么简单...

执行 jekyll server 就报错了：

/Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require': cannot load such file -- bundler (LoadError)
    from /Users/xxxxxxxx/.rvm/rubies/ruby-2.2.2/lib/ruby/site_ruby/2.2.0/rubygems/core_ext/kernel_require.rb:54:in `require'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/lib/jekyll/plugin_manager.rb:34:in `require_from_bundler'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/gems/jekyll-3.3.0/exe/jekyll:9:in `<top (required)>'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `load'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/jekyll:23:in `<main>'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `eval'
    from /Users/xxxxxxxx/.rvm/gems/ruby-2.2.2/bin/ruby_executable_hooks:15:in `<main>'

原因：没有安装 bundler，执行安装 bundler 命令：

gem install bundler

提示

Fetching: bundler-1.13.5.gem (100%)
Successfully installed bundler-1.13.5
Parsing documentation for bundler-1.13.5
Installing ri documentation for bundler-1.13.5
Done installing documentation for bundler after 5 seconds
1 gem installed

再次执行 jekyll server：

Could not find proper version of jekyll (3.1.1) in any of the sources
Run `bundle install` to install missing gems.

接着运行

bundle install

这个时候你可能会发现 bundle install 运行卡主不动了。

如果（基本上都是）很长时间都没任何提示的话，那就是被墙了，你可以尝试修改 gem 的 source：

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

输出如下：

*** CURRENT SOURCES ***

https://ruby.taobao.org

再次执行 bundle install 发现有动静了：

Fetching gem metadata from https://rubygems.org/...........
Fetching version metadata from https://rubygems.org/..
Fetching dependency metadata from https://rubygems.org/.
。。。
Installing jekyll-watch 1.3.1
Installing jekyll 3.1.1
Bundle complete! 3 Gemfile dependencies, 17 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.

bundler 安装完成后，再次启动本地服务，发现已经成功了，这时候访问 127.0.0.1:4000 就可以了。

4、目录结构

Jekyll 的核心其实是一个文本转换引擎。它的概念其实就是：你用你最喜欢的标记语言来写文章，可以是 Markdown，也可以是 Textile，或者就是简单的 HTML，然后 Jekyll 就会帮你套入一个或一系列的布局中。在整个过程中你可以设置 URL 路径、你的文本在布局中的显示样式等等。这些都可以通过纯文本编辑来实现，最终生成的静态页面就是你的成品了。

一个基本的 Jekyll 网站的目录结构一般是像这样的：

.
├── _config.yml
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   ├── post.html
|   └── page.html
├── _posts
|   └── 2017-03-23-welcome-to-jekyll.markdown
├── _sass
|   ├── _base.scss
|   ├── _layout.scss
|   └── _syntax-highlighting.scss
├── about.md
├── css
|   └── main.scss
├── feed.xml
└── index.html

这些目录结构以及具体的作用可以参考官网文档

进入 _config.yml 里面，修改成你想看到的信息，重新 jekyll server，刷新浏览器就可以看到你刚刚修改的信息了。

到此，博客初步搭建算是完成了。

5、编写文章

所有的文章都是 _posts 目录下面，文章格式为 Markdown 格式，文章文件名可以是 .markdown 或者 .md。

编写一篇新文章很简单，你可以直接从 _posts/ 目录下复制一份出来 2017-03-23-welcome-to-jekyll副本.markdown，修改名字为 2017-03-23-article1.markdown。注意：文章名的格式前面必须为 2017-03-23-，日期可以修改，但必须为年-月-日格式，后面的 article1 是整个文章的连接 URL。如果文章名为中文，那么文章的连接 URL 就会变成这样的：http://xiaohange.io/2017/03/%E6%90%AD%E5/，所以建议文章名最好是英文的或者阿拉伯数字。双击 2017-03-23-article1.markdown 打开：

---
layout: post
title:  "Welcome to Jekyll!"
date:   2017-03-23 09:29:08 +0800
categories: jekyll update
---

正文...

title：显示的文章名，如：title: 我的第一篇文章。
date：显示的文章发布日期，如：date: 2017-03-23。
categories：tag 标签的分类，如：categories: 随笔。

注意：文章头部格式必须为上面的，…. 就是文章的正文内容。

我写文章使用的是 Sublime Text2 编辑器，如果你对 Markdown 语法不熟悉的话，可以看看作业部落的教程

6、为什么要使用 Jekyll

使用了 Jekyll 你会发现，如果你想使用多台电脑发博客都很方便，只要把远端 GitHub 仓库里的博客 clone 下来，写文章后再提交就可以了。Hexo 由于远端提交的是静态网页，所以无法直接写 Markdown