Jekyll中文文档__Step by Step Tutorial

已于 2023-05-03 16:43:49 修改
阅读量378 收藏 1
点赞数 2
分类专栏： jekyll 文章标签： ruby 前端
于 2023-04-02 21:56:46 首次发布
原文链接：https://jekyllrb.com/docs/step-by-step/01-setup/
版权

设置

欢迎收看 Jekyll 的分步教程。本教程将带您从拥有一些前端web开发经验到从零开始构建您的第一个Jekyll网站，而不依赖于默认的 gem-based 的主题。

安装

Jekyll 是一个 Ruby gem。首先，在您的机器上安装 Ruby 。转到 安装 ，然后根据您的操作系统，按照相应的说明进行操作。

安装 Ruby 后，从终端安装 Jekyll ：

gem install jekyll bundler

创建一个新的 Gemfile 来列出项目的依赖项：

bundle init

在文本编辑器中编辑 Gemfile ，并添加 jekyll 作为依赖项：

gem "jekyll"

运行 bundle 为您的项目安装 jekyll 。

现在，您可以在本教程中列出的所有 jekyll 命令前面加上 bundle exec ，以确保使用 Gemfile 中定义的 jekyll 版本。

创建网站

是时候创建一个网站了！为您的网站创建一个新目录，并根据您的意愿命名。在本教程的其余部分中，我们将把这个目录称为 root 目录。

您也可以在此处初始化 Git 存储库。

Jekyll 的一大优点是没有数据库。所有内容和网站结构都是Git存储库可以对其进行版本控制的文件。使用存储库是可选的，但建议使用。你可以通过阅读 Git Handbook 来了解更多关于使用 Git 的信息。

让我们添加您的第一个文件。在 root 中创建 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 并在本地web服务器上运行它 http://localhost:4000 ，在您进行更改时随时重建网站。

注意：
当你开发一个网站时，请使用 jekyll serve。要强制浏览器每次更改都进行刷新，请使用 jekyll serve --livereload。如果发生冲突，或者您希望 Jekyll 把您的开发站点 serve 到不同的URL上，请使用 --host 与 --port 参数，如 serve command options 中所述。

警告：
jekyll serve 在 _site 中构建的站点版本不适合部署。 jekyll serve 创建的网站中的 Links 和 asset URLs 将使用https://localhost:4000 地址或使用命令行配置设置的值，而不是在站点配置文件中设置的值。当已准备好进行部署时，要了解如何构建适合部署的站点，请阅读本教程的Deployment部分。

运行 jekyll serve 并在您的浏览器中跳转到 http://localhost:4000。您应该能看到 “Hello World!” 。

在这一点上，你可能会想，“那又怎样？”。唯一发生的事情是 Jekyll 将一个 HTML文件从一个地方复制到另一个地方。

耐心点，小蚱蜢，还有很多东西要学！

接下来，您将学习 Liquid 和 templating 。

Liquid

Liquid 是 Jekyll 开始变得更有趣的地方。它是一种模板语言，包含三个主要组件：

Objects

对象告诉 Liquid 将预定义的 variables 作为页面上的内容输出。对 objects 使用双大括号：{{ 和 }} 。

例如， {{ page.title }} 显示的是 page.title 变量。

Tags

Tags 定义模板的逻辑和控制流。tags 使用大括号和百分号：{% 和 %} 。

例如：

{% if page.show_sidebar %}
  <div class="sidebar">
    sidebar content
  </div>
{% endif %}

如果 show_sidebar 页面变量的值为 true ，则会显示侧边栏。

点击 here 了解更多关于Jekyll中可用 tags 的信息。

Filters

过滤器会更改 Liquid 对象的输出。它们在输出中使用，并用 | 分隔。

例如：

{{ "hi" | capitalize }}

这显示的是 Hi 而不是 hi.

了解有关可用 filters 的详细信息。

使用 Liquid

现在，使用 Liquid 让你"设置"章节的 Hello World! 文本小写：

...
<h1>{{ "Hello World!" | downcase }}</h1>
...

要让 Jekyll 处理您的更改，请在页面顶部添加 front matter ：

---
# front matter tells Jekyll to process Liquid
---

您的 HTML文档应该如下所示：

---
---

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Home</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

当你重新加载浏览器时，你应该会看到 hello world! 。

