静的サイトジェネレーター
静的サイトジェネレーター（英: Static Site Generator, SSG）はテキスト入力ファイル（Markdown、reStructuredText、AsciiDoc、JSONなど）を使用して静的ウェブページを生成するソフトウェアエンジン。[1]静的サイトジェネレーターによって生成された静的サイトは、サイト生成後にバックエンドを必要としないため、コンテンツデリバリネットワーク（CDN）上で第一級オブジェクトとなる。最も人気のある静的サイトジェネレーターには、Jekyll、Hugo、Next.js（JavaScript）などがある。[2][3]SSGは通常、製品ページ、ニュース記事、ソフトウェアドキュメント、ブログのようなめったに変更されない情報のコンテンツで使用する。
アーキテクチャ
編集SSGは通常、Liquid（Jekyll）やGo Template（Hugo）などのテンプレートシステムを使用してHTMLで記述されたテンプレートで構成される。同じ構造（通常はGitリポジトリ）には、MarkdownやreStructuredTextのようなプレーンテキスト形式のコンテンツや、JSONやXMLのような構造メタ形式のコンテンツが含まれる。1つのプレーンテキストファイルが1つのウェブページに対応することもある。あるいは、AngularJSのようなシングルページアプリケーションフレームワークが使われている場合、1つの構造メタデータファイルがウェブサイト全体に対応することもある。Webサイトの変数設定は、プレーンテキスト設定ファイル_config.yml（YAML）、_config.toml（TOML）、または_config.json（JSON）に保存される。ページファイルは通常、タイトル、パーマリンク、日付などの変数を定義するYAML、TOML、またはJSONプリアンブルで始まる。_index.md（index.mdではない）のようなアンダースコア（_）で始まる名前のファイルは、テンプレートまたはアーキタイプとみなされるため、ページそのものとしてはレンダリングされない。
例
編集数百のSSGが存在することが文書化されており、その大部分はPython、Go、JavaScript、TypeScriptなど、Web上ですでに有名な言語で記述されている。[4]
| システムラベル/名前 | 言語 | 備考 |
|---|---|---|
| Jekyll | Ruby | Liquidテンプレート言語を使用。[4] |
| Hugo | Go | Goテンプレートを使用しており、コンパイル時の高速性が主な売り。[4] |
| Next.js | JavaScript | Reactテンプレートを使用。[4] |
| Pelican | Python | Jinja2 テンプレートを使用。[4]reStructuredTextまたはMarkdownからHTMLをコンパイルする。 |
| Astro | JavaScript | デフォルトで.astro構文言語を使用（HTMLやJSXに馴染みやすい）。複数のフレームワークをサポート：Svelte、React、Preact、Vue、SolidJS、Lit、AlpineJS。MarkdownまたはMDXからHTMLをコンパイルする。[4] |
| Docusaurus | JavaScript | MDX、Markdown、JavaScript、ReactからHTMLにコンパイルする。Node.jsを使用しており、Reactを使用してカスタマイズできる。 |
サーバーサイドシステムとの比較
編集
多くのサーバーサイドテンプレートシステムには出力ページをサーバー上に発行するオプションがあり、公開されるページは静的である。これは、Vignetteのようなコンテンツ管理システムでは一般的であるが、サーバー外での生成とはみなされない。ほとんどの場合、この「公開オプション」はテンプレートシステムに干渉せず、Wgetのような外部ソフトウェアで作成できる。[5]
人々は、このタスクに適合した既存のソフトウェアを使用してテンプレートから生成されたサーバーサイドの動的ページを使用し始めた。この初期のソフトウェアは、Webでの使用に適応した、CGI上で動作する、プリプロセッサとマクロ言語であった。次に、シンプルだが関連性のある技術はSSIから始まった拡張モジュールでの直接実行であった。
脚注
編集- ^ “What is a Static Site Generator? How do I find the best one to use?” (英語). Netlify. 2022年9月18日時点のオリジナルよりアーカイブ。2022年9月18日閲覧。
- ^ “What Is a Static Site Generator, and How Can It Help Your Website Creation Process?” (英語). TeleportHQ (2021年12月15日). 2022年9月18日時点のオリジナルよりアーカイブ。2022年9月18日閲覧。
- ^ “What is a static site generator?” (2022年9月18日). 2022年9月18日時点のオリジナルよりアーカイブ。2022年9月18日閲覧。
- ^ a b c d e f “Static Site Generators - Top Open Source SSGs | Jamstack” (英語). Jamstack.org. 2022年9月18日時点のオリジナルよりアーカイブ。2022年9月18日閲覧。
- ^ “Static Site Generator” (英語). Gatsby. 2022年9月18日時点のオリジナルよりアーカイブ。2022年9月18日閲覧。
外部リンク
編集- JavaScript template libraries comparison from 2009
- Enforcing Strict Model–View Separation in Template Engines