使用Jekyll搭建个人博客


参考文档:压缩Jekyll中的HTML和CSS代码

几年前,@mdo 开发了 Jekyll,如今已经成为最流行的静态博客网站生成器。

Jekyll 简介

如果你对这几个词比较陌生: hugo hexo jekyll pugo,可以参考: 码云Pages-Jekyll、Hugo、Hexo编译静态资源

jekyll1是一个基于ruby语言,将纯文本转化为静态网站和博客的生成器,不需要数据库支持。参考

一、jekyll目录结构

web
├── _includes
├── _layouts
├── _posts
├── _drafts
├─┬ public
│ └─┬─ css
│   ├─ images
│   └─ js
├── _config.yml
└── index.md

头信息配置

layout - 模板文件配置

permalink - 自定义URL地址

published - 是否生成静态文件

category - 分类属性

categories - 分类属性

tags - 标签

二、使用jekyll生成个人博客

本地安装

Server address: http://127.0.0.1:4000/

部署到 github Pages

三、内置压缩机制

(1)压缩 HTML 代码

jekyll-compress-html 是一个使用 Jekyll layout 进行代码压缩的工具,意味着使用者不需要安装任何插件即可将站点部署到 GitHub Pages 上。

使用起来也很方便:下载 compress.html 文件并保存到 _layouts,然后修改顶层 layout 文件(比如 _layouts/default.html),把它引用进去:

---
layout: compress
---

最后,在 _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

五、扩展配置

如果您觉得样式不够用,可以自己设置样式,然后兼容html语法

使用html样式
{:.message}

效果如下:

使用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

六、Hyde和Poole介绍

Hyde2是一个厚颜无耻的双列Jekyll主题,它将突出的侧边栏与简单的内容配对。它基于Jekyll管家Poole3

该博客是基于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(https://lorepirri.github.io/cayman-blog/)

particle(https://nrandecker.github.io/particle/)

sleek(https://janczizikow.github.io/sleek/)

更多主题:http://jekyllthemes.org

注释