Jekyll 的大部分控制力来自于将 Liquid 与其他功能相结合。将 frontmatter 添加到页面中，使Jekyll 处理这些页面上的 Liquid 。

接下来，您将了解更多关于 frontmatter 的信息。

Front Matter

Front matter是放置在文件开头的两条三重虚线之间的 YAML 片段。

您可以使用 front matter 为页面设置变量：

---
my_number: 5
---

您可以使用 page 变量调用 Liquid 中的 front matter 变量。例如，要输出上面 my_number 变量的值：

{{ page.my_number }}

使用 front matter

更改网站上的 <title> 以使用 front matter ：

---
title: Home
---
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    <h1>{{ "Hello World!" | downcase }}</h1>
  </body>
</html>

注意：
您必须在页面上包含 front matter ，以便 Jekyll 处理页面上的任何 Liquid tags 。

要使 Jekyll 处理一个页面而不在 front matter 中定义变量，请使用：

---
---

接下来，您将了解更多关于 layouts 的信息，以及为什么您的页面使用的源代码比 plain HTML 更多。

Layouts

在构建页面时，Jekyll 除了支持 HTML 外，还支持 Markdown 。Markdown 对于内容结构简单（只有段落、标题和图像）的页面来说是一个很好的选择，因为它比原始 HTML 更不冗长。

在网站的根文件夹中创建一个名为 about.md 的新 Markdown 文件。

您可以复制 index 页面的内容，并针对 About 页面对其进行修改。然而，这会创建重复的代码，且针对您添加到网站的每个新页面，这份代码都要重新自定义修改。

例如，向站点添加新的样式表需要将样式表的链接添加到每个页面的 <head> 。对于有很多页面的网站来说，这是在浪费时间。

创建一个 layout

Layouts 是可以由网站中的任何页面使用的模板，并且可以包裹页面内容。它们存储在一个名为 _layouts的目录中。

在站点的根文件夹中创建 _layouts 目录，并创建一个包含以下内容的新 default.html 文件：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {{ content }}
  </body>
</html>

这个 HTML 几乎与 index.html 相同，只是没有 front matter ，且页面的内容被 content 变量取代。

content 是一个特殊的变量，它返回被调用页面的渲染内容。

使用 layouts

要使 index.html 使用您的新 layout ，请在 front matter 中设置 layout 变量。该文件应如下所示：

---
layout: default
title: Home
---
<h1>{{ "Hello World!" | downcase }}</h1>

重新加载站点时，输出保持不变。

由于 layout 包裹了页面上的内容，因此可以在 layout 文件中调用 front matter 如 page。当您将 layout 应用于页面时，它会使用该页面上的 front matter 。

构建 About 页面

将以下内容添加到 about.md 以在About 页面中使用新布局：

---
layout: default
title: About
---
# About page

This page tells you a little bit about me.

在浏览器中打开 http://localhost:4000/about.html 并查看您的新页面。

祝贺你，你现在有了一个两页的网站！

接下来，您将学习如何在网站中从一页导航到另一页。

Includes

网站正在整合；然而，没有办法在页面之间导航。让我们来解决这个问题。

导航应该在每个页面上，所以将其添加到 layout 中是正确的做法。与其直接将其添加到 layout 中，不如将其作为了解 include 的机会。

Include tag

include tag 允许您包含存储在 _includes 文件夹中的另一个文件中的内容。对于在站点中反复出现的源代码，要使其只有唯一出处，使用 Includes 是非常有用的。同时它对提高代码可读性也非常有用。

在源代码之间导航可能会变得复杂，所以有时将其移动到 include 中是很好的。

Include 使用

在 _includes/navigation.html 中创建一个 navigation 文件，其中包含以下内容：

<nav>
  <a href="/">Home</a>
  <a href="/about.html">About</a>
</nav>

尝试使用 include tag 将 navigation 添加到 _layouts/default.html ：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

在浏览器中打开 http://localhost:4000 并尝试在页面之间切换。

高亮显示当前页面

让我们更进一步，在导航中突出显示当前页面。

_includes/navigation.html 需要知道插入页面的URL，以便添加样式。Jekyll有一些有用的 variables ，其中一个是 page.url 。

使用 page.url ，您可以检查每个链接是否为当前页面，如果为 true ，则将其涂成红色：

<nav>
  <a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
    Home
  </a>
  <a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
    About
  </a>
</nav>

看看 http://localhost:4000 并查看当前页面的红色链接。

