teeny

青少年：一个简单的静态站点生成器

配x免责声明：这是我在几个小时内构建的一种工具来生成我的个人博客yakkomajuri.github.io。它现在没有太多，也可能永远不会。

？快速开始

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

有关使用Teeny的项目的示例，请查看我个人博客的存储库。

背景故事

您可以在此博客文章中阅读我在题为“为什么建造自己的静态站点生成器”的博客文章上建立青少年的动力。

支持的命令

在当前目录中初始化一个小项目

teeny init

构建静态HTML文件，并将它们添加到public/

teeny build

启动当地的小型服务器，该服务器会聆听文件更改

teeny develop

？它如何工作

Teeny是一个超级简单的静态站点生成器，旨在适应我的需求和我的需求。

它所做的就是根据HTML模板生成页面和Markdown内容。

它的作用很少，并且被强烈自以为是（阅读：我懒得构建自定义/有条件的处理程序），但允许我构建一个我非常迅速地满意的博客。

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

模板

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

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

页面

Markdown是青少年的一流公民，因此您的所有网站页面均由Markdown文件定义。

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

要指定页面应使用的模板，您可以在页面的前模中指定它，例如：

 ---
template: blog
---

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

示例用法

这是十几岁的工作的例子。

要启动一个小项目，请运行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 develop 。这将创建一个从public/子目录的HTTP服务器到服务器文件。

它会听取更改文件的更改，并随时更新静态文件（天真地，每次检测到更改时都可以重建所有内容）。

？潜在的未来改进

我想尽可能小。我故意将所有代码放在一个文件中，以提醒自己，这应该是我快速构建简单静态博客的简单工具。

但是，它可以使用一些“开发人员体验”升级，例如一种优化的teeny develop方法，而不是天真地重建所有内容，以及一些更好的自定义选择。