使用Jekyll搭建个人博客
发表于 · 归类于
代码 · 阅读完需 21 分钟 ·
阅读量 报告错误
参考文档：压缩Jekyll中的HTML和CSS代码
几年前，@mdo 开发了 Jekyll，如今已经成为最流行的静态博客网站生成器。
Jekyll 简介
如果你对这几个词比较陌生： hugo hexo jekyll pugo，可以参考： 码云Pages-Jekyll、Hugo、Hexo编译静态资源
jekyll是一个基于ruby语言，将纯文本转化为静态网站和博客的生成器，不需要数据库支持。参考
一、jekyll目录结构
web
├── _includes
├── _layouts
├── _posts
├── _drafts
├─┬ public
│ └─┬─ css
│ ├─ images
│ └─ js
├── _config.yml
└── index.md
_config.yml - 这是一个你只需要编辑一次的配置文件，需要配置的变量包括你网站的title，你的邮箱等。
_includes/ - 这个目录包含了你网站要重复加载的相同部分，比如网站的header和footer。
_posts/ - 用于存放Markdown的博客文章，可以编写新的blog，可以根据网站的style进行渲染，只要文件名遵从jekyll的标准命名规则。
_drafts/ - 用于存放未发布的文章，可以不用写日期，使用jekyll server --drafts启动即可看到文章。
_layouts/ - 这个目录包含 该目录包含了用于设计某些类型的站点内的职位模板。例如，新的博客文章将使用post.html定义的HTML布局。
_site/ - 这个目录是整个站点生成为静态文件的目录，该目录应该被加入.gitignore，若web空间不支持jekyll 可直接拷贝该目录也可发布。
_data 配置变量
public/ - 这个目录可以放置其他静态文件。
头信息配置
layout - 模板文件配置
permalink - 自定义URL地址
published - 是否生成静态文件
category - 分类属性
categories - 分类属性
tags - 标签
二、使用jekyll生成个人博客
本地安装
- 安装ruby (略)
- 安装jekyll：
gem install jekyll - 生成初始化博客：
jekyll new weblog - 启动博客：
cd weblog; jekyll server
Server address: http://127.0.0.1:4000/
部署到 github Pages
- 首先你得有 github 账号
- 创建项目 建议创建项目名为 username.github.io
- 给该项目开通 gitpages
- 推送 git 到该项目，github自动生成静态页面
- 访问 https://[username].github.io/
三、内置压缩机制
（1）压缩 HTML 代码
jekyll-compress-html 是一个使用 Jekyll layout 进行代码压缩的工具，意味着使用者不需要安装任何插件即可将站点部署到 GitHub Pages 上。
使用起来也很方便：下载 compress.html 文件并保存到 _layouts，然后修改顶层 layout 文件（比如 _layouts/default.html），把它引用进去：
最后，在 _config.yml 中配置相应的压缩选项，比如我的：
compress_html:
clippings: all
comments: ["<!--", "-->"]
endings: all
startings: [html, head, body]
详细的配置文档可以在官方网站上找到。
（2）压缩 CSS 代码
Jekyll 原生支持 Sass，所以我决定使用 SASS 进行 CSS 文件的合并和压缩。
1、修改 Sass 配置
因为我的 CSS 文件全部在 public/css 目录下，所以首先需要在 _config.yml 中配置 Sass 目录来代替默认的 _sass；同时配置 style 选项，使得最后输出结果是压缩格式的：
sass:
sass_dir: /public/css
style: compressed
2、创建 Sass 样式文件
将当前 public/css 目录中的所有 CSS 文件后缀改为 .scss，并新建文件 styles.scss，用于将其他 Sass 文件合并到一起：
web
├── _includes
├── _layouts
├── _posts
├─┬ public
│ └─┬ css
│ ├── highlight.scss
│ ├── hyde.scss
│ ├── poole.scss
│ └── styles.scss
├── _config.yml
└── index.html
在 styles.scss， 中，使用 @import 语句导入其他的 Sass 文件，这样最终 Jekyll 在编译 Sass 的时候便会将其合并为一个 CSS 文件。注意，需要在文件顶部加入 Front Matter 块，否则会报错：
---
# Front matter comment to ensure Jekyll properly reads file.
---
@charset "utf-8";
// Imports sass/scss files
@import "poole";
@import "hyde";
@import "highlight";
3、引入编译后的样式文件
最后，在 HTML layout 的 <head> 标签中引入编译后的样式文件。Jekyll 会自动将 .scss 文件转化为相应的 .css 文件，所以这里只需要引入 CSS 文件即可：
<link rel="stylesheet" href="/public/css/styles.css">
最后，优化之后的代码，可以右键查看本页的源代码进行查看。
四、配置和依赖
配置
_post目录生成html规则，article 即为目录名
permalink: /article/:title.html
默认生成：_site/jekyll/update/2019/06/10/demo.html
依赖
- 安装bundler工具：
gem install bundler - 升级包：
bundle update
五、扩展配置
如果您觉得样式不够用，可以自己设置样式，然后兼容html语法
1）添加样式
效果如下：
使用html样式
自定义其他样式：
.message-a {
background-color: rgba(22,184,248,.1);
}
使用html样式-A
{:.message .message-a}
使用html样式-A
使用html样式-B
使用html样式-C
使用html样式-D
使用html样式-E
使用html样式-F
2）修改样式
h3 {
display: block;
font-weight: 300;
background-image: linear-gradient(to right,#fff, #8BC34A, #4CAF50,#4CAF50,#4CAF50, #8BC34A, #FFF);
background-color: #4CAF50;
color: #FFF;
font-size: 1.4em;
line-height: 2em;
margin: 14px 10px;
padding: 10px 0;
letter-spacing: 2px;
text-shadow: 1px 1px 1px #666;
text-align: center;
}
h4 {
display: block;
font-weight: 200;
background-image: linear-gradient(to right,#4CAF50, #8BC34A, #8BC34A, #FFF);
background-color: #4CAF50;
color: #FFF;
font-size: 1.2em;
line-height: 2em;
margin: 10px 12px 10px 0;
padding: 8px 10px 8px 15px;
letter-spacing: 2px;
border-left: solid #333 6px;
text-shadow: 1px 1px 1px #666;
}
效果：
这是测试的H3效果
这是测试的H4效果
六、常用变量
常用变量
Jekyll 会遍历你的网站搜寻要处理的文件。任何有 YAML 头信息的文件都是要处理的对象。对于每一个这样的文件，Jekyll 都会通过 Liquid 模板工具来生成一系列的数据。下面就是这些可用数据变量的参考和文档。
全局(Global)变量
| 变量 | 说明 |
|---|
| site | 来自_config.yml文件，全站范围的信息+配置。详细的信息请参考下文 |
| page | 页面专属的信息 + YAML 头文件信息。通过 YAML 头文件自定义的信息都可以在这里被获取。详情请参考下文。 |
| content | 被 layout 包裹的那些 Post 或者 Page 渲染生成的内容。但是又没定义在 Post 或者 Page 文件中的变量。 |
| paginator | 每当 paginate 配置选项被设置了的时候，这个变量就可用了。详情请看分页。 |
全站(site)变量
| 变量 | 说明 |
|---|
| site.time | 当前时间（运行jekyll这个命令的时间点）。 |
| site.pages | 所有 Pages 的清单。 |
| site.posts | 一个按照时间倒序的所有 Posts 的清单。 |
| site.related_posts | 如果当前被处理的页面是一个 Post，这个变量就会包含最多10个相关的 Post。默认的情况下， 相关性是低质量的，但是能被很快的计算出来。如果你需要高相关性，就要消耗更多的时间来计算。 用jekyll 这个命令带上 --lsi (latent semantic indexing) 选项来计算高相关性的 Post。 |
| site.categories.CATEGORY | 所有的在 CATEGORY 类别下的帖子。 |
| site.tags.TAG | 所有的在 TAG 标签下的帖子。 |
| site.[CONFIGURATION_DATA] | 所有的通过命令行和 _config.yml 设置的变量都会存到这个 site 里面。 举例来说，如果你设置了 url: http://mysite.com 在你的配置文件中，那么在你的 Posts 和 Pages 里面，这个变量就被存储在了 site.url。Jekyll 并不会把对 _config.yml 做的改动放到 watch 模式，所以你每次都要重启 Jekyll 来让你的变动生效。 |
页面(page)变量
| 变量 | 说明 |
|---|
| page.content | 页面内容的源码。 |
| page.title | 页面的标题。 |
| page.excerpt | 页面摘要的源码。 |
| page.url | 帖子以斜线打头的相对路径，例子： /2008/12/14/my-post.html。 |
| page.date | 帖子的日期。日期的可以在帖子的头信息中通过用以下格式YYYY-MM-DD HH:MM:SS (假设是 UTC), 或者YYYY-MM-DD HH:MM:SS +/-TTTT ( 用于声明不同于 UTC 的时区， 比如 2008-12-14 10:30:00 +0900) 来显示声明其他 日期/时间 的方式被改写， |
| page.id | 帖子的唯一标识码（在RSS源里非常有用），比如/2008/12/14/my-post |
| page.categories | 这个帖子所属的 Categories。Categories 是从这个帖子的 _posts以上 的目录结构中提取的。距离来说, 一个在 /work/code/_posts/2008-12-24-closures.md 目录下的 Post，这个属性就会被设置成 [‘work’, ‘code’]。不过 Categories 也能在YAML 头文件信息 中被设置。 |
| page.tags | 这个 Post 所属的所有 tags。Tags 是在YAML 头文件信息中被定义的。 |
| page.path | Post 或者 Page 的源文件地址。举例来说，一个页面在 GitHub 上的源文件地址。 这可以在 YAML 头文件信息 中被改写。 |
分页器(Paginator)
| 变量 | 说明 |
|---|
| paginator.per_page | 每一页 Posts 的数量。 |
| paginator.posts | 这一页可用的 Posts。 |
| paginator.total_posts | Posts 的总数。 |
| paginator.total_pages | Pages 的总数。 |
| paginator.page | 当前页号。 |
| paginator.previous_page | 前一页的页号。 |
| paginator.previous_page_path | 前一页的地址。 |
| paginator.next_page | 下一页的页号。 |
| paginator.next_page_path | 下一页的地址。 |
七、Jekyll语法
Jekyll的模板语法使用 Liquid
循环：反向排序并循环输出前10-20条文章
{ % for post in site.posts limit:20 offset:10 reversed %}
{ { post.title }} { { post.excerpt | remove: 'fuck' }}
{ % endfor %}
判断：and 且 or 或 contains 包含
{ % if page.excerpt %}
{ { page.excerpt| strip_html }}
{ % elsif page.description %}
{ { page.description }}
{ % else %}
{ { site.description }}
{ % endif %}
多条件
{ % case condition %}
{ % when 1 %}
here is 1
{ % when 2 or 3 %}
herer is 2 or 3
{ % else %}
... else ...
{ % endcase %}
赋值
代码高亮：显示行号 linenos 支持的语言参考Rough Wiki
{% highlight js linenos %}
console.log('Hello world!')
{% endhighlight %}
不解析代码
{ % raw %}
...liquid代码
{ % endraw %}
八、Hyde和Poole介绍
Hyde是一个厚颜无耻的双列Jekyll主题，它将突出的侧边栏与简单的内容配对。它基于Jekyll管家Poole。
该博客是基于Jekyll and Hyde and Poole的主题Hydeout结合hydejack制作的。Jekyll是程序，Hyde是主题，Poole更精致。
九、部署Jekyll博客
如果您需要使用自己的服务器的话，使用jekyll build生成静态文件存放在_site目录，把该目录文件复制到自己的Nginx(Apache)路径发布即可。
如果您需要使用git托管，建议放在github，或者gitee，或者coding托管，使用git pages功能直接自动部署，无需拷贝_site目录。
十、不错的jekyll静态站点
cayman-blog
particle
sleek
https://github.com/naveenshaji/material
JasonLe’s Blog
3-Jekyll
更多主题：http://jekyllthemes.org
注释
其他博客
https://2heng.xin/2017/06/05/jekyll/
参考文章
jekyll中的常用变量
jekyll模板、语法
jekyll模板、语法|大专栏