静的サイトジェネレーターは、ブログなどのような予測可能なページレイアウトとコンテンツを持つHTMLサイトを作成します。プログラミング言語を活用し、コードを再利用してこれらのHTMLページのアセットを処理するために多くのフレームワークがありますが、この記事では最も人気のある2つを比較します：HugoとJekyll。（静的サイトと動的サイトの比較については、Jekyll vs WordPressを参照してください）
静的 HTML ページを使用する理由
静的サイトジェネレーターは魅力的です。なぜなら、保守が少なく、より速く提供されるセキュアなサイトを生成するからです。動的に生成されるウェブページよりも。動的ウェブページでは、サーバーにインストールされたウェブフレームワークがユーザーが見るページを生成します。ユーザーがリクエストを行うと、サーバーはデータベースにクエリを実行し、ユーザーが見たい情報を取得し、そのデータをHTMLページに組み合わせ、そのページをユーザーに送信します。
静的HTMLページでは、ページは事前にレンダリングされているため、サーバーはページを構築する作業を行いません。それは単に適切なページをユーザーに送信するだけです。これにより、静的HTMLページは高速であり、サーバーの計算要件がはるかに小さくなります。コンピューティングパワーが請求されるクラウド環境では重要です。
静的ページはページの生成をカットし、ユーザーはページをより迅速に受け取ります。セキュリティリスクも小さくなります。攻撃者が浸入し利用する可能性があるパーツが少ないためです。静的HTMLページは簡単にキャッシュできるため、コンテンツデリバリーネットワーク（CDN）から提供されるのに適しています。これにより、レスポンスタイムがさらに高速化されます。
静的ページには、サーバーが計算を実行する必要がないため、Amazon S3バケットやGitHubページなどの非常にシンプルで低コストなホスティングオプションを使用して展開することができます。
静的サイトジェネレータ
以下のテキストを日本語に翻訳します: HTML ページを単に書いてサーバーに配置することができますが、Web の初期の日々にさかのぼって、静的サイトジェネレーターは既存のテンプレートを使用したり、すべての既存のページを一度に変更したりする新しいページを作成することをはるかに簡単にします。
Web 開発のこのトレンドを再スタートさせた最初の静的サイトジェネレーターの1つはJekyllでした。 5年後にHugoが参加しました。
ヒューゴとは?
Hugoは、楽しくて最新のウェブサイト構築ツールと位置づけられている、超高速で高度に安全な静的サイトジェネレーターです。Goで書かれており、サイトはどこにでもホストできます。Hugoのより目立つ特徴の1つは、Ruby、PHP、Pythonなどのようなランタイムでデータベースが必要ない静的サイトを生成することです。公式ウェブサイトによると、Hugo静的サイトジェネレーターは「その種の中で最速のツール」であり、平均サイト構築速度が1秒未満であるとされています。Hugoに関する詳細情報は、「Hugoとは」をご覧ください。
ジキルとは何ですか?
Jekyllは、Githubの共同創設者であるTom Preston-WernerによってRubyで書かれたオープンソースの静的サイトジェネレータです。Jekyllはプレーンテキストドキュメントを静的サイトに変換し、情報提供型のウェブサイトやブログに使用することができます。Githubページのビルトインサポートもあり、利用可能な静的サイトジェネレータの中でも人気の高いものの一つです。
「Jekyllとは何か」に関する詳細情報
ヒューゴ対ジキル
どちらのジェネレーターを使用しても、30分以内にテンプレート化されたブログを立ち上げることができます。何もない状態から始める場合、Hugoの方がやや簡単にインストールできます。Jekyllの場合は、Rubyなどのいくつかの前提条件をインストールする必要があります。Goは、Hugoのインストールにバンドルされたプリコンパイルされたバイナリとして提供されます。
JekyllとHugoの両方のフレームワークでは、通常、HTMLまたはMarkdown形式でブログ投稿のようなコンテンツファイルを作成します。このコンテンツはHTMLテンプレートと組み合わされ、コンテンツをラップしてスタイルを適用し、ウェブ上で表示されるHTMLファイルが出力されます。
両方のフレームワークでは、開発者がYAMLマークアップ言語を使用してコンテンツに変数を追加し、JSONやCSVなどの一般的な形式のデータファイルを消費することができます。また、両方のフレームワークには、タグやコンテンツファイルを完成したHTMLページにルーティングする機能など、ブログに役立つ機能が多数含まれています。また、オープンソースであり、変更のリクエストや改善の貢献もできます。
JekyllとHugoのフレームワーク間の最初で最も基本的な違いは、それらが書かれている言語です。JekyllはRubyで書かれており、ウェブフレームワークで最初に意見を持った言語の1つであり、ウェブサイトを迅速に構築するために非常に人気があります。HugoはGoで書かれており、Googleで開発されており、並行実行を意識しており、計算能力が多くのマシンに分散されるクラウド環境での展開に最適化されています。
各フレームワークは、それぞれ異なる言語との親和性を持っています。JekyllはCoffeeScriptとSASS/SCSSをサポートしています。Hugoは、コンテンツファイルでTOMLとJSONマークダウンをサポートしていますが、SASSやSCSSをサポートするには追加の設定が必要かもしれません。
テンプレートの状況
Jekyllフレームワークの主な利点の1つは、使いやすさ、充実したドキュメンテーション、およびGitHubのような主要組織からの広範なサポートです。Jekyllは12年前にリリースされ、静的なHTMLサイトへの新しい関心を高めるのに役立ちました。Hugoは後にリリースされましたが、人気は低く、プラグインとテンプレートのエコシステムがあまり発展していません。
GitHubのトピックは、Jekyll用に選択できる1,200のテーマを提供していますが、Hugoのテーマページではわずか370のオプションしか提供されていません（ただし、独自のテーマも作成できます）。明らかに、Jekyllでは、お好みのルックを持つテーマを見つけやすいでしょう。JekyllはGitHubによってサポートされているため、シンプルで費用のかからない展開が必要な場合、JekyllはGitHub Pagesとシームレスに連携して機能し、GitHubの優れたドキュメンテーションに従ってすぐにシンプルなJekyllブログをオンラインに公開できます。
HugoとJekyllフレームワークの別の違いは、jekyll new my-awesome-siteコマンドを実行することによってJekyllで完全に新しいサイトを作成すると、基本的なテーマがインストールされる点ですが、hugo new site my-awesome-siteコマンドで新しいサイトを作成すると、フォルダ構造とテンプレートファイルのみが生成されます。Jekyllでは、すぐに作業できるものが用意されていますが、Hugoでは、テーマやカスタムテンプレートを追加するのを待っている空の画面を見ることになります。
これは完全にカスタマイズされたセットアップには最適ですが、Jekyllは作業できるコンテンツをすぐに見ることができるよりもはるかに迅速な経路を持っています。
スピード、スピードアップ
Hugoの静的サイトジェネレータを使用する主な利点の1つはその速さです。Go言語の同時性に焦点をあてることで、数千のエントリーまたは多くの画像を含むブログはHTMLをより迅速に生成します。コンピューティングパワーの料金を支払う場所でコードを実行している場合、この点は重要です。
Hugoを使用することで開発中も重要です。テンプレートやコンテンツへの変更がHugoではより迅速に再レンダリングされるためです。この速度の違いは、ページの数が少ない場合でも目立ちますが、コンテンツを100ページ構築している場合、より重要になります。
ヒューゴのボーナス
ヒューゴは国際化をサポートし、さまざまな言語でコンテンツを分類するための複数の方法を提供しています。 ヒューゴはまた、画像処理、組み込みメニュー、サイトマッピング、およびライブリローディングも提供しています。
ジキルでも同じ結果を得ることができますが、設定にはもう少し手間がかかります。 ジキルでは、この機能はプラグインから提供されますが、複雑なページを構築している場合は組み込みの機能を持っていると便利です。
ホスティング
両方の言語は簡単なホスティングのためのオプションを提供していますが、Jekyllが最もシンプルです。JekyllとGitHub Pagesは密接で長い関係を持ち、JekyllプロジェクトをGitHub Pagesにデプロイすることは簡単で速く、Jekyllを使ったブログの試用には最適な選択肢となります。
Hugoも多くのホスティングオプションを提供しています。両方のジェネレータには、2つの基本的なオプションがあります。
- サイトジェネレータをローカルで実行し、その結果をサーバーにアップロードすることができます。更新されたHTMLを取得するために、手動で行うか、いくつかのサービスに指示することができます。
- クラウド上のコンピューターに静的サイトジェネレーターをインストールし、そのコンピューターにコンテンツ生成コマンドを実行させ、そのプロセスで生成されたファイルを提供することができます。これが、Amazon Amplify、CloudCannon、およびNetlifyなどのサービスがすべて動作する方法です。これらのプロバイダーはすべて、サイトを展開するための特定のガイドを持っていますが、静的サイトジェネレーターを使用すると展開プロセスはかなり簡単です。
何を選ぶべきか
ジェキルとヒューゴは、どちらもブログやその他のフロントエンド指向のサイトに適しています。マークダウン言語で書かれたコンテンツをHTMLテンプレートと組み合わせて、静的なHTMLページを生成します。
ジェキルは、最も素早いセットアップと、テンプレートに対するより多くのオプション、そして始める際のより簡単な体験を提供しますが、数百ページを処理すると遅く感じる場合があります。ヒューゴは、初期セットアップがより複雑ですが、より高速な大規模サイトを処理できます。例えば、Hugoのブログです。
決定する際には、あなたが慣れている言語、使用したいマークダウンの種類、そしてサイトのデプロイ方法を考えてください。すぐにブログを始めたい場合は、ジェキルが適していますが、多くのコンテンツを書くことを予想している場合は、Hugoの速度と機能が開発体験をスムーズにします。
Leave a Reply