Zola教程：如何使用基于Rust的静态网站生成器Zola来创建你的下一个小型项目，并将其部署到Netlify上。
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
（图片来自 Unsplash 用户 June Wong）
演示：https://hello-zola.netlify.app/
仓库地址：https://github.com/davidedelpapa/zola-helloworld
Zola（由 Vincent Prouillet 开发）是一个静态网站生成器，就像 Hugo 或 Gatsby 一样。
它是用 Rust 编写的，并且使用了Tera模板引擎（也是同一作者开发的）。
特点、优点和缺点
- 这是一个静态网站生成器：这类生成器本身就存在一些优点和缺点，其中包括：
| 专业版 | 康 |
|---|---|
快速：网站生成后，实际上就是一堆html文件css。 |
最低限度：许多高级/响应式功能都被简化了：我们只有静态页面。 |
| 更少的底层架构：所有数据库调用、优化等操作都在生成时完成：底层架构无需驻留在服务器上，而只需在生成网站时启用。服务器仅存储静态的最终文件。 | 磁盘空间确实越来越便宜，但将大型公司网站转换为静态网站会占用大量空间，因为静态页面php可以通过连接到数据库的应用程序按需生成，并且可以进行自定义设置。 |
Zola 特有的功能：
- 极简：只需专注于内容创作。
- 增强型 Markdown：Zola 提供了一套扩展的短代码和内部链接，以改进原始 Markdown。
- 易于使用：仅需一个命令行界面，无需任何其他依赖项。
我们至少应该尝试一下。
从 GitHub Releases 安装
我们可以使用多种方法来安装 Zola。
最快的方法是从https://github.com/getzola/zola/releases获取可执行文件。
我们需要将其解压缩并移动到我们系统可以访问的文件夹中$PATH，例如：~/.local/bin
mv zola ~/.local/bin/zola
从源文件安装
我们可以从源代码安装它。虽然这不是推荐的方法，但如果你想这样做，方法如下。
依赖关系
不过，首先我们需要检查依赖关系。
- libsass。我的是从标准软件仓库（适用于 Debian/Ubuntu）获取的。
sudo apt get install libsass-dev
克隆和构建
克隆git 仓库并cargo build --release。
git clone https://github.com/getzola/zola.git
cd zola
cargo build --release
这是一个非常标准的 Rust 箱子，按照惯例，构建过程可能需要一段时间：最后我收到了一条消息，内容是Finished release [optimized] target(s) in 43m 50s：
现在它位于./target/release/目录下。我们需要将其移动到我们系统可访问的文件夹中$PATH：
mv ./target/release/zola ~/.local/bin/zola
例如，它可以是：~/.local/bin
还要记住：构建过程也可能占用一些空间（我的占用了 1.5 GB），当然不是最终文件，但cargo clean复制文件后请记住这一点。
检查安装情况
检查它是否正常工作：
zola --help
帮助屏幕：
zola 0.11.0
Vincent Prouillet <hello@vincentprouillet.com>
A fast static site generator with everything built-in
USAGE:
zola [OPTIONS] <SUBCOMMAND>
FLAGS:
-h, --help Prints help information
-V, --version Prints version information
OPTIONS:
-c, --config <config> Path to a config file other than config.toml in the root of project
-r, --root <root> Directory to use as root of project [default: .]
SUBCOMMANDS:
build Deletes the output directory if there is one and builds the site
check Try building the project without rendering it. Checks links
help Prints this message or the help of the given subcommand(s)
init Create a new Zola project
serve Serve the site. Rebuild and reload on change automatically
Zola HelloWorld
我们将首先创建并启动一个新项目
zola init zola-helloworld
它会问我们一些问题。别担心，你config.toml之后随时可以修改文件。
> What is the URL of your site? (https://example.com):
> Do you want to enable Sass compilation? [Y/n]:
> Do you want to enable syntax highlighting? [y/N]:
> Do you want to build a search index of the content? [y/N]:
第一次运行时只需按回车键，即可使用默认值：我们稍后可以在配置文件中更改它们config.toml。
我们移到新文件夹
cd zola-helloworld
我们看到的是这样的结构。
helloworld
├── content/
├── sass/
├── static/
├── templates/
├── themes/
└── config.toml
我们有 5 个空文件夹，以及一个config.toml文件。
让我们来看看它的内容：
# The URL the site will be built for
base_url = "https://example.com"
# Whether to automatically compile all Sass files in the sass directory
compile_sass = true
# Whether to do syntax highlighting
# Theme can be customised by setting the `highlight_theme` variable to a theme supported by Zola
highlight_code = false
# Whether to build a search index to be used later on by a JavaScript library
build_search_index = false
[extra]
# Put all your custom variables here
所有选项都已保存。您可以想象，我们可以随时更改它们。
让我们在不加载任何文件的情况下冷启动测试服务器：
zola serve
Zola 默认运行在端口1111：http://localhost:1111/。将浏览器指向该端口，我们将看到一条默认Welcome to Zola!消息。
我们可以保持服务器运行，因为当我们添加文件时，Zola 会自动重建内容并将其热加载到浏览器中。很方便，对吧？
添加模板和页面
我们需要模板（告诉 Zola 引擎如何渲染内容）和页面（包含实际内容）。
第一个模板：templates/base.html
在templates/文件夹中，我们将添加一个base.html 文件，供所有其他模板和页面使用。
<!DOCTYPE HTML>
<html>
<head>
<title>{{ page.title }}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
{{ page.content }}
</body>
</html>
所有html标签都是常见的，但其中有两个部分{{ }}
看起来完全不像html标签：它们是指令，与jinja2或liquidtera非常相似。
- 第一条指令
{{ page.title }}用于渲染页面标题。 - 第二条指令
{{ page.content }}用于渲染页面内容。我们添加了safe过滤器以正确渲染html生成的页面内容，否则内容将作为html源文件渲染！
第一页：content/index.md
我们需要添加一个页面来使用该模板。
我们将在content/目录下创建一个页面。
添加文件后，Zola 会报错并导致构建失败：
-> Content changed .../zola-helloworld/content/index.md
Failed to build the site
Error: Couldn't find front matter in `.../zola-helloworld/content/index.md`. Did you forget to add `+++`?
这是因为我们没有添加标题部分；让我们来解决这个问题。
打开index.md页面并添加以下内容
+++
title = "First Zola page"
template = "base.html"
+++
# Hello world!
My first zola page.
如您所见，中间部分+++是一个yaml节，其中包含变量。
title将用于渲染page.title我们在模板中放入的内容base.html。template指示要使用哪个模板。- 该
+++部分之后是实际的页面内容，这些内容将存储在page.content
是时候看看最终效果了！
现在如果我们打开浏览器……什么都没有！即使刷新页面……也毫无反应！
那是因为我们的页面不在首页，而是在/content!
将浏览器地址栏固定到：http://127.0.0.1:1111/content/，你应该就能看到这个页面了。
极好的！
不！我仿佛听到你们在尖叫：“这不是我们预想的方式！”（或者更糟糕的尖叫，我知道）。
实际上，Zola 认为首页应该比博客页面更吸引人，因此可能需要更多代码。这就是为什么为了index.html在通常的位置（服务器根目录）拥有一个合适的首页，我们需要在服务器根目录下的文件夹index.html中放置一个真正的首页文件。templates/
index.html但在向文件夹内添加之前templates/，让我们修改一下base.html，以便我们index.html也可以将其用作我们自己的基础。
模板继承
我们首先需要修改base.html以允许继承。
templates/base.html
在Tera中，继承主要通过替换代码块来实现。
<!DOCTYPE HTML>
<html>
<head>
<title>{% block title %}{% endblock title %}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
</head>
<body>
{% block content %}{% endblock content %}
</body>
</html>
现在，我们不再像以前那样渲染两个页面变量（{{ page.title }}
例如，通过这种方式），而是使用块，这些块被定义为：{% block <name> %}{% endblock <name> %}
区别在于：
-{{ }}
表示必须渲染的变量，类似于println!()Rust、echo ...bash 或print()Python 中的 a。
{% %}是用于命令的。在这种情况下，我们定义了一个block可以被继承页面替换的元素。
让我们看看它是如何运作的，index.html最终我们会将它添加到template/文件夹中：
templates/index.html
将页面添加index.html到template/文件夹后，Zola 会像往常一样重建网站，不会报错；但是如果我们访问首页，http://127.0.0.1:1111/将不再看到欢迎信息，而是一个空白页面。看来它运行正常……
让我们填充页面内容
{% extends "base.html" %}
{% block title %}Welcome to Zola{% endblock title %}
{% block content %}
<h1>Hello Zola!</h1>
{% endblock content %}
第一条指令说明此模板继承自哪些模板（即它从中继承的父模板）。
之后，每个{% block %}指令都会替换父指令块内的内容。
在这种情况下，父节点的块是空的，但它可以有自己的内容，子节点无论如何都会替换这些内容。
因此：
{% block title %}Welcome to Zola{% endblock title %}将替换{% block title %}{% endblock title %}内部base.html。- 同样地，
{% block content %}<h1>Hello Zola!</h1>{% endblock content %}将替换{% block content %}{% endblock content %}内部base.html。
现在可以保存并再次检查浏览器了（Zola 支持热重载，所以如果服务器保持运行，你应该已经看到更改，否则请运行zola serve）。
现在可以了。
开始写博客吧！
现在，如果我们打开浏览器访问该页面，http://127.0.0.1:1111/content/会发现页面无法正常显示。这是因为我们修改了base.html模板，现在模板中不再有“可渲染”变量，而只有代码块。
我们将看看如何恢复它，以及如何以此为基础创建一个基本的博客网站。
templates/blog-page.html
让我们为博客页面创建一个超级简单的模板。
{% extends "base.html" %}
{% block title %}{{ page.title }}{% endblock title %}
{% block content %}
{{ page.content | safe }}
{% endblock content %}
如您所见，现在我们直接把要渲染的变量放在了代码块里面！非常简单。
content/index.md
让我们修改index.md文件，使用这个新模板：
+++
title = "First Zola page"
template = "blog-page.html"
+++
# Hello world!
My first zola page.
只需将页面更改template为与我们的新模板匹配，我们就恢复了页面http://127.0.0.1:1111/content/！
然而，该页面位置并不“正确”。也就是说，Zola 可以像图中所示那样使用它，但通常情况下，content/文件夹内应该包含所有需要渲染的页面和章节。
那么，让我们整理一下网站吧。
内容/博客/
在内部，content/我们创造了一个blog/folder
在里面，我们把以前的东西搬进去content/index.md，然后把它重新命名为first-post.md
content/文件夹的内容
content
└── blog
└── first-post.md
现在我们的页面位于http://127.0.0.1:1111/blog/first-post/
如您所见，没有提及content：这是因为在正常情况下（即没有index.md），该content/文件夹用于组织我们网站中的各个部分，以便其中的文件夹直接注入到网站路径中。
现在如果你尝试使用http://127.0.0.1:1111/content/blog/first-post/ 它，它将无法正常工作！
content/blog/_index.md
如果我们想在某个部分内设置索引，例如在 `<section>` 处http://127.0.0.1:1111/blog/，我们将使用一个特殊的文件_index.md：
+++
title = "List of blog posts"
sort_by = "date"
template = "blog.html"
page_template = "blog-page.html"
+++
如您所见，Zola 会报错，因为模板（目前）尚不存在。
-> Content changed .../zola-helloworld/content/blog/_index.md
Failed to build the site
Error: Failed to render section '.../zola-helloworld/content/blog/_index.md'
Reason: Tried to render `blog.html` but the template wasn't found
这是因为在我们的代码中，content/blog/-index.md我们设置了一个template = "blog.html"不存在的变量，而实际上"blog-page.html"，我们将其设置为一个新变量page_template。
我们还添加了一个新的变量，sort_by它告诉 Zola 引擎如何对博客文章进行排序……
templates/blog.html
让我们创建一个尚不存在的模板，blog.html
{% extends "base.html" %}
{% block title %}My Blog{% endblock title %}
{% block content %}
<h1>{{ section.title }} </h1>
<ul>
{% for page in section.pages %}
<li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
{% endfor %}
</ul>
{% endblock content %}
如您所见，我们渲染了标题和内容块。
在内部，{% block content %}
我们添加了一个，{{ section.title }}它的作用与相同，只是它在每个部分的page.title中设置。_index.md
请注意，如果需要，该文件中的每个变量在该部分的每个页面中也可用。
接下来我们来看一个{% for %}命令。这个命令用于遍历一个项目集合，在本例中，该section.pages集合包含该部分内的所有页面，但不包括 `<section>` 标签_index.md。它会逐个获取这些项目，并将它们赋值给一个page临时变量，其形式类似于 Rustfor命令。
该permalink变量保存页面渲染后的链接，因此我们将其用于标签href中的`<link>` 标签<a>，同时将链接的内容设置为页面标题。page.title
我们只需要在帖子页面中更改一个地方即可使其正常工作，即添加一个date变量来对帖子进行排序。
内容/博客/第一篇博文.md
这是我们最终的内容。first-post.md
+++
title = "First Zola blog post"
date = 2020-06-29
+++
# Hello world!
My first zola Blog Page.
我们删除了template = "blog-page.html"不需要的部分；实际上，我们使用page_template内部的变量为每个页面设置了模板_index.md。
我们插入了该date变量。
此时界面http://127.0.0.1:1111/blog/将如下所示：
您可以通过链接访问我们的帖子。
content/blog/second-post.md
此时，我们可以轻松地添加另一个页面，只需用 Markdown 编写其内容，然后添加 front mattertitle并date设置即可：
+++
title = "Second Zola blog post"
date = 2020-06-30
+++
# Hello world!
My Second zola blog post.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.
页面已成功添加。
一些不错的改进
我们可以修改链接，index.html使其指向博客部分。但首先，我想改进一下样式，相信大家会很感激。
templates/base.html
我们在以下位置添加了一个小型 CSS 库<head>：
<head>
<title>{% block title %}{% endblock title %}</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
<style>
.center {
margin: 0 auto;
}
nav {
position: absolute;
}
main {
padding-top: 3em;
}
</style>
</head>
我们添加了一个很棒的小型 CSS 库，Picnic CSS，来自jsdeliver.net CDN。
我们还添加了一些自定义样式来居中内容、处理导航栏和主要内容
。现在我们可以在页面中使用它了。
我们首先在base.html所有页面中都添加导航栏，并使用相同的flex网格系统：
<body>
<nav class="demo">
<a href="/" class="brand">
<span>My Site</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">☰</label>
<div class="menu">
<a href="/blog" class="pseudo button icon-picture">Blog</a>
</div>
</nav>
<main class="flex five">
{% block content %}{% endblock content %}
</main>
</body>
我们的<nav>响应式设计，并链接到该blog/部分。
我们给出一个最多五列的网格（我们最多可以使用五列twelve）。
我们将依次更改我们网站中的所有页面templates/：
templates/index.html
{% extends "base.html" %}
{% block title %}Welcome to Zola{% endblock title %}
{% block content %}
<article class="four-fifth center">
<h1>Hello Zola!</h1>
Visit my <a href="/blog">Blog section</a>!
</article>
{% endblock content %}
我们增加了一个占我们设定<article>面积 4/5 的部分。flexbase.html
我们还添加了指向博客部分的链接。
templates/blog.html
在博客中，我们将用野餐活动cards来代替html无序列表：
{% extends "base.html" %}
{% block title %}My Blog{% endblock title %}
{% block content %}
<article class="four-fifth center">
<h1>{{ section.title }} </h1>
{% for page in section.pages %}
<article class="card">
<header>
<h3>{{ page.title }}</h3>
</header>
<div align="right">Published on: {{ page.date | date(format="%d/%m/%Y") }} </div>
<section class="center">{{ page.summary | safe }}</section>
<footer>
<a href="{{ page.permalink | safe }}#continue-reading" class= "button">Read More</a>
</footer>
</article>
{% endfor %}
</article>
{% endblock content %}
这里还有两个变量：
page.date我们直接在这里访问它，并使用 Tera 的date()过滤器。详情请参阅Tera 文档。page.summary要使用它，我们需要<!-- more -->在页面内容中添加一个元素。元素上方的内容会放入page.summary变量中。此外，Zola 会在元素后创建一个带有 id 的锚点continue-reading，这样就可以href="{{ page.permalink | safe }}#continue-reading"直接链接到继续阅读的位置。非常方便。
templates/blog-page.html
最后要修改的模板blog-page.html将如下所示：
{% extends "base.html" %}
{% block title %}{{ page.title }}{% endblock title %}
{% block content %}
<article class="four-fifth center">
{{ page.content | safe }}
</article>
{% endblock content %}
就是这样！
只用了几行代码，我们就大大改善了博客的外观和感觉。
部署
完成造型、调音或博客创作后，就该向世界展示它了！
静态网站可以轻松部署在任何地方。
Zola 可以构建网站zola build。它会在文件夹内创建网站public/。
然后我们可以将其复制到任何地方。
不过，这里我将展示如何直接在Netlify上部署。
首先，您需要注册一个 Netlify 账户（如果您还没有的话）。在注册页面，您可以使用各种 Git 仓库（GitHub、GitLab、Bitbucket）进行身份验证。
我选择了 GitHub，我会将网站保存为 GitHub 代码库。
首先：
git init
在我们的代码库根目录下。然后我们在 GitHub 账户中创建一个新的代码库。我把它命名zola-helloworld为 zola 项目。
我们将添加一条.gitignore指令，指示 Git 忽略该public/文件夹
public/
netlify.toml我们还需要添加一个文件，以便部署到 Netlify：
[build]
publish = "public"
command = "zola build"
[build.environment]
# Set the version name that you want to use and Netlify will automatically use it.
ZOLA_VERSION = "0.9.0"
现在我们可以添加remote并提交当前项目。在 shell 中：
git remote add origin https://github.com/davidedelpapa/zola-helloworld.git
git push -u origin master
完成后，我们只需要在 Netlify 中添加一个新站点，并选择它GitHub作为存储库，然后将我们新创建的存储库作为目标存储库。
完成后，我们的网站就上线了。
你可以访问https://hello-zola.netlify.app/查看我的应用。
结论
我们刚才看到的只是Zola最基本的功能。
正如我们所见，它确实是一个功能强大的静态网站生成器，非常适合小型/个人网站。
希望你喜欢。
文章来源：https://dev.to/davidedelpapa/zola-tutorial-how-to-use-zola-the-rust-based-static-site-generator-for-your-next-small-project-and-deploy-it-on-netlify-375n