人気のある静的サイトジェネレーターの概要

公開: 2022-03-11

すべての静的ページジェネレーターには、静的HTMLファイルとそのすべてのアセットを生成するという1つの一見簡単なタスクがあります。

静的HTMLファイルを提供することには、キャッシュの容易さ、読み込み時間の短縮、全体的な環境の安全性の向上など、多くの明らかな利点があります。 各静的ページジェネレーターは、HTML出力を異なる方法で生成します。

図解された静的サイトジェネレータ

ただし、この投稿の目的は、メカニズムの複雑さを詳しく説明することではなく、各フレームワークが提供する機能セットを比較し、すべてのフレームワークの固有の側面と機能を強調することです。

人気のある静的ページフレームワークの概要

この投稿では、次の静的ページフレームワークを詳しく見ていきます： Jekyll 、 Middleman 、 Hugo 、およびHexo 。 これらは、世の中にある唯一のジェネレーターではありませんが、大規模なコミュニティと多くの有用なリソースに支えられた、最も一般的に使用されているジェネレーターです。

それぞれを詳しく見て、基本的な機能を比較してみましょう。

  • ジキル
    • Rubyで書かれ、
    • 箱から出してLiquidテンプレートエンジンをサポートします。
  • ミドルマン
    • Rubyで書かれ、
    • 箱から出してERBおよびHamlテンプレートエンジンをサポートします。
  • ヒューゴ
    • 囲碁で書かれた、
    • 箱から出してGoテンプレートエンジンをサポートします。
  • ヘキソ
    • JavaScriptで書かれ、
    • 箱から出してEJSとPugをサポートします。
関連：バックエンド：静的サイトの更新にGatsby.jsとNode.jsを使用する

注：これらの静的ページジェネレーターはそれぞれ、プラグインと拡張機能を使用してカスタマイズおよび拡張できるため、ニーズのほとんどまたはすべてをカバーできることを指摘しておく価値があります。

静的サイトジェネレーターのセットアップ

これらの各フレームワークのドキュメントは包括的であり、優れていることに他なりません。ここで入手できます。

Jekyllのドキュメント

ミドルマンのドキュメント

Hugoドキュメント

Hexoドキュメント

インストールガイドに従うだけで、数分以内に開発環境を準備できます。 インストールしたら、ターミナルからコマンドを実行して新しいプロジェクトを開始できます。

たとえば、これはさまざまなフレームワークで新しいプロジェクトを開始する方法です。

ジキル

jekyll new my_website

ミドルマン

middleman init my_website

ヒューゴ

hugo new my_website

ヘキソ

hexo init my_website

構成

構成は通常、単一のファイルに保存されます。 各静的Webサイトジェネレータには固有のものがありますが、多くの設定は4つすべてで同じです。

ソースファイルを保存する場所、またはビルドされたソースを出力する場所を指定できます。 ビルドプロセスで使用されないデータをスキップするには、excludeまたはskip_renderオプションを設定することで常に役立ちます。 構成ファイルを使用して、プロジェクトのタイトルや作成者などのグローバル設定を保存することもできます。

静電発電機への移行

すでにWordpressプロジェクトの準備ができている場合は、比較的簡単に静的ページジェネレーターに移行できます。

Jekyllの場合、JekyllExporterプラグインを使用できます。 Middlemanの場合、wp2middlemanと呼ばれるコマンドラインツールを使用できます。 WordpressからHugoExporterへのHugo移行には使用できます。また、Hexoについては、昨年書いたWordpressからHexoへの移行方法に関するガイドを読むことができます。

原則はほぼ同じで、非常に簡単です。最初にすべてのコンテンツを適切な形式にエクスポートしてから、適切なフォルダーに含めます。

コンテンツ

静的ページジェネレーターは、メインコンテンツにMarkdownを使用します。 マークダウンは強力で、すぐに学ぶことができます。 Markdownでコンテンツを書くことは、その単純な構文のために自然に感じます。 ドキュメントはすっきりと整理されているように見えます。

静的ページジェネレーターのコンテンツ

グローバル構成ファイルで指定されたフォルダーに記事を配置する必要があります。 記事名は、ジェネレーターによって指定された規則に従う必要があります。

Jekyllでは、記事を_postsディレクトリに配置する必要があります。 記事名は次の形式にする必要があります：YEAR-MONTH-DAY-title.MARKUP。 他のジェネレーターにも同様のルールがあり、新しい記事を作成するためのコマンドを提供します。

Middleman、Hugo、およびHexoで新しい記事を作成するためのコマンドは次のとおりです。

ミドルマン

middleman article my_article

ヒューゴ

hugo new posts/my_article.md

ヘキソ

hexo new post my_article

Markdownでは、特定の構文セットに制限されています。 幸いなことに、すべてのジェネレーターは生のHTMLも処理できます。 たとえば、特定のクラスでアンカーを追加する場合は、通常のHTMLファイルの場合と同じようにアンカーを追加できます。

This is a text with <a class="my-class" href="#">a link</a>です。

フロントの問題

フロントマターは、Markdownファイルの上にあるデータのブロックです。 より良いコンテンツを作成するために必要なデータを保存するカスタム変数を設定できます。 雑然とした醜いドキュメント構造につながる可能性のあるMarkdownでHTMLを記述する代わりに、フロントマターで変数を定義することができます。

たとえば、これは記事にタグを追加する方法です。

 tags: - web - dev - featured

静的ページジェネレーターのテンプレート

静的ページジェネレーターは、テンプレート言語を使用してテンプレートを処理します。 テンプレートにデータを挿入するには、タグを使用する必要があります。 たとえば、Jekyllでページタイトルを表示するには、次のように記述します。

{{ page.title }}

Jekyllの投稿で、フロントマターのタグのリストを表示してみましょう。 変数が使用可能かどうかを確認する必要があります。 次に、タグをループして、順序付けされていないリストに表示する必要があります。

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

仲買人：

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

ヒューゴ：

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

ヘキソ：

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

注：ビルドプロセスが失敗するのを防ぐために、変数が存在するかどうかを確認することをお勧めします。 これにより、デバッグとテストの時間を節約できます。

変数の使用

静的ページジェネレーターは、テンプレートを渡すために使用できるグローバル変数を提供します。 異なる変数タイプは異なる情報を保持します。 たとえば、Hexoのグローバル変数サイトは、サイトの投稿、ページ、カテゴリ、およびタグに関する情報を保持します。

使用可能な変数とその使用方法を知っていると、開発者の作業が楽になります。 HugoはGoのテンプレートライブラリを使用してテンプレートを作成します。 Hugoで変数を操作することは、コンテキスト、またはそれらがそれをどのように呼ぶかについての「ドット」に精通していない場合、問題になる可能性があります。

Middlemanにはグローバル変数がありません。 ただし、記事のリストなど、いくつかの変数にアクセスできるようにする仲介者ブログ拡張機能をオンにすることはできます。 グローバル変数を追加する場合は、データをデータファイルに抽出することで追加できます。

データファイル

マークダウンファイルで利用できないデータを保存したい場合は、データファイルを使用する必要があります。 たとえば、サイトのフッターに表示するソーシャルリンクのリストを保存する必要がある場合です。 すべての静的ページジェネレーターはYAMLおよびJSONファイルをサポートします。 さらに、JekyllはCSVファイルをサポートし、HugoはTOMLファイルをサポートします。

それらのソーシャルリンクをデータファイルに保存しましょう。 すべてのジェネレーターがYAML形式をサポートしているので、social.ymlファイルにデータを保存しましょう。

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyllはデフォルトでデータファイルを_dataディレクトリに保存します。 MiddlemanとHugoはデータディレクトリを使用し、Hexoはsource/_data directoryを使用します。

データを出力するには、次のコードを使用できます。

ジキル

{%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

ミドルマン

<% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

ヒューゴ

{{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

ヘキソ

<% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

ヘルパー

テンプレートは多くの場合、データフィルタリングをサポートしています。 たとえば、タイトルを大文字にしたい場合は、次のようにすることができます。

{{ page.title | upcase }}

Middlemanの構文は似ています。

<%= current_page.data.title.upcase %>

Hugoは次のコマンドを使用します。

{{ .Title | upper }}

Hexoの構文は異なりますが、結果は同じです。

<%= page.title.toUpperCase() %>

静的ページジェネレータがアセットを処理する方法

アセット管理は、静的ページジェネレーター間で異なる方法で処理されます。 Jekyllは、アセットファイルが配置されている場所にコンパイルします。 Middlemanは、ソースフォルダーに保存されているアセットのみを処理します。 Hugoのアセットのデフォルトの場所はアセットディレクトリです。 Hexoは、アセットをグローバルソースディレクトリに配置することを提案しています。

画像の代替テキスト

SASS

JekyllはSassをすぐにサポートしますが、いくつかのルールに従う必要があります。 MiddlemanはSassをすぐにサポートします。 Hugoは、Hugo PipesforSassを介してSassをコンパイルします。 Hexoはプラグインを介してそれを行います。

ES6

es6の最新のJavaScript機能を使用する場合は、プラグインをインストールする必要があります。 同様のプラグインには複数のバージョンが存在する可能性があるため、コードを確認するか、未解決の問題または最新のコミットを確認して、最適なプラグインを見つけることをお勧めします。

画像

画像の最適化もデフォルトではサポートされていません。 また、es6プラグインと同様に、画像を最適化するためのプラグインが複数あります。 宿題をして、その仕事に最適なプラグインを見つけてください。 または、サードパーティのソリューションを使用することもできます。 Hexoで構築された私のブログでは、Cloudinary無料プランを使用しています。 私はcloudinaryタグを開発し、Cloudinary変換を介して応答性が高く最適化された画像を提供しています。

プラグイン、拡張機能

静的ページジェネレーターには、Webサイトをカスタマイズできる強力なライブラリがあります。 各プラグインは異なる目的を果たします。 より良い開発環境のためのLiveReloadからサイトマップまたはRSSフィードの生成まで、幅広いプラグインを見つけることができます。

新しいプラグインまたは拡張機能を作成できます。 その前に、同様のプラグインが存在するかどうかを確認してください。 Jekyllプラグインリスト、Middleman拡張機能、およびHexoプラグインを参照してください。 Hugoにはプラグインや拡張機能はありません。 ただし、カスタムショートコードはサポートしています。

Markdownのショートコード

ショートコードは、Markdownドキュメントに配置できるコードスニペットです。 これらのスニペットはHTMLコードを出力します。 HugoとHexoはショートコードをサポートしています。 Hugoの図のような組み込みのショートコードがあります。

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo youtubeショートコード：

{% youtube video_id %}

適切なショートコードが見つからない場合は、新しいショートコードを作成できます。 たとえば、HexoはCanIUse埋め込みをサポートしておらず、CanIUse埋め込みをサポートする新しいタグを開発しました。 npmまたは公式ジェネレータサイトでプラグインを公開することを忘れないでください。 そうすれば、コミュニティは感謝するでしょう。

CMS

静的ページジェネレータは、技術者以外の人にとってはオーバーヘッドになる可能性があります。 コマンドやMarkdownの使い方を学ぶことは、誰にとっても簡単なことではありません。 その場合、ユーザーはJAMstackサイトのコンテンツ管理システムの恩恵を受けることができます。 このリストでは、ニーズに最適なシステムを見つけることができます。 CMSの構成には時間がかかることを知っておいてください。ただし、長期的には、コンテンツをより効率的に公開することで、あなたや他のユーザーが恩恵を受ける可能性があります。

ボーナス：JAMstackテンプレート

プロジェクトの構成にあまり時間をかけたくない場合は、JAMstackテンプレートを利用できます。 これらのテンプレートの一部は、CMSで事前構成されているため、時間を大幅に節約できます。

コードを調べることで、多くのことを学ぶこともできます。 テンプレートをインストールして他のテンプレートと比較し、最適なテンプレートを選択してください。

まとめ

静的ページジェネレーターは、Webサイトを構築するための高速で信頼性の高い方法です。 最近では、ジェネレーターを使用して、重要で高度にカスタマイズされたWebサイトを構築することもできます。

たとえば、Smashing Magazineは昨年JAMstackに移行し、サイトを大幅に高速化することができました。 静的Webサイトの成功例は他にもありますが、それらはすべて同じ原則を共有しています。静的リソースを生成し、コンテンツ配信ネットワークを介して配信することで、読み込みを高速化し、優れたユーザーエクスペリエンスを実現します。

静的Webサイトでできることは他にもたくさんあります。WordpressRESTAPIをバックエンドとして使用することから、Lambda関数を使用することまでです。 HTTPSをすぐに使用したり、フォームの送信を処理したりするなど、単純なWebサイトにも優れたソリューションがあります。

この静的ページフレームワークの概要が、その可能性を認識し、次に新しいプロジェクトを考えるときにそれらを使用することを検討するのに役立つことを願っています。

関連： Webアプリのクライアント側とサーバー側と事前レンダリング