本文档翻译自 Jekyll Docs: Step by Step Tutorial
1. 出发
欢迎来到 Jekyll 入门教程。这篇教程的目的是让你从仅拥有一些前端开发经验到构建属于你自己的第一个 Jekyll 站点 —— 而不借助依赖于 gem 的默认主题。那就让我们开始吧。
安装
Jekyll 是一个 Ruby 语言编写的程序,因此首先你需要在你的设备上安装 Ruby。你可以根据 安装教程 完成这一步。
Ruby 安装好之后,你可以在你的命令行应用中(注:如 Windows 中的 cmd,Linux 中的 terminal 等)运行下面的命令安装 Jekyll:
gem install jekyll bundler
创建一个站点
是时候创建一个站点了!你可以为你的站点先新建一个文件夹,给它起一个你喜欢的名字。在接下来的教程中我们会把这个目录称为“根目录”。
如果你想尝试点更有挑战性的东西,你可以在根目录初始化一个 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 来构建出站点以便我们查看。这里有两个命令可以在根目录下使用以构建站点:
jekyll build
- 构建站点并生成一个静态的站点目录_site
jekyll serve
- 同样构建出一个静态站点,此外还会追踪每次文件变动并在 http://localhost:4000 启动一个 Web 服务器
当你在开发一个站点的时候,你会经常用到 jekyll serve
因为可以方便的查看站点每一次变动后的更新情况。
接着运行 jekyll serve
,然后在浏览器打开 http://localhost:4000/,你应该会看到 “Hello World!” 的字眼。
Ok,到这一步,你可能会思考,这样做的意义何在?Jekyll 只是把文件从一个地方(注:根目录)复制到了另一个地方(注:_site 文件夹)。保持耐心,我们还有很多要学呢。