静的サイトジェネレーター

静的サイトは動的コンテンツを含まず、HTML、CSS、JavaScriptなどの静的ファイルで構成され、（ひとたびビルド等で準備すれば）サーバーサイドの処理やデータベースを必要としません。

ファイルを構築してしまえば、ユーザーがサイトを訪問する際にそれ以上の処理は必要なく、サイトを実行するために必要なリソースも少なくて済みます。スクリプトやデータベースが悪用される隙をつくらないため、サイトのセキュリティも向上します。

静的サイトジェネレーターの強み

HTML、CSS、JavaScriptに精通していれば、テキストエディターやコードエディターを使って静的サイトを構築することができます。しかし、コンテンツの記述には技術的な知識が必要になります。そして扱いと作業に時間がかかる、サイトが大きくなるにつれて管理と維持が難しくなる可能性もあります。

静的サイトジェネレーター（SSG）を使うことで、静的サイトの構築を効率化することができます。SSGには、コンテンツの作成、スタイルの設定、公開、編集を簡単にするさまざまな機能が含まれているものです。静的サイトジェネレーターを使うことには、主に以下のようなメリットがあります。

• テンプレート化：テンプレートシステムでは、複数のページで使用できる（つまり再利用可能な）テンプレートとコンポーネントを使用し、ウェブサイトの構造とレイアウトを定義できます。複数のページで共通の要素を都度複製または更新する必要がなくなります。また、コンテンツをデザインやプレゼンテーションレイヤーから切り離すことができるため、コンテンツの作成と更新に集中することができます。
• 自動化：サイトにMarkdownファイルやデータファイルなど、さまざまなソースからのコンテンツが含まれている場合、静的サイトジェネレーターを使って、コンテンツをHTMLファイルに変換するプロセスを自動化することができます。圧縮、最適化、アセットバンドルなどのタスクも自動化可能です。各作業を手動で実行することなく、サイトの作成と最適化を進められるため、手間やエラーの削減が期待できます。
• バージョン管理：静的サイトジェネレーターは、Gitのようなバージョン管理システムとの統合に対応しています。これにより、変更を追跡したり、他の人と共同作業をしたり、必要であれば簡単に以前のバージョンに戻したりすることができます。
• インクリメンタルビルド：インクリメンタルビルドでは、変更を加えて新しい出力を生成すると、前回のビルド以降に変更されたファイルだけが再生成の対象となります。多くの静的サイトジェネレーターがインクリメンタルビルドをサポートしており、この機能が大規模なサイトや小規模な更新のビルド時間改善につながります。

静的サイトジェネレーターの使用

静的サイトジェネレーター（SSG）には、それぞれの機能、構成、テンプレートシステムがあるものですが、弊社の静的サイトホスティングでホストするサイトの生成手順は、通常次のようになります。

1. SSGの選択：SSGにはさまざまな種類があります。その中から目的にあったものを選択することが第一歩となります。弊社の静的サイトホスティングでサイトをビルド、ホストするには、ビルドプロセスでNode.jsを使用するものを選択してください。弊社でお使いいただけるSSG一覧はこちらでご覧いただけます。
2. ローカル開発環境のセットアップ：SSGそのもの、必要なプログラミング言語、コードエディターなど、必要な依存関係をインストールする必要があります。
3. 新規サイトの作成：SSGで新しいサイトを作成します。これにより、プロジェクトに必要な基本的なディレクトリ構造と設定ファイルが生成されます。
4. コンフィギュレーション：サイト構造とジェネレーターによるソースファイルの処理方法をカスタマイズするために、サイトのコンフィギュレーションを調整します。このファイルには入力/出力ディレクトリ、テンプレートパス、メタデータ、プラグイン設定などの情報が記述されます。
5. テンプレート作成：ヘッダー、フッター、ナビゲーションメニューなど、ページの共通要素と構造を定義するテンプレートとレイアウトを作成します。
6. コンテンツとアセットの追加：Markdownやその他のサポートされているフォーマットを使用して、既存のコンテンツを作成または収集します。各ページは通常、コンテンツディレクトリ内のファイルに対応しています。アセットは、コンテンツファイルとは別のディレクトリに保存されます。
7. スタイリング：CSS やプリプロセッサファイル（SASSやLESSなど）を調整して、サイトにカスタムスタイルを適用します。SSGの中にはテーマをインストールし、スタイルのカスタマイズを行えるものもあります。
8. ローカル環境でのビルドとプレビュー：SSGのビルドコマンドを実行することで、ウェブサイトをコンパイルします。SSGによりテンプレートが処理され、その結果、コンテンツファイルがHTMLに変換され、静的ファイル（HTML、CSS、JavaScript）の生成が行われます。該当する場合、圧縮、最適化、アセットのバンドルもこのステップで完了します。見た目や機能がすべて意図した通りになっているか確認しましょう。
9. Gitリポジトリの用意：Gitでリポジトリを作成し、新しく作成したサイトのコミットとGitリポジトリへのプッシュを行います。
   1. 弊社でビルドを実行せずにサイトをデプロイするには、リポジトリにコミットするファイルは、ビルドを経て出力されたもの（HTML、CSS、JavaScriptファイル）である必要があります。
   2. 弊社でサイトをビルドするには、リポジトリにコミットするファイルは、コンテンツ、画像やその他のメディアのようなアセット、およびSSGファイル（またはビルドのための依存関係を取り込む設定ファイル）である必要があります。

10. 新しい静的サイトのデプロイ：MyKinstaで、静的サイトを追加し、Gitリポジトリに接続して、260+のCDNロケーションにサイトをデプロイします。
11. 維持と更新：サイトの作業を続ける際には、バージョン管理のベストプラクティスに従い、定期的に変更をコミットし、SSGとその依存関係の最新バージョンに更新するようにしてください。こうすることで、スムーズな開発プロセスが保証され、最新の機能やバグの修正内容を利用することができます。

静的サイトジェネレーターの互換性

弊社の静的サイトホスティングは、構築済みの静的サイト、またはKinstaサイトのビルドにNode.jsを使用する（最新のJavaScriptフレームワークを土台とした）サイトを対象としたサービスです。ランディングページ、パンフレットサイト、そしてあまり頻繁に更新されず、動的なコンテンツ（コメントなど）を必要としない小規模なブログなどがこの形態に向いています。

お客様のサイトが以下の条件に当てはまる場合は、静的サイトホスティングの代わりに、弊社アプリケーションホスティングのご利用をお勧めします。

• Node.js以外の言語を使用してサイトを構築している（PHPなど）
• サイトの一部またはすべてにサーバーレンダリング（SSR）を必要とする
• データベース接続が必要
• 動的コンテンツを提供する
• サーバーサイドで管理するセッションや認証が必要

どのホスティングが最適か不明な場合には、両方のホスティングサービスにサイトをデプロイしてそれぞれを試した上で判断することをお勧めします。

静的サイトジェネレーターは多数あり、ビルドコマンドと公開ディレクトリはサイトによって異なります。弊社では、静的サイトの追加時に、システムにより自動で特定のフレームワークが検出され、「ビルドコマンド」と「公開ディレクトリ」フィールドに関連する情報が入力されます。

以下の表は、静的サイトホスティングと互換性のある人気の静的サイトジェネレーターと対応するビルドコマンド、公開ディレクトリです。

* GridsomeまたはVuePress 1.x

これにはNode 16、またはビルドコマンドのpackage.jsonに以下を追加する必要があります。

SET NODE_ OPTIONS =--openssl- legacy -provider && vuepress build src

** Hugo

プロジェクトに以下を追加してください。

npm install hugo-bin serve --save-dev

プロジェクトに応じて、以下を追加または置き換えてください。

{
  " scripts ": {
    "build": "hugo"
  }
}

Hugoテーマでは、Gitサブモジュールを使ったインストールが一般的に推奨されます。現在のところ、サブモジュールは静的ホスティングやアプリケーションホスティングとは互換性がありません。そのため、テーマファイルはサイトのリポジトリで利用できる必要があります。