压缩 Jekyll 中的 HTML 和 CSS 代码

发表于 · 归类于 代码 · 阅读完需 4 分钟 · 报告错误

几年前,@mdo 开发了 Jekyll,如今已经成为最流行的静态博客网站生成器。我从 2012 年开始使用 GitHub Pages 和 Jekyll 搭建博客,最近在修改主题的时候,计划对网页代码进行优化。所以有了此文记录。

一、压缩 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]

详细的配置文档可以在官方网站上找到。

二、压缩 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 文件合并到一起:

myblog
├── _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">

最后,优化之后的代码,可以右键查看本页的源代码进行查看。