分步教程
1. 设置
欢迎来到 Jekyll 的分步教程。本教程将带你从具备一些前端 Web 开发经验,到从头开始构建你的第一个 Jekyll 网站,而无需依赖默认的基于 gem 的主题。
安装
Jekyll 是一个 Ruby gem。首先,在你的机器上安装 Ruby。转到 安装 并按照你的操作系统的说明进行操作。
安装了 Ruby 后,从终端安装 Jekyll
gem install jekyll bundler
创建一个新的 Gemfile
来列出你的项目的依赖项
bundle init
在文本编辑器中编辑 Gemfile
,并将 jekyll 添加为依赖项
gem "jekyll"
运行 bundle
为你的项目安装 jekyll。
你现在可以在本教程中列出的所有 jekyll 命令前加上 bundle exec
,以确保你使用的是 Gemfile
中定义的 jekyll 版本。
创建一个网站
是时候创建一个网站了!为你的网站创建一个新目录,并根据需要命名。在本教程的其余部分中,我们将把此目录称为根目录。
你还可以在此处初始化 Git 存储库。
Jekyll 的一个优点是它没有数据库。所有内容和网站结构都是文件,Git 存储库可以对这些文件进行版本控制。使用存储库是可选的,但建议使用。你可以通过阅读 Git 手册 了解有关使用 Git 的更多信息。
让我们添加你的第一个文件。在根目录中使用以下内容创建 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
构建
由于 Jekyll 是一个静态网站生成器,因此在我们可以查看网站之前,它必须构建该网站。运行以下任一命令来构建你的网站
jekyll build
- 构建网站并将静态网站输出到名为_site
的目录中。jekyll serve
- 执行jekyll build
并使用https://127.0.0.1:4000
在本地 Web 服务器上运行它,在你进行任何更改时重新构建网站。
当你正在开发一个网站时,使用 jekyll serve
。要强制浏览器在每次更改时刷新,请使用 jekyll serve --livereload
。如果存在冲突或你想让 Jekyll 在不同的 URL 上提供你的开发网站,请使用 --host
和 --port
参数,如 服务命令选项 中所述。
jekyll serve
在 _site
中构建的网站版本不适合部署。使用 jekyll serve
创建的网站中的链接和资产 URL 将使用 https://127.0.0.1:4000
或使用命令行配置设置的值,而不是 你的网站配置文件 中设置的值。要了解如何在网站准备好部署时构建你的网站,请阅读本教程的 部署 部分。
运行 jekyll serve
并转到 https://127.0.0.1:4000 在你的浏览器中。你应该会看到“Hello World!”。
此时,你可能会想,“那又怎样?”。发生的事情只是 Jekyll 将一个 HTML 文件从一个地方复制到另一个地方。
耐心点,年轻的蚱蜢,还有很多东西要学!
接下来,你将了解 Liquid 和模板。