为什么我构建了自己的静态站点生成器

作者:糖果
发布时间:2024-09-17 03:53:30 (2天前)
来源:https://yakkomajuri.github.io/blog/teeny

背景故事

您当前所在的网站是使用名为Teeny的静态网站生成器构建的。

直到昨天，Teney 都不是一个想法。它根本不存在，甚至在我的脑海中也不存在。

你看，很长一段时间以来，我一直想推出一个个人博客。

我曾经是技术内容的常规作家（不幸的是，这些天我没有太多时间），但我渴望有一个家发布更多未经修饰的个人“意识流”作品。

我喜欢写作，只想有一些东西激励我继续做下去，即使没有人在阅读。

问题是，我患有大多数程序员都非常熟悉的情况：一种为业余项目增加越来越多范围的诀窍，以至于他们被放弃并且永远看不到曙光。

在许多周末，我开始使用所有正确的工具和技术构建博客，编写干净的代码，使其“激发快乐”，然后到周日晚上，手上又多了一个我永远不会再访问的仓库。

所以几周前，我打破了这个循环。我发表了这个：

博客 v1

这是一个用普通 HTML 编写的代码很差的丑陋东西。但它比其他任何东西都要好得多，原因很简单：它上线了。

这是一个很好的开始，但不幸的是，它确实缺少我想要为我的博客做的一件事：用 Markdown 编写的能力。

Markdown 是自切片面包以来最好的东西，所以我的博客可能很烂，但最好能够解析 Markdown。

所以我转向 Jekyll。Jekyll 由 GitHub Pages 原生支持，只需在 GitHub UI 中单击几下即可启动并运行。

这很好，但我失去了我想要稍微自定义页面的灵活性 - GitHub 让你选择一个主题，就是这样。

这是与 GitHub 页面本地集成的结果——如果我自己设置了 Jekyll，我就会拥有我需要的控制权。但我不是 Ruby 工具的忠实粉丝，所以我放弃了这个想法。

因此，我再次求助于我实际上相当熟悉的工具：Gatsby。

Gatsby 很棒，我已经和它合作了很多。

在 PostHog，我们的网站是用 Gatsby 构建的，我在工作时利用了很多 Gatsby 的工具（包括“低级”的东西）来完成工作。

这应该是我的舒适区。

我访问了 Gatsby 网站，选择了一个主题，然后开始工作。马上，问题就很明显了：太多了。

除了 Gatsby 附带的所有额外内容之外，许多 Gatsby 博客主题都试图通过抽象内部结构并公开一个config.js文件来让事情变得“更容易”，您可以在其中添加您的姓名、个人简介、一些链接，而 Gatsby 会执行休息。

但这是有代价的。我在目录中搜索 favicon 文件一段时间后才发现某些插件根据您可以在配置中设置的个人资料照片的路径自动生成它，从而明确了这一成本。

我真的不需要这一切。

因此，回到第一个。

在这个阶段，选项是：花一点时间做一些研究，可能会找到适合我的工具，或者自己构建一个工具来完全满足我的需要，仅此而已。

你已经知道发生了什么。

介绍青少年

Teeny 是一个超级简单的静态站点生成器，专为满足我的需要和我的需要而构建。

它所做的只是基于 HTML 模板和 Markdown 内容生成页面。

它做的很少，而且非常固执（阅读：我懒得构建自定义/条件处理程序），但让我能够以极快的速度构建一个我很满意的博客。

本质上，您只需要考虑两个概念：模板和页面。

模板

模板是纯 HTML，应添加到templates/子目录中。

它们可以包含一个带有 id 的元素page-content，这是 Teeny 添加通过解析 Markdown 内容生成的 HTML 的地方。

页面

Markdown 是 Teeny 中的一等公民，因此您网站的所有页面都由一个 Markdown 文件定义。

但是，该文件不需要任何实际内容，因此如果您希望纯粹在 HTML 中定义页面，您只需要创建一个从页面文件引用的模板。

要指定页面应使用的模板，请在页面文件的第一行添加 HTML 注释，如下所示：

在上面的例子中，Teeny 将寻找一个名为blog.html. 如果未指定模板，Teeny 会在其中查找default.html文件templates/并使用该文件。

下面是一个在工作中的青少年的例子。

旁注： Teeny 是由我在看电影和打篮球比赛之间编写的测试不佳的代码组成的。但是，如果您想尝试一下，可以使用npm i -g teeny-cli或安装它yarn global add teeny-cli。该代码可在此处获得。

要开始一个 Teeny 项目，请运行teeny init. 这将在您的当前目录中创建以下内容：

.
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html
如果你然后运行teeny build，你会得到这个：

.
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html
index.md使用homepage模板，它们一起生成index.html. 作为其他 SSG 的标准，静态文件从public/.

你也会注意到也main.js被转移public/了。Teeny 实际上会从、 和 中获取所有非模板和非页面文件pages/，并将它们复制到，遵循原始目录中的相同结构。templates/static/public/

这样做的原因是我实际上不想进行“魔术”导入，您必须从与实际目录结构不对应的路径导入静态资产。因此，我决定静态文件只想活的内部templates/和pages/必要的。

不过后来我确实屈服于static/目录方法，因为可能有页面和模板都想要使用的资产。从进口static/是“魔法”，这意味着你需要考虑teeny build他们的工作的输出。

Teeny 支持的最后一个命令是teeny develop. 这将创建一个 HTTP 服务器到public/子目录中的服务器文件。

它侦听文件的更改并动态更新静态文件（天真地，每次检测到更改时只需重建所有内容）。

最后的接触

一旦我完成了 Teeny 的构建，我就花了很少的时间来启动和运行这个博客。

我在我的模板上添加了Pico.css，使网站立即看起来好 100 倍（对他们大喊大叫，我喜欢它），并部署一个我刚刚运行的新版本：

teeny build && gh-pages -d public/
这就是全部 - 这就是我在大约半天内整理好这个博客的方式。

1 条回复

动动手指，沙发就是你的了！

登录后才能参与评论