如果您想在导航中添加新项目或更改高亮显示的颜色，这里仍然有很多重复工作要做。在下一步中，我们将解决这个问题。

Data Files

Jekyll 支持从位于 _data 目录中的YAML、JSON和CSV文件加载数据。Data files 是将内容与源代码分离的好方法，使网站更易于维护。

在这一步中，您将把导航的内容存储在一个 data file 中，然后在 navigation include 中对其进行迭代。

Data file 使用

YAML 是Ruby生态系统中常见的一种格式。您将使用它来存储一组 navigation 项，每个 navigation 项都有一个名称和链接。

使用以下内容在 _data/navigation.yml 中创建 navigation 数据文件：

- name: Home
  link: /
- name: About
  link: /about.html

Jekyll 通过 site.data.navigation 来让您访问此数据文件。现在您可以迭代数据文件，而不是在 _includes/navigation.html中输出每个链接：

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
      {{ item.name }}
    </a>
  {% endfor %}
</nav>

输出将完全相同。不同之处在于，添加新的导航项和更改 HTML结构变得更加容易。

没有CSS、JS和图片的网站有什么好处？让我们看看如何处理Jekyll中的 assets 。

Assets

使用 Jekyll 可以直接使用CSS、JS、图像和其他 assets 。将它们放在您的站点文件夹中，它们将复制到已构建的站点中。

Jekyll 网站经常使用这种结构来组织 assets ：

.
├── assets
│   ├── css
│   ├── images
│   └── js
...

因此，从您的 assets 文件夹中，创建名为css、images和js的文件夹。此外，直接在根目录下创建另一个名为 ‘_sass’ 的文件夹，您很快就会需要它。

Sass

内联 _includes/navigation.html 中使用的样式（在同一文件中添加或配置）不是最佳做法。相反，让我们通过在一个新的 css 文件中定义我们的第一个类来设置当前页面的样式。

要执行此操作，请从 navigation.html 文件中引用类（您将在本步骤的下一部分中配置该类），方法是删除先前添加的代码（将当前链接涂成红色）并插入以下代码：

<nav>
  {% for item in site.data.navigation %}
    <a href="{{ item.link }}" {% if page.url == item.link %}class="current"{% endif %}>{{ item.name }}</a>
  {% endfor %}
</nav>

您可以使用标准的CSS文件进行样式设置，我们通过使用 Sass 将可以更进一步。Sass 是 CSS 的一个极好的扩展，直接烘焙到 Jekyll 中。

首先在 assets/css/styles.scss 这个位置创建一个 Sass 文件，其中包含以下内容：

---
---
@import "main";

顶部的空的 front matter 告诉 Jekyll 它需要处理文件。@import "main" 告诉 Sass 在 Sass 目录（_sass/）中查找一个名为 main.scss 的文件，默认情况下，该文件已直接在网站的根文件夹下创建好了。

在这个阶段，您只需要一个主css文件。对于较大的项目，这是一个很好的方法来保持CSS井然有序。

创建上面提到的当前类，以便将当前链接涂成绿色。在 _sass/main.scss 这个位置创建一个包含以下内容的Sass文件：

.current {
  color: green;
}

您需要在 layout 中引用样式表。

打开 _layouts/default.html 并将样式表添加到 <head> ：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

这里引用的 styles.css 是由Jekyll根据您之前在 assets/css/ 中创建的 styles.scss 生成的。

加载 http://localhost:4000 并检查导航中的活动链接是否为绿色。

接下来我们来看看 Jekyll 最受欢迎的功能之一，博客。

Blogging

你可能想知道，如果没有数据库，你怎么能有一个博客。在真正的 Jekyll 风格中，博客只由文本文件来驱动。

Posts

博客 posts 位于一个名为 _posts 的文件夹中。posts 的文件名有一种特殊的格式：发布日期，然后是标题，然后是扩展名。

在 _posts/2018-08-20-bananas.md 这个位置创建您的第一篇帖子，内容如下：

---
layout: post
author: jill
---

A banana is an edible fruit – botanically a berry – produced by several
kinds of large herbaceous flowering plants in the genus Musa.

In some countries, bananas used for cooking may be called "plantains",
distinguishing them from dessert bananas. The fruit is variable in size,
color, and firmness, but is usually elongated and curved, with soft
flesh rich in starch covered with a rind, which may be green, yellow,
red, purple, or brown when ripe.

