如何通过 GitHub Pages 和 Jekyll 来创建个人博客网站！

本文翻译自：https://www.smashingmagazine.com/2014/08/build-blog-jekyll-github-pages/

我最近都在忙着将博客从WordPress迁移到Jekyll上，说到Jekyll，这是一个构建轻量化的，静态的网页生成器，我们可以将生成好的网页代码托管在Github Pages上面。 尽管Jekyll的主题定制和工作流程都很方便，但是，完成整个迁移的过程花费的时间比我预期的时间还是要长了一些。

本文中我们将讨论一下几个方面：

• 如何快速搭建和设置Jekyll支持的博客；
• 如何避免使用Jekyll中，遇到的一些常见的问题；
• 如何导入WordPress博客内容，使用你自己的域名，以及你自己的编辑器；
• 如何通过Liquid主题模板在Jekyll中定制你喜欢的主题；
• 还有Jeyll 2.0中的新特性，其中包括Sass, CoffeeScript支持和collections.

Jekyll概述

Jekyll是由Tome Preston-Werner开发完成的，目的是为了让我们能够通过静态的网页来搭建我们自己的博客，而网页中所有的内容都是让Github来管理的。在别的博客平台上，想要搭建一个炫酷的Geek风格的博客，流程上要繁琐很多，通过Jeyll将使这一切变得简单起来。

Jekyll允许你使用markdown语法来编辑文章内容，通过你的模板即时的输出一个完整的静态页面。而Github Pages能够方便的从你的github仓库里获取源文件来展示，所以我们大可不必关心服务器方面的问题.

这里是一些通过Keyll创建的示例网站：

• 原文作者的博客
• Zach Holman’s blog
• CSS Wizardry
• Jekyll
• HealthCare.gov’s landing page and content subpages
• Development Seed

静态网页的优点

轻量

Jekyll是一个轻量级的框架:

• 无数据库：

区别于WordPress和其他管理系统（CMS）,Jeyll没有数据库。 你所提交的内容在发布之前会被生成为静态html文件。 因为没有数据库，使得加载页面的时候非常迅速。

• 无CMS(内容管理系统)

易于操作的Markdown语法，以及通过模板生成静态网页。若是需要管理博客内容，你同样可以将Github充当做CMS来编辑你的博文。

• 快速

Jekyll之所以性能快速，是因为它轻量化以及没有数据库，你要做的，仅仅是提供静态页面。Jeyll只需要处理三种Http请求，包括文字，图片和社交图标。

• 极小的

Jeyll只包含了你搭建博客网站所需要的所有功能代码，去除了冗余的功能。

风格自主化

我们仅需要花费极少的时间来兼容别人写的模板，同样的，我们可以创建个性化定制的主题，亦或者是一个自定义一个简单的基本主题。

安全

像类似于WordPress其他平台存在的漏洞，Jekyll并没有，因为它没有CMS,数据库 or php.所以你不必花费时间去升级一些安全补丁。

方便托管

对于已经在使用Github的用户，GitHub Pages将免费构建和管理你的Jekyll网站，并且同时处理版本控制，这一切都会非常便捷。

开始动手

有多种方式来获取Jeyll，如下：

• 通过命令行进行本地安装，使用 jekyll new 创建范例网站， 使用 jekyll build 来构建， 然后使用它。(Jekyll网站就是通过这种方式)

• clone原始项目到你的电脑上，然后通过命令行来安装它，更新后再构建，然后使用它。

• fork一个版本，做一些定制化的变动，然后使用它。

我们选择第三种方式，也是最快速和容易的。 这种方式会在几分钟内启动并运行，并且我们也不用安装任何附件。下面是我们准备在Github上面做的：

1.创建我们自己Jekyll支持的网站。

2.用Github Pages来免费托管。

3.定制相关内容包括：我们的名字，头像和社交账号超链接等等。

3.发布我们的第一篇博客。

第一步：Fork一个Jekyll

首先，fork一个标准的资源库，接下来，依照本篇文章的做法对此版本库操作。 这将使我们的工作走在正确的轨道上，同时也能够节省大量的时间。

这里，我已经准备了一个资源库，进入 Jekyll now, 点击右上角的 “Fork” 按钮，fork一个博客主题的副本到你的Github账号中。

注意：常见问题#1：通过本地的命令行来创建Jekyll网站的结果可能会让你失望，并觉得这是在浪费时间，因为你不得不安装相关配置的依赖，比如说Ruby和RubyGems.记住，除非你真的需要在本地构建，请尽量让Github Pages来帮你构建。

第二步：托管在你的Github账号

作为一个Github使用者，你有权利去定制一个属于个人的网站（而不是一个单纯的项目介绍网站），它通常被寄放在 http://yourusername.github.io 仓库，这个地方正是我们托管Jekyll博客的理想位置。

这种方式让你感觉很爽的是，你只需要放置未构建的Jekyll博客在你个人仓库的master分支，接下来，Github pages将帮你构建静态网页，并让你使用它。你无需担心构建的过程。

在你新fork的仓库中，点击 Settings 按钮， 将仓库的名字改成你自己的名字（将yourusername.github.io中的yourusername替换成你的github用户名）。

你的博客网站将会立即生效。你可以访问 http://yourusername.github.io 来验证。如果未立即生效，你需要做的是，稍等片刻。

Whew!到这里，我们已经将Jekyll网站构建完成，并且能够正常运行！但是还是有一些常见的问题需要注意的：

注意：常见问题2：我需要知道用户的个人网站和项目网站之间的区别。 通常情况下，个人网站无需做任何分支。 master分支已经通过Jeyll帮我们做好了一切。所以，你大可不必在开一个 gh-pages 分支。

注意：常见问题3：通过Jekyll来构建你的项目网站时，将会变得稍许复杂，因为你的网站将被放置到子目录中。 这时，我们访问时，url地址类似于 http://yourname.github.io/repository-name, 这就会引起一些问题，比如无法引用图片资源，本地也无法显示。

注意：常见问题4：有很多插件可供使用，但是Github Pages仅仅支持其中部分。如果你企图去使用一个不被支持的插件， 接下来，当你构建你的网站时将会失败。所以，请使用被支持的插件。

第三步：如何定制你的网站

现在，你可以通过编辑_config.yml 文件来改变你网站的名字，描述性的文字，头像和一些其他选项。当你的网站重新构建时，这些自定义的变量会被生成到你的主题当中。

现在，你就可以尝试去修改_config.yml (或者仓库中的其他文件) ，这种行为将会强制Github Pages通过Jekyll去重新构建你的网站. 访问 http://yourusername.github.io 你就会看见重新构建的网页内容了。

通过更新 _config.yml 中的变量，然后提交修改的内容。

你可以通过以下三种方式来编辑你的博客文件，挑选一个最适合你的吧：

• 直接在浏览器中访问Github.com网站，在你的仓库中编辑你的文件（如下图所示：）。
• 使用第三方的Github内容编辑器，比如 Prose .此编辑器使我们更容易编辑Markdown文件，写草稿和上传图片。
• clone你的仓库到本地，在本地做更新，然后再push到Github仓库。(参考Atlassian提供的使用手册)

注意：常见问题5：不要设想为了自定义和使用Jekyll主题在本地构建。Github Pages不会支持。 你要做的仅仅是在仓库的主分支，或者是其他仓库的 gh-pages 分支放置你想构建的文件，github pages将会通过Jekyll来处理它们。

第四步：发布你的第一篇博客

你的网站如今已经被定制，看起来也还不错，运行也没什么问题。现在要做的是发布你的第一篇博客了：

1.编辑 /_posts/2014-3-3-Hello-world.md, 删除里面的存在的内容，用markdown语法来键入你想要展示的内容。关于markdown详细文档，请参考这里。

2.重命名文件，文件名需要包括具体的日期和文章的标题。Jekyll要求文件的格式是 year-month-day-title.md.

3.你还需要注意md文件头部的相关变量。通过这些变量，我们可以指定生成网页文件的格式，具体用法我们下面将会详细讨论。这里先简单的说一说，比如可以指定使用哪种布局方式，还有文件的标题。还有其他的一些变量，比如博客的固定连接，标签，分类。

如果你更喜欢在官网来提交博客，你只需要进入 /_posts 目录下，点击 new file 按钮即可，当然，你需要注意命名格式，以及头部变量的指定，剩下的工作，交给Jekyll就行了。

注意：常见问题6：前面我就已经说过了，用Jekyll来构建我们的博客，没有的管理系统的问题。这时GitHub Pages可以充当管理系统。你可以在浏览器中来编辑我们的博客，如果你希望，你甚至可以在手机上来编辑。

你还可以做的事情…

使用你自己的域名

将你的域名映射到GitHub Pages只需要简单的两部：

1.进入你的博客仓库的根目录，然后编辑 CNAME 文件，键入你的域名（比如：www.youdomainname.com）.

2.进入你域名的注册管理页面，将你申请的域名指向GitHub Pages:

• 类型： CNAME
• 域名：www.yourdomainname.com
• 重定向地址：yourusername.github.io
• TTL : 300

然后疯狂地刷新DNS,直到你的域名能够正确的定向到Github Pages,若是过程中遇到任何问题，参考这里。

从wordpress导入你的博客

在导入之前，你需要从WordPress中导出你的数据，导出后，你可能会丢失掉部分数据（比如，部分图片的引用）。幸运的是，有一些好的工具可以帮助到你。

从WordPress导出数据，我强力推荐Ben Balter的一键导出插件。它可以将你
wordpress中的数据，图片转换成Jekyll格式，然后打包成一个ZIP文件。

你还有另一个选择，你可以在WordPress的控制面板的工具菜单中，导出所有内容，然后再导入到Jekyll.

接下来，我们需要更新图片的引用。Ben Balter的插件将会导出所有的图片到一个文件夹中，你需要做的是，在你的博客中引用他们。引用的图片可以是 /images 文件夹下的图片，也可以是网络上的图片。

然后，就是繁琐的更换图片引用的过程了，由于我迁移的博客中只有比较少的图片，所以很快就完成了。但是，如果你有很多的内容需要替换，你最好还是写一个脚本来帮你完成这些任务，你可以参考这个脚本。

最后，我们还需要嵌入评论系统到我们的博客。作为一个静态网站平台，Jekyll是不支持评论的。然而，我们可以通过其他方式来嵌入这个功能，比如disqus。如果你已经在使用Jekyll，你可以在 _config.yml 文件中写入你的Disqus的shortname.

用你喜欢的编辑器在本地编辑你的博客

如果你习惯于使用Sublime, Vim, Atom抑或者是其他的编辑器来工作，你首先需要做的是clone你的博客仓库到本地，在 _posts 文件夹中创建一个新的md文件，编辑它，然后再提交到GitHub. GitHub Pages会自动帮你重新构建你的网站，构建完成后，你就可以看到新的内容了。

1.第一步， git clone git@github.com:yourusername/yourusername.github.io.git， 或者是在GitHub Mac中来克隆你的仓库。

2.第二步，在 _posts 文件夹中创建一个新的文件。注意文件需要以 year-month-day-title.md 的命名格式，还需要在头部键入头部变量格式。

3.第三步，提交文件。（Git手册）

4.第四步，你已经完成了所有工作，静待GitHub Pages来帮你重新构建你的网站即可。在你没有提交大量内容的情况下，这个过程通常需要花费你10s的时间就可以完成。

注意：常见问题7：再次强调，你不需要为了提交一篇博客而在本地构建Jekyll。你只需要本地写md文件，提交你需要使用的图片，后面的工作交给GitHub Pages即可。

Jekyll主题

想要定制你自己的主题？你需要了解：

在本地构建网站

首先，你需要安装Jekyll.有一个最方便的途径就是安装GitHub Pages gem,然后运行 gem install github-pages 命令。这行命令会帮助你将本地的环境同步到最新的版本，还包括Jekyll和所有需要的依赖，比如：kradown, jemoji,和jekyll-sitemap.另外，你还需要确保你安装的Ruby版本是大于1.9.3的，还有RubyGems的安装完成。

下面是在本地构建jekyll网站的工作流程：

1.首先，cd 到你jekyll的安装路径。

2.然后，jekyll serve –watch(更多参见这里)。

3.通过 http://0.0.0.0:4000来访问你的网站。

4.完成这些后，提交所有的更改到git主分支后，Github Pages会重新构建并为这个网站提供服务。

注意：常见问题8：请谨记，jekyll构建会清除/_sites/目录下所有文件来重新构建，所以，你不应该放置任何文件在该文件夹下，/_sites/目录下的所有文件都是由Jekyll生成的。

目录结构

这里是我Jekyll网站组织结构的快照：

/Users/barryclark/Code/jekyll-now
├─ CNAME # Contains your custom domain name (optional)
├─ _config.yml # Jekyll's configuration flags
├─ _includes # Snippets of code that can be used throughout your templates
│  ├─ analytics.html
│  └─ disqus.html
├─ _layouts 
│  ├─ default.html # The main template. Includes <head>, <navigation>, <footer>, etc
│  ├─ page.html # Static page layout
│  └─ post.html # Blog post layout
├─ _posts # All posts go in this directory!
│  └─ 2014-3-3-Hello-World.md
├─ _site # After Jekyll builds the website, it puts the static HTML output here. This is what's served!
│  ├─ CNAME
│  ├─ LICENSE
│  ├─ about.html
│  ├─ feed.xml
│  ├─ index.html
│  ├─ sitemap.xml
│  └─ style.css
├─ about.md # A static "About" page that I created.
├─ feed.xml # Powers the RSS feed
├─ images # All of my images are stored here.
│  ├── first-post.jpg
├─ index.html # Home page layout
├─ scss # The Sass style sheets for my website
│  ├─ _highlights.scss
│  ├─ _reset.scss
│  ├─ _variables.scss
│  └─ style.scss
└── sitemap.xml # Site map for the website

Liquid模板

Jekyll使用Liquid模板语言来处理模板。使用Liquid有两个关键点你需要知道：

首先，在每个内容文件中有一个YAML 前置格式代码块。它用来指定页面的布局和其他的一些变量，比如说标题，日期和标签。也可以包括一些自定义的变量。

Liquid模板标签被用来执行循环，条件语句，和内容输出。

比如说，每一个提交的博客都会遵守 post.html 文件的代码格式来展示内容.
在文件的顶部，YAML前置格式被三个连字符包围，在这里，我们可以指定文章内容的格式。

Liquid使用双括号来输出内容。比如 page.title 和 content,前一个标签用来输出标题，后面一个用来输出内容。Jekyll中很多变量都可以为我们在模板中输出相关信息。

单个大括号和模块被用来做条件语句，循环和展示包含的内容。这里，我在博客的底部包含了一个Disqus评论，引用至_includes/disqus.html.

_config.yml

这是Jekyll的配置文件，包含了Jekyll网站的所有设置。还有一件令人兴奋的事是，我们还可以指定自定义的变量。

例如，我在Jekyll Now的项目的 _config.yml中使用了自定义的变量来允许自己方便的在footer中使用SVG图标。

_config.yml：

# Includes an icon in the footer for each user name you enter
footer-links:
  github: barryclark
  twitter: baznyc

———————————————————————————–
PS:博主在翻译的过程中，自己也是一步一步的实践的，但是完成大部分工作后，对这个搭建起来的博客并非十分满意，于是，又找了一个个人比较满意的博客framework重新搭建（你现在看到的这个博客就是重新搭建的），至于具体搭建步骤，请跳转官方文档，这里我就不过多说明了。