Jekyll 动态地建立静态博客网站 (Get Started)

提前声明：Jekyll并不简单，必须要正确的看待它。把它和PHP，JSP和Django等放在一起讨论会减少很多失落感。它的学习曲线几乎相当于Wordpress，工作流程和结构也几乎一样。

Jekyll与Wordpress最大不同的就是，没有数据库。但是体验上来说也算不上什么大差别。
彻底摒弃数据库，这算是一种Jekyll式的新思路。
因为你需要的只是定期更新一些Markdown格式的文章，然后让它显示成网页，并放在一起成为网站而已。没必要大动干戈的设计数据库什么的。

简单的说，Jekyll是一个基于Ruby语言的静态博客网站制作工具，它可以把Markdown转换成HTML网页。

不过对于一个HTML网页来说，它得有标题、样式、日期什么的，甚至一些根据文章的不同而动态改变的内容等。这些就不仅是把Markdown转换成HTML而已了。很多内容需要你在Markdown文件里面就写明指定。

另注：Jekyll虽然和Github Pages搭配免费，但其实是完全独立的产品。可以在任何地方使用，像Wordpress一样。

安装Jekyll

安装Jekyll需要用Ruby的包管理器gem下载，像Python的pip一样：

$ gem install jekyll

但是如果本机的gem版本不够新，是装不了jekyll的，所以就依照官网从ruby从头开始安装：

sudo apt-get install ruby ruby-dev build-essential

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME=$HOME/gems' >> ~/.bashrc
echo 'export PATH=$HOME/gems/bin:$PATH' >> ~/.bashrc
source ~/.bashrc

gem install jekyll bundler

用Jekyll创建一个网站（自动生成名为test_blog的文件夹和一个完整的Demo网站）：

$ jekyll new test_blog

目录里面内容如下：

这里面是完整的一个网站，可以直接运行浏览。
然后你就可以根据自己的主页、其它网页什么的，在这个基础上修改了。

Jekyll new时发送错误：Bundler: ruby: No such file or directory

我的Mac机上从来没做过任何Ruby项目，也不懂gem使用方法。全部原始配置后，使用gem install jekyll没问题，但是在jekyll new ..时，就发送这个错误：

Bundler: ruby: No such file or directory -- /usr/local/lib/ruby/gems/2.5.0/gems/bundler-1.16.1/exe/bundle (LoadError)

发生错误后，项目文件夹是生成了，但是不完整，也不能执行。

问题在于本机的gem和bundler都不是很新，需要更新一下。
参考：https://github.com/rubygems/r...

更新如下：

# Install latest version of Rubygems
gem update --system

# Install latest version of bundler system-wide
gem install bundler

更新时间会很长，等全部安装好后，就可以正常的使用jekyll了。

生成网站

渲染网站

$ cd test_blog
$ jekyll serve

或实时渲染网站：

$ jekyll server --watch

如果加上了--watch参数，jekyll就会实时监控你的文件，只要那个文件有变动了，比如新增了markdown文件，或修改了layout模板，它都会即时渲染生成网站，总保持更新。

运行渲染的命令后，jekyll就会把你的Markdown根据指定的模板渲染为静态网站，
同时还会把网站映射到本机的一个端口，你可以打开命令行里提示的url链接察看网站效果。

允许公网访问

如果jekyll部署在了公网上的服务器上，那么很轻松就可以公开给所有人访问了。
语法如下：

$ jekyll serve --detach  --host 0.0.0.0

# 或
$ jekyll serve --force_polling -H 0.0.0.0 -P 4000

然后就会显示如下：

也就是说公网运行jekyll的话，程序就转到后台了，需要退出的话需要手动关闭进程。

然后根据网站设计时候指定的端口，相应的在服务器防火墙上开放这个端口，比如4000。
然后用http://服务器IP:4000这样的就能访问了。
如果要不带端口号访问，就在_config.yml中把端口号设计为80。（但是经常有冲突，需要解决）

Jekyll Workflow 工作流程

使用Jekyll，主要难就在一开始，需要设计网页样式，设置全站的规则等等。
但是一旦这些基本设置都完成了，以后更新就只需要专注的写Markdown文件即可。

Jekyll自定义网站

Jekyll new命令新建一个网站结构后，文件夹里面有很多文件。这些文件结构都是什么作用，是我们必须要学习的。

Jekyll文件夹结构

• _config.yml文件：这是你第一个需要修改的东西。全网站的通用设置都保存在这里，比如网站主题，名称，介绍，域名，Github用户名等。.yml是像.ini一样的配置文件类型。
• _site文件夹：这个存放你的完整静态网站的文件夹，但是这是不需要你去碰的文件夹，它是Jekyll根据你的设置和模板之类的内容，自动生成的静态网站。
• _layout文件夹：是存放各种网页模板的地方，主页什么样子，列表页什么样子，博客内容页面什么样子，这些分别的页面模板都是放在这里的。
• _includes文件夹：存放所有重复使用的、比较固定的页面模块。比如每个网页都一样的页头、页脚，导航栏，侧边栏等等。这里面的HTML文件，都不是完整的HTML网页，都只是模块，可能只是一个<div>标签。
• _posts文件夹：存放所有的Markdown格式文件。你所有的Markdown博客内容，都放在这里。文件命名也是有规定的，比如必须是data-filename.markdown这种。

注意：

• _site文件夹需要你在.gitignore中加入屏蔽，因为这个动态生成的东西，完全不需要在git里面进行追踪。而且放在Github Pages上的话，Github引擎也不会在你的目录里面生成这个文件夹，而是在后台直接给你生成页面。之所以会有它，主要是本地设计时候用。

Front-Matter 文件头信息

文件头信息在这里被叫做front-matter,或yml-header，它是写在每个Markdown文件头部的设置信息。主要是指明这篇文章标题、日期、使用的模板、样式、标签、分类等，这样Jekyll就可以根据这些设置把markdown文件转换成你想要的最终HTML网页了。

头信息的常用参数如下：

• layout: 指明模板名称，即指定使用_layout文件夹中哪个HTML网页做为模板。
• title: 这篇文章的标题。
• data: 这篇文章的日期。
• categories: 这篇文章的分类。

“真正的”拿到Jekyll生成的静态网站

Jekyll的最终目标和整个存在意义都是生成静态网站。
但是，
默认情况下，所谓生成出来的静态HTML页面，你也不能直接打开看到效果！必须要运行jekyll serve才行，或者把它放到Github的Repo里。
那还叫什么静态网站？！
真正的静态网站不是生成HTML就行了，而是让你双击打开HTML就能在浏览器看到效果。

避开这个有点矛盾的逻辑不说了，我们有比较方便的外部工具来做到这点。
那就是最常用的wget下载命令。
wget可以把网页或整个网站下载下来，并且能自动转换各种文件里的路径。
命令如下：

$ wget -r --convert-links <URL>

所以当你运行jekyll serve成功编译生成_site目录后，就可以用wget下载本地的这个网站了。

Jekyll的体验

目前体验极其糟糕：

• 不能真正生成静态网站，必须开着Jekyll服务才能展示出网页
• Macbook air上运行jekyll服务器不到一会儿，CPU温度就极速增高
• 大概几十篇文章，就需要10s+的生成时间
• 各个主题安装极其不同，每个主题都需要单独学习其内在逻辑、变量、结构、生成方法，学习成本非常高
• 依赖性极高，很容易导致gem或nodejs依赖过期无效或出错
• Jekyll对配置文件的tokens（比如指定变量名）经常改变和更新，很快你写的配置文件就不管用老报错了。