工具
Web 开发
Web 服务
Jekyll 学习笔记
Jekyll 是一个用于生成静态网站的工具。如果你觉得 WordPress 太复杂,那么 Jekyll 是一个很好的替代品。
快速入门
安装运行 Jekyll:
$ gem install bundler jekyll
$ jekyll new my-site
$ cd my-site
$ bundle exec jekyll serve
打开浏览器输入 http://localhost:4000
查看 Jekyll 生成的页面。
加上 --livereload
参数启动 Jekyll,可实现修改 .md
后浏览器自动刷新页面:
$ bundle exec jekyll serve --livereload
如果你要运行多个 Jekyll,似乎只有一个能指定 --livereload
参数。
通过 --port
修改监听端口,如:
$ bundle exec jekyll serve --port 4040
$ bundle exec jekyll serve --port 4040 --livereload
通过 --detach
使 Jekyll 在后台运行。
Jekyll 介绍
Jekyll 由 Ruby 写成。Jekyll 自身是一个 Gems 包,许多 Jekyll 插件也是 gems,例如 jekyll-feed
, jekyll-seo-tag
, jekyll-archives
等。
Gemfile
Gemfile 是一个 gems 列表,它的内容大概如下:
source "https://rubygems.org"
gem "jekyll"
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
end
Bundler
Bundler 也是一个 gem,它的作用是下载所有 Gemfile 中的 gems。
安装 bundler:
$ gem install bundler
初次运行 bundler:
$ bundle init
$ bundle add jekyll
运行以上命令后,会生成 Gemfile 文件,以及 Gemfile.lock 文件。我们可以在 Gemfile 中添加几个 Jekyll 官方插件,如:
group :jekyll_plugins do
gem 'jekyll-sitemap'
gem 'jekyll-feed'
gem 'jekyll-seo-tag'
end
并修改 _config.yml
文件:
plugins:
- jekyll-feed
- jekyll-sitemap
- jekyll-seo-tag
jekyll-sitemap
无需额外操作,Jekyll 会自动生成网站的 sitemap.xml 文件。jekyll-feed
和 jekyll-seo-tag
需要修改 _layouts/default.html
文件,在 <head> 中添加如:
{% feed_meta %}
{% seo %}
最后,运行 bundle 更新:
$ bundle update
$ bundle exec jekyll server --livereload
代码高亮
自 Jekyll 3 起,内置了代码高亮处理模块 Rouge:
- 引入代码高亮
.css
文件 — 可以从 Pygments CSS Themes 获取 - 在文档中使用
highlight
标签将代码包裹起来(或通过三个反引号的形式)
{% highlight python %}
{% endhighlight %}
常见问题
启动 Jekyll 失败,提示错误:
cannot load such file -- webrick
解决:
$ bundle add webrick