这就像你之前创建的 about.md，只是它有一个作者和不同的 layout 。author 是一个自定义变量，它不是必需的，可以像 creator 一样命名。

Layout

post layout 并不存在，因此您需要在 _layouts/post.html 上创建它，其中包含以下内容：

---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>

{{ content }}

这是 layout 继承的一个例子。post layout 输出标题、日期、作者和内容主体，这些内容主体由默认的 layout 包装。

还要注意 date_to_string filter，它将日期格式化为更好的格式。

List posts

目前无法导航到博客文章。通常情况下，博客会有一个列出所有 posts 的页面，接下来我们就来做吧。

Jekyll 在 site.posts 上提供所有的 posts 。

在根目录（/blog.html）中创建包含以下内容的 blog.html：

---
layout: default
title: Blog
---
<h1>Latest Posts</h1>

<ul>
  {% for post in site.posts %}
    <li>
      <h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
      {{ post.excerpt }}
    </li>
  {% endfor %}
</ul>

此代码需要注意以下几点：

  • post.url 由 Jekyll 自动设置为 post 的输出路径
  • post.title 是从 post 文件名中提取的，可以通过在 front matter 中设置 title 来覆盖
  • post.excerpt 默认情况下是内容的第一段

您还需要一种通过主导航来导航到此页面的方法。打开 _data/navigation.yml 并为博客页面添加一个条目：

- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html

More posts

仅有一篇博文并不是很令人兴奋。我们来添加更多内容：

_posts/2018-08-21-apples.md:

---
layout: post
author: jill
---
An apple is a sweet, edible fruit produced by an apple tree.

Apple trees are cultivated worldwide, and are the most widely grown
species in the genus Malus. The tree originated in Central Asia, where
its wild ancestor, Malus sieversii, is still found today. Apples have
been grown for thousands of years in Asia and Europe, and were brought
to North America by European colonists.

_posts/2018-08-22-kiwifruit.md:

---
layout: post
author: ted
---
Kiwifruit (often abbreviated as kiwi), or Chinese gooseberry is the
edible berry of several species of woody vines in the genus Actinidia.

The most common cultivar group of kiwifruit is oval, about the size of
a large hen's egg (5–8 cm (2.0–3.1 in) in length and 4.5–5.5 cm
(1.8–2.2 in) in diameter). It has a fibrous, dull greenish-brown skin
and bright green or golden flesh with rows of tiny, black, edible
seeds. The fruit has a soft texture, with a sweet and unique flavor.

打开 http://localhost:4000 看看你的博客文章。

接下来，我们将重点为每篇文章的作者创建一个页面。

Collections

让我们看看怎么充实一下作者，这样每个作者都有自己的页面，上面有简介和他们发布的文章。

为此，您将使用 collections 。Collections 与 posts 相似，只是内容不必按日期分组。

配置

要设置 collection ，您需要告诉Jekyll。Jekyll 的配置发生在一个名为 _config.yml 的文件中（默认情况下）。

使用以下内容在根目录中创建 _config.yml ：

collections:
  authors:

要（重新）加载配置，请重新启动 jekyll 服务器。在终端中按 Ctrl+C 来停止服务器，然后 jekyll serve 重新启动服务器。

添加作者

文档（collection 中的项目）位于站点根目录中名为 _*collection_name* 的文件夹中。在这种情况下，为 _authors 。

为每个作者创建一个文档：

_authors/jill.md:

---
short_name: jill
name: Jill Smith
position: Chief Editor
---
Jill is an avid fruit grower based in the south of France.

_authors/ted.md:

---
short_name: ted
name: Ted Doe
position: Writer
---
Ted has been eating fruit since he was baby.

Staff page

让我们添加一个页面，列出网站上的所有作者。Jekyll 在 site.authors 上提供此 collection 。

创建 staff.html 并在 site.authors 上迭代以输出所有 staff ：

---
layout: default
title: Staff
---
<h1>Staff</h1>

<ul>
  {% for author in site.authors %}
    <li>
      <h2>{{ author.name }}</h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

由于内容是 markdown ，您需要通过 markdownify filter 来运行它。在 layout 中使用 {{ content }} 进行输出时，会自动发生这种情况。

您还需要一种通过主导航来导航到此页面的方法。打开 _data/navigation.yml 并为 staff 页面添加一个条目：

- name: Home
  link: /
- name: About
  link: /about.html
- name: Blog
  link: /blog.html
- name: Staff
  link: /staff.html

输出一个页面

默认情况下，collections 不会为文档输出页面。在这种情况下，我们希望每个作者都有自己的页面，所以让我们调整 collection 配置。

打开 _config.yml 并将 output: true 添加到作者 collection 配置中：

collections:
  authors:
    output: true

再次重新启动 jekyll 服务器，使配置更改生效。

您可以使用 author.url 链接到输出页面。

将链接添加到 staff.html 页面：

---
layout: default
title: Staff
---
<h1>Staff</h1>

<ul>
  {% for author in site.authors %}
    <li>
      <h2><a href="{{ author.url }}">{{ author.name }}</a></h2>
      <h3>{{ author.position }}</h3>
      <p>{{ author.content | markdownify }}</p>
    </li>
  {% endfor %}
</ul>

就像 posts 一样，你需要为作者创建一个 layout 。

使用以下内容创建 _layouts/author.html ：

---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

Front matter defaults

现在，您需要将作者文档配置为使用 author layout 。你可以像我们以前一样在 front matter 上这样做，但这越来越重复了。

你真正想要的是所有的 posts 都自动有 post layout ，authors 有 author layout ，其他一切都使用默认设置。

您可以通过在 _config.yml 中使用 front matter defaults 来实现这一点。您可以设置默认值适用的范围，然后设置您想要的默认 front matter 。

将 layouts 的默认值添加到 _config.yml 中，

collections:
  authors:
    output: true

defaults:
  - scope:
      path: ""
      type: "authors"
    values:
      layout: "author"
  - scope:
      path: ""
      type: "posts"
    values:
      layout: "post"
  - scope:
      path: ""
    values:
      layout: "default"

现在，您可以从所有页面和文章的 front matter 中删除 layout 。请注意，任何时候更新 _config.yml ，都需要重新启动 Jekyll 才能使更改生效。

列出作者的文章

让我们列出一位作者在他们的页面上发表的文章。要做到这一点，您需要将作者的 short_name 与文章的 author 相匹配。您可以使用此功能按作者筛选文章。

在 _layouts/author.html 中遍历这个筛选后的列表，以输出作者的文章：

---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>

{{ content }}

<h2>Posts</h2>
<ul>
  {% assign filtered_posts = site.posts | where: 'author', page.short_name %}
  {% for post in filtered_posts %}
    <li><a href="{{ post.url }}">{{ post.title }}</a></li>
  {% endfor %}
</ul>

链接到作者页面

这些文章引用了作者，所以让我们将其链接到作者的页面。您可以在 _layouts/post.html 中使用类似的筛选技术来完成此操作：

---
layout: default
---
<h1>{{ page.title }}</h1>

<p>
  {{ page.date | date_to_string }}
  {% assign author = site.authors | where: 'short_name', page.author | first %}
  {% if author %}
    - <a href="{{ author.url }}">{{ author.name }}</a>
  {% endif %}
</p>

{{ content }}

打开 http://localhost:4000 并查看 staff 页面和文章上的作者链接，以检查所有内容是否正确链接在一起。

在本教程的下一步也是最后一步中，我们将对站点进行润色，并为生产部署做好准备。

Deployment

在最后一步中，我们将为站点的生产环境做好准备。

Gemfile

给您的网站添加一个 Gemfile ，这是一个很好的做法。这确保了 Jekyll 和其他 gems 的版本在不同的环境中保持一致。

在根目录中创建一个 Gemfile 。该文件应称为 ‘Gemfile’ ，并且不应具有任何扩展名。您可以使用 Bundler 创建一个 Gemfile ，然后添加 jekyll gem ：

bundle init
bundle add jekyll

您的文件应该如下所示：

# frozen_string_literal: true
source "https://rubygems.org"

gem "jekyll"

Bundler 安装 gems 并创建一个 Gemfile.lock ，用于锁定当前的 gem 版本，以便将来执行 bundle install 。如果你想更新你的 gem 版本，你可以运行 bundle update 。

当使用 Gemfile 时，您将运行像 jekyll serve 这样的命令，并以 bundle exec 为前缀。因此，完整的命令是：

bundle exec jekyll serve

这限制了您的 Ruby 环境，只能使用 Gemfile 中设置的 gem 。

插件

Jekyll 插件允许您创建特定于您的网站的自定义生成内容。有很多 plugins 可用，或者你甚至可以自己编写。

有三个官方插件在几乎任何Jekyll网站上都很有用：

要使用这些，首先您需要将它们添加到您的 Gemfile 中。如果你把它们放在一个 jekyll_plugins 组中，它们将自动成为 jekyll 的要求项：

source 'https://rubygems.org'

gem '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

现在通过 bundle update 来安装它们。

jekyll-sitemap 不需要任何设置，它会在构建时创建您的 sitemap 。

对于 jekyll-feed 和 jekyll-seo-tag ，您需要将 tags 添加到 _layouts/default.html ：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="/assets/css/styles.css">
    {% feed_meta %}
    {% seo %}
  </head>
  <body>
    {% include navigation.html %}
    {{ content }}
  </body>
</html>

重新启动 Jekyll 服务器，并检查这些 tags 是否已添加到 ＜head＞ 中。

环境变量

有时你可能想在生产环境中输出一些东西，但不想在开发环境中输出。分析脚本就是最常见的例子。

要做到这一点，您可以使用 environments 。您可以在运行命令时使用 JEKYLL_ENV 环境变量来设置环境变量。例如：

JEKYLL_ENV=production bundle exec jekyll build

默认情况下，JEKYLL_ENV 是用于开发环境的。使用 jekyll.environment 可以让您在 liquid 中使用 JEKYLL_ENV 。因此，要仅在生产环境中输出分析脚本，您需要执行以下操作：

{% if jekyll.environment == "production" %}
  <script src="my-analytics-script.js"></script>
{% endif %}

Deployment

最后一步是将站点放到生产服务器上。要做到这一点，最基本的方法是运行生产环境构建：

JEKYLL_ENV=production bundle exec jekyll build

然后将 _site 的内容复制到服务器上。

生成站点时目标文件夹将被清除

默认情况下，在生成网站时，会自动清除 _site 的内容。非网站构建过程中创建的文件或文件夹将被删除。

通过在 keep_files 配置指令中指定某些文件，可以保留这些文件。通过将其他文件保存在 assets 目录中，也可以保留这些文件。

一个更好的方法是使用 CI 或 3rd party 。

总结

这就到我们这个分步教程的结尾啦，但却是你 Jekyll 之旅的开始！

汉瑜
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jekyll中文文档
weixin_45304927的博客
02-13 526
jekyll中文网： https://jekyll.zcopy.site jekyll中文文档：https://jekyll.zcopy.site/docs/
Jekyll中文文档__Configuration
易得者易失
04-04 273
Jekyll中文文档，Jekyll中所有的配置，Jekyll配置教程
jekyll 中文报错问题
sunxboy的专栏
01-01 256
在网上看到解决方法 在ruby目录下找到文件：convertible.rb 然后将 self.content = File.read(File.join(base, name))  改为 self.content = File.read(File.join(base, name),:encoding=&gt;"utf-8")   可以我的文件中是这样写的： self.conten...
jekyll中文文档__Quickstart
易得者易失
04-01 172
Jekyll中文文档，Jekyll快速使用指南, Jekyll快速入门
给github pages的本地Jekyll服务器设置中文UTF-8
sunxboy的专栏
06-08 548
本地启用Jekyll服务器时，会因字符错误，提示“invalid byte sequence in GBK”。此问题是因字符编码错误引起的，修改方法如下：找到： C:\RailsInstaller\Ruby1.9.3\lib\ruby\gems\1.9.1\gems\jekyll-1.4.2\lib\jekyll\convertible.rb 在第38行左右，取消掉原有的两句...
jekyll_blog_demo:Jekyll博客演示项目
05-28
**Jekyll博客演示项目详解** Jekyll是一款静态网站生成器，尤其适合个人博客的搭建。它基于Ruby语言，能够将Markdown格式的内容转换成静态HTML页面，这样不仅减轻了服务器负担，也使得博客的维护变得更加简单。...
jekyll_blog_source:jekyll配置源代码
03-23
**Jekyll博客源码解析** Jekyll是一款静态网站生成器，尤其适合个人博客的搭建。它基于Ruby语言，能够将Markdown、Textile等格式的文本转换成静态HTML页面，简化了博客的创建与维护过程。在"jekyll_blog_source:...
jekyll_frontmatter_tests：一个Jekyll插件，用于测试Jekyll站点中帖子和其他文档的前题
02-04
可以在Jekyll网站上添加测试的工具，以确保您始终在帖子或其他收集文档中包括必填字段。 建立 现在，在jekyll站点的根目录的deploy/tests/schema中创建一个目录。 该命令应该可以解决问题： mkdir -p deploy/tests/...
jekyll_site_template：Jekyll的示例站点
02-18
jekyll_site_template 跑步 # Install Ruby Gems bundler install # Run Jekyll Site bundler exec jekyll serve
jekyll-pdf_generator:在Jekyll中生成PDF的宝石
03-31
Jekyll :: PdfGenerator 欢迎使用您的新宝石！ 在此目录中，您将找到能够将Ruby库打包为gem所需的文件。 将您的Ruby代码放在文件lib/jekyll/pdf_generator 。 要试验该代码，请运行bin/console进行交互式提示。 待...
jekyllthemes：Jekyll博客的最佳外观主题目录
02-20
吉柯主题 Jekyll博客的最佳外观主题目录 提交主题 您有想要分享的主题吗？ 在GitHub上分叉网站 在_posts目录中创建一个新帖子，并填写相关的YAML字段 制作250x200的缩略图，并将其拖放到缩略图目录中。 在帖子的markdown文件中列出其文件名。 测试一下，然后向上推送您的更改并打开拉取请求。 执照 该存储库的内容已根据获得
jekyll 官网文档部分翻译
热门推荐
前端疯
10-27 1万+
最近想搭建一个网站：Mar先把文档看了。
jekyll 完整安装教程
Joel的博客
11-27 6178
我的操作环境阿里云 CentOS主机:LSB Version: :core-4.1-amd64:core-4.1-noarch Distributor ID: CentOS Description: CentOS Linux release 7.4.1708 (Core) Release: 7.4.1708 Codename: Core1. 安装ruby(同时会自动安装gem
jekyll是什么_我的Jekyll网站是什么版本？
dlz00001的博客
07-10 151
几年前，我写了一篇关于如何检查一个人已部署的应用程序版本的文章 。 Spring Boot等最新技术使其变得更加容易。 对于常规应用程序和静态站点（如Jekyll）一样重要。 我想让这个博客以某种方式让我使用Git数据来确保它已被部署。 当我从master而不是标签发布时，我想要的数据是提交哈希。 获取提交哈希 我搜索了现有的Jekyll插件，并找到了Jekyll版本插件。 安...
win7下的jekyll安装
lanyizheng blog
03-27 819
jekyll是一种生成静态网页的工具，这里只介绍在win7环境下的安装过程，而不具体介绍其原理。 jekyll官网上有标准的安装说明：jekyll安装官方说明 其安装主要分以下几个步骤： 1.Ruby的安装 1）ruby官网下载地址（最好下载2.0以上的版本，主要选择对应的自己的系统，32bit或者64bit） 2）直接点击图标，安装在你指定的目录下，目录中
Jekyll使用教程笔记 一
weixin_34236869的博客
06-21 2750
目录 《Jekyll使用教程笔记 一：简介、快速开始、基本用法、目录结构》 《Jekyll使用教程笔记 二：配置》 《Jekyll使用教程笔记 三：Front Matter、写文章》 《Jekyll使用教程笔记 四：创建页面、静态文件、变量》 《Jekyll使用教程笔记 五：合集、数据文件》 《Jekyll使用教程笔记 六：资源、博客迁移、模版》 简介 Jekyll是一个简单的，博客感知的...
Jekyll 安装
Zemo 学习笔记
12-25 1682
0x0 简介Jekyll是一个简单的博客形态的静态站点生产机器。它有一个模版目录，其中包含原始文本格式的文档，通过一个转换器（如 Markdown）和自带的 Liquid 渲染器转化成一个完整的可发布的静态网站，你可以发布在任何你喜爱的服务器上。Jekyll 也可以运行在 GitHub Page 上，也就是说，你可以使用 GitHub 的服务来搭建你的项目页面、博客或者网站，而且是完全免费的。0x1
Jekyll中文文档__Command Line Usage
易得者易失
04-03 116
Jekyll中文文档，Jekyll命令行使用方法
jekyll serve
最新发布
02-15
Jekyll是一个静态网站生成器，它可以将纯文本文件转换为静态网站。jekyll serve是Jekyll提供的一个命令，用于在本地启动一个开发服务器，以便预览和调试生成的静态网站。 当你在终端中运行jekyll serve命令时，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值