teeny

Teeny：シンプルな静的サイトジェネレーター

ショ和免責事項：これは、個人的なブログyakkomajuri.github.ioを生成するために数時間で構築したツールです。それは今はあまり役に立たず、おそらくこれまでではありません。

？クイックスタート

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

Teenyを使用したプロジェクトの例については、私の個人ブログのレポをチェックしてください。

バックストーリー

このブログ投稿「なぜ独自の静的サイトジェネレーターを構築したのか」というタイトルのこのブログ投稿で、私の動機について読むことができます。

サポートされているコマンド

現在のディレクトリの10代のプロジェクトを初期化します

teeny init

静的HTMLファイルを作成し、 public/

teeny build

ファイルの変更をリッスンするローカルの10代のサーバーを開始します

teeny develop

？それがどのように機能するか

Teenyは、私のニーズとニーズのみに合わせて構築された非常にシンプルな静的サイトジェネレーターです。

それが行うのは、HTMLテンプレートとマークダウンコンテンツに基づいてページを生成することだけです。

それはほとんど行われず、強く意見を述べられています（読む：私はカスタマイズ/条件付きハンドラーを構築するのが面倒でした）が、私が非常に迅速に満足しているブログを作成することを許可しました。

基本的に、テンプレートとページについて考える必要がある2つの概念だけがあります。

テンプレート

テンプレートは単純なHTMLであり、 templates/サブディレクトリに追加する必要があります。

それらは、ID page-contentを持つ要素を含めることができます。これは、マークダウンコンテンツを解析することで生成されたHTMLをTeenyが追加する場所です。

ページ

MarkdownはTeenyの一流の市民であるため、WebサイトのすべてのページはMarkdownファイルで定義されています。

ただし、ファイルには実際のコンテンツは必要ありません。したがって、ページを純粋にHTMLで定義する場合は、ページファイルから参照されるテンプレートを作成するだけです。

ページを使用するテンプレートを指定するには、次のように、ページのFrontMatterで指定できます。

 ---
template: blog
---

上記の例では、Teenyはblog.htmlというテンプレートを探します。テンプレートが指定されていない場合、Teenyはtemplates/およびそれを使用してdefault.htmlファイルを探します。

使用の例

これが職場での10代の例です。

10代のプロジェクトを開始するには、 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/にコピーし、Origin Directoryから同じ構造に従って使用します。

この理由は、実際に「魔法」の輸入を持ちたくなかったためです。ここでは、実際のディレクトリ構造に対応しないパスから静的資産をインポートする必要があります。その結果、必要に応じて、静的ファイルはtemplates/およびpages/内部に存在することを決定しました。

ただし、ページとテンプレートの両方を使用したい資産がある可能性があるため、 static/ディレクトリアプローチに降伏しました。 static/からのインポートは「魔法」です。つまり、彼らが機能するためには、 teeny buildの出力について考える必要があります。

Teenyがサポートする最後のコマンドは、 teeny developです。これにより、 public/サブディレクトリからサーバーファイルへのHTTPサーバーが作成されます。

ファイルの変更を聴き、その場での静的ファイルを更新します（ナイーティブに、変更を検出するたびにすべてを再構築するだけで）。

？潜在的な将来の改善

私はできるだけ小さいティーンを維持したいです。私は、これが簡単な静的ブログをすばやく構築するための単純なツールであるはずであるというリマインダーとして、すべてのコードを1つのファイルに意図的に1つのファイルに入れました。

ただし、すべてを素朴に再構築するのではなく、 teeny developへの最適化されたアプローチや、より優れたカスタマイズオプションなど、いくつかの「開発者エクスペリエンス」アップグレードを使用できます。