Cleaver - 使用 Laravel Blade 的超快静态站点生成器

tl;dr: github.com/aschmelyun/cleaver了解更多信息

我知道你可能在想：“天哪，又一个静态网站生成器”。你说得对，但我希望我创建的这个和你之前见过的那些有点不同。

我设计 Cleaver 时并没有试图为不同的人提供多种功能，也没有试图对每个人都尽可能友好，而是尽可能地对开发人员开放。

从本质上讲，这是一个非常简单的应用程序，其核心代码只有 700 多行。

它是从哪里来的？

Cleaver 的诞生源于我自己的难题，旨在帮助我快速构建数据驱动的落地页。市面上其他 SSG 的问题是，你通常会被 Markdown（也就是生成器编写的语言）卡住。对于博客或任何内容丰富的网站来说，这不会是什么问题，但我在尝试构建文档网站和在线规格表时遇到了问题。

我非常希望能够用 JSON 构建一个网站，就像我从 API 返回数据一样。所以，我创建了这个网站！

Cleaver 获取本地保存的 JSON 文件，并使用你提供的键将其中的数据直接解析为 PHP 变量。解析后的数据将传递给 Laravel 的 Blade 模板引擎，该引擎会将所有内容编译为静态 HTML 文件，并保存在你设置的目录树中。

例如，您的 JSON 如下所示：

{
    "view": "layouts.default",
    "path": "/posts/a-whole-new-world",
    "title": "A Whole New World",
    "description": "Shining, shimmering, splendid.",
    "items": [
        "Three Forks",
        "Seven Spoons",
        "One Butter Knife"
    ]
}

转换为以下 PHP 变量：

$view 
"layouts.default"

$path
"/posts/a-whole-new-world"

$title
"A Whole New World"

$description
"Shining, shimmering, splendid."

$items
array("Three Forks", "Seven Spoons", "One Butter Knife")

这些内容会被传递到你选择的 Blade 模板（在本例中，位于resources 目录中的views/layouts/default.blade.php）。之后，你就可以像在 Laravel 应用程序中一样使用它们了：

<h1>{{ $title }}</h1>
<h4>{{ $description }}</h4>
<ul>
    @foreach($items as $item)
        <li>{{ $item }}</li>
    @endforeach
</ul>

通过简单的脚本编译网站后，它会在目录下的posts/a-whole-new-world/index.htmlnpm run dev输出渲染后的静态 HTML 文件。/dist

您可以在此处包含usecleaver.com登录页面的存储库中看到更好的示例。

入门

您需要确保您的机器上安装了以下软件：

• PHP
• 作曲家
• 节点
• 新公共管理

开始创建 Cleaver 站点的最简单方法是运行以下命令：

composer create-project aschmelyun/cleaver your-site-name

这将从仓库下载最新版本的 Cleaver ，安装所需的软件包，并将所有内容转储到名为 的文件夹中your-site-name。当然，请根据您实际想要的站点目录进行更改。

在终端中导航到新创建的文件夹，然后运行以下命令来安装所需的节点包并首次编译您的站点：

npm install && npm run dev

大约几分钟后，您的网站应该已经成功构建，其中包含演示内容（usecleaver.com/docs页面的精简版）并添加到/dist项目根目录中的文件夹中。

让我们继续创建新页面。

创建和构建页面

用于构建网站的所有内容都位于此resources/content目录中。您可以在此处添加 JSON 和 Markdown 文件，并以您认为合适的任何方式进行组织和命名。与许多其他静态网站生成器不同，内容目录的结构不会影响构建网站的结构。

在每个内容文件中，为了确保页面编译成功，必须设置两个键。它们是view和path。让我们看看它们分别起什么作用，以及它们为什么重要：

• view是页面编译时所依据的 Blade 模板。您可以在指定的文件中使用并包含其他 Blade 模板，但该模板是页面编译时所依据的。
• path是 Cleaver 运行后，此页面最终在您的dist目录中的位置。例如，如果您有一个名为 myblog.com 的网站，并且希望此页面位于 myblog.com/posts/a-cool-post，则您的 path 值应该是/posts/a-cool-post。

如前所述，Cleaver 既接受 JSON 文件，也接受 Markdown 文件。以下是类似页面的示例：

两者之间最大的区别在于如何在 Blade 模板中访问数据。

对于 JSON 内容文件，每个键都用作单独的变量。因此，在上面的示例中，您将引用单个$title字符串和一个$paragraphs字符串数组。

但是，使用 Markdown 时，最后三个破折号以下的所有内容都会作为单个$content变量注入。如果使用这种方式，Blade 的非转义 echo 快捷方式{!! $content !!}将渲染出从 Markdown 文件编译出来的正确 HTML 标签。

修改资产

Cleaver 使用 Sass 文件进行样式设置，并自动加载Tailwind CSS 实用程序库。您可以在该目录下添加自己的样式，或覆盖当前配置的样式resources/assets/sass。默认情况下，其中有一个名为 的文件，app.scss它仅用于导入 Tailwind 库，但您可以根据需要随意导入自己的 Sass 文件或添加或删除自定义类。

导航到resources/assets/js目录，您将看到一个名为 的 JavaScript 文件app.js。与样式一样，Cleaver 在这里采用了非常简单的方法。该文件的作用是导入 lodash、jQuery 和 Vue，从而为您的网站提供一个现代化且可扩展的前端功能起点。由于我们通过 Laravel 的 Webpack 包装器Mix引入所有内容，因此您可以在整个 JavaScript 中使用 ES6 语法和 import/require 语句。

构建和部署

要编译您的资产并使用您的内容文件构建静态站点，您只需从项目的根目录运行以下命令之一：

npm run dev 或者 npm run production

两者都会编译所有 CSS/JS 并构建你的网站，但运行生产环境需要最小化和版本化你的资源文件。后者确实需要更长的时间，但如果你要将网站部署到生产环境，建议使用后者。

此外，您可以使用npm run watch它来启动本地网络服务器并监视资产和内容文件的所有更改，并在每次保存更改时重新编译整个站点。

网站构建完成后，完整的标记树和资源文件将保存在dist项目根目录下。您可以直接将此文件上传到 Web 服务器的公共根目录并以此方式提供服务，也可以提交整个项目，并调整 Web 服务器的公共文件夹以指向该dist目录。

注意：如果您想要编译您的网站，但不编译您的资产，您可以直接php cleaver从您的项目根目录运行该命令。

就是这样！

希望你喜欢这篇关于 Cleaver 的（快速？）概述，它是我为了满足自己的需求而构建的静态网站生成器。如果你尝试了一下，有任何疑问、顾虑或功能需求，我很乐意听取！欢迎在GitHub上提交问题，或直接在Twitter上联系我。