详细教程（分步骤）

1. Setup：安装、创建和构建 Jekyll 的详细教程

Back

你现在所阅读的是 Jekyll 分步教程，教你如何从零开始构建一个独立的 Jekyll 站点。

如果你已经有一些前端网页开发（HTML+CSS）经验上手更快，当然没有相关经验也可以快速入门，通过本教程，你可以不依赖基于 gem 的主题，从头开始创建你的第一个 Jekyll 站点。

安装 Jekyll

Jekyll 是一个 Ruby 的 gem。所以电脑上必须安装 Ruby，在安装说中找到对应你的操作系统的教程，按照教程进行操作。

安装 Ruby 后，通过终端安装 Jekyll：

gem install jekyll bundler

创建一个 Gemfile 文件并列出项目所需的依赖项：

bundle init

用文本编辑器打开 Gemfile 文件，并添加 Jekyll 依赖项：

gem "jekyll"

在终端运行 bundle 命令，完成你的 Jekyll 安装。

现在，您可以在本教程中所列出的 jekyll 命令前加上 bundle exec 前缀，以确保使用的是 Gemfile 文件中指定的 jekyll 版本。

创建一个 Jekyll 站点

现在开始创建你的 Jekyll 站点！首先，创建一个新的目录用于存放你的站点及其相关文件，可以根据你的喜好命名。在教程中或相关教程中，我们把这个 root 目录称为根目录。

你也可以将这个目录创建为一个 Git 仓库。

Jekyll 不需要数据库是其优点之一。所有的内容和站点必须程序都是文件，通过 Git 仓库可以对这些文件进行版本控制。当然不一定要初始化为一个 Git 仓库，不过推荐你这样做。了解更多 Git 的信息和使用教程你可以阅读 Git 手册。

现在，添加你的 Jekyll 站点中的第一个文件。在 root 目录中创建一个名为 index.html 的文件，并添加以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>主页</title>
  </head>
  <body>
    <h1>你好 Jekyll！</h1>
  </body>
</html>

构建 Jekyll 站点

因为 Jekyll 是一个静态网站生成器，所以我们需要先构建（生成HTML和其他相关资源文件）才能预览 Jekyll 站点。运行以下命令构建你的 Jekyll 网站：

jekyll build - 构建站点并将静态文件输出到名为 _site 的目录。
jekyll serve - 执行 jekyll build 并在本地创建 Web 服务器后运行网站，可通过浏览器访问 http://localhost:4000 预览你的 Jekyll 站点。每次修改根目录中文件都会重新构建你的 Jekyll 站点，你只需刷新就能看到最新的内容。

在创建和维护你的 Jekyll 站点时，可以使用 jekyll serve 命令，如果你希望每次修改后自动刷新浏览器中的 Jekyll 站点，你可以使用 jekyll serve --livereload 命令。如果因为和别的服务导致端口冲突，或者你想同时操作两个 Jekyll 站点，你可以通过 --host 和 --port 修改主机名（localhost）和端口（4000）具体的使用方法请查看 Jekyll 服务命令选项文档。

jekyll serve 构建后生成在 _site 目录中内容不适合直接作为网站发布。使用 jekyll serve 创建的网站，链接和资源 URL 会使用 https://localhost:4000 或你在命令行中设置的 host port 值，并非你在网站配置文件设置的网站域名。如果需要了解在网站准备发布时进行构建，请阅读本教程的部署部分。

运行 jekyll serve 后，在浏览器打开 http://localhost:4000 。你应该会看到你之前首页写的 “你好 Jekyll！”。

此时，你已经完成了一个简单的 Jekyll 站点的构建，从 Jekyll 中的一个 HTML（模板）文件到生成一个通用的 HTML 页面。

保持耐心，虽然我们还有很多东西要学，但是只要按照教程来，都可以学会的。

下一步，你可以了解 Liquiid 和主题模板相关内容。

Back