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（好比指定变量名）常常改变和更新，很快你写的配置文件就无论用老报错了。