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方法，而不是天真地重建所有內容，以及一些更好的自定義選擇。