10の最高の静的サイトジェネレーター

Webでアクセスするほとんどのサイトは、おそらく動的に生成されます。つまり、すべてのコンテンツをサーバーに保存されているHTMLにエンコードするのではなく、データベースからコンテンツを取得し、その場で提供するページを作成します。

多くは、ログインやフォームなどを通じてユーザーとの対話性も提供します。これらの両方の例としてFacebookを考えてみてください。このタイプの機能を自分で構築するには、WordPressなどのCMSを検討することをお勧めします。

ただし、一部のユースケースでは、これはやり過ぎです。個人のプロフィール、ビジネスに関する情報、さらにはブログなどの単純なページでは、このようなオーバーヘッドや複雑さは実際には必要ありません。もちろん、静的HTMLを自分で作成することもできます。 テキストエディタ 。そして実際、何年も前にこれがすべてのサイトの構築方法でしたが、スケールアップまたは変更を行う場合、これを維持するのは急速に面倒になります。静的サイトジェネレーターは、テンプレートを使用して静的HTMLページを作成できるようにすることで、これに対するソリューションを提供します。



基本的に、静的サイトジェネレーターは、最終的なHTMLページの作成を、ユーザーが要求した時点からコンテンツを作成した時点までシフトするコマンドラインツールです。更新を行うと、新しいページが作成され、それを要求するすべてのユーザーにそのまま提供できます。

これにはいくつかの利点があります。静的HTMLとCSSの提供はフットプリントが非常に小さいため、動的サイトと比較してパフォーマンスが大幅に向上します。サーバー側のセットアップははるかに簡単になります。つまり、セキュリティ上の心配も少なくなります。ただし、逆に、リアルタイムコンテンツを配信したり、ユーザー入力を受け取ったりする機会は失われます。

近年、静的サイトジェネレータの人気が爆発的に高まっているため、幅広い選択肢をナビゲートするのは難しい場合があります。ここでは、検討すべき最良のオプションのいくつかを見てきました。

01。 ジキル

Jekyllの新しいリリースページ

Jekyll4.0の最初のアルファ版がリリースされました

GitHubの共同創設者であるTomPreston-Wernerによって2008年に最初にリリースされたジキルは、間違いなく静的サイトの概念を普及させ、おそらく最も広く使用されている静的サイトジェネレーターです。 Jekyllを使用すると、通常、テキストフォーマット用に設計された軽量マークアップ言語であるMarkdownのコンテンツを操作します。

Liquidテンプレートエンジンは、このMarkdownコンテンツをHTMLテンプレートに配置し、ページのさまざまな部分(ヘッダー、フッター、コンテンツなど)を表すテンプレートをモジュール式で再利用可能な方法で組み合わせるために使用されます。

Sassのサポートは、CSS前処理を優先するユーザー向けに組み込まれており、Bootstrapなどのライブラリで問題なく機能します。 Jekyllには、静的ページをローカルに簡単にデプロイしてテストするために使用できるHTTPサーバーも含まれています。

ジキルショーケースページ

Jekyllは、依然として最も広く使用されている静的サイトジェネレーターの1つです。

Jekyllの主なセールスポイントの1つは、既存のサイトを比較的簡単にJekyllに移行できるようにする、幅広い「インポーター」です。たとえば、WordPressサイトがある場合は、インポーターの1つを使用してJekyllの使用に切り替えることができます。また、既存の静的HTMLサイトをJekyllに変換するのも簡単です。これは、静的HTMLを自分でコーディングしたり、好みのテンプレートを表示したりする場合に便利です。

特に、Jekyllは、GitHubで提供される静的サイトホスティングサービスであるGitHubページに電力を供給するために使用されます。 GitHubリポジトリがある場合は、Jekyllを使用して無料でGitHubページサイトを作成できます。これは、洗練されたランディングページをGitHubプロジェクトに提供するための便利な方法です。

Jekyllの大きな欠点は、これはほとんどのジェネレーターに当てはまりますが、最初は複雑に見える可能性があり、習得するための新しいテクノロジーであるということです。 CMSの場合ほど迅速に稼働していない可能性があります。ただし、それは非常によく文書化されており、学習曲線はすぐに克服されます。

02。 ヘキソ

Hexoホームページ

必ずMarkdownforHexoにコンテンツを書き込んでください

Hexoはによって供給されています Node.js ブログを目的としています。 JavaScriptの実装は、理論的には操作方法にそれほど大きな違いをもたらすべきではありませんが、マークアップとテンプレート言語を使用するため、JavaScript開発者にとってインストールと構成をより身近なものにすることができます。すでにnpmとgitを使用している場合は、起動して実行するのは非常に簡単です。

他の多くの汎用ジェネレーターと同様に、おそらくMarkdownでコンテンツを作成することをお勧めします。デフォルトのテンプレートエンジンはSwigで、これもJavaScript開発者に適しています。ただし、Hexoは拡張可能であり、必要に応じて他のテンプレートエンジンを使用できます。

Hexo Webサイトには、試してみることができるさまざまなビルド済みのテーマが含まれています。このツールの特に人気のある機能の1つは、単一コマンド展開のサポートです。

03。 ギャツビー

ギャツビーのホームページ

ソフトウェア開発者のための最高のラップトップ2015
ギャツビーは開発者がすぐに拾うことができます

Hexoと同様に、GatsbyはNode.jsを利用しているため、経験豊富なJavaScript開発者にとってより馴染みのある領域になります。ただし、他の同様のツールとは異なる点がいくつかあります。

GatsbyはReactを使用しています。つまり、すべてがコンポーネントで構築されており、ReactのDOMレンダリングへのアプローチの恩恵を受けることができます。これは、Reactを使用したことのある開発者がすぐに理解できることを意味しますが、Reactに慣れていない人は、Reactを学ぶ必要があります。

また、ビルド時にGraphQLを利用して、データソースからデータとコンテンツを取得します。これにより、各ページがビルド時に必要な正確なデータを確実に受信できるように、最新の一貫したインターフェイスが提供されます。

最後に、Gatsbyはページをプログレッシブシングルページアプリとして構築します。つまり、サイト全体がダウンロードされ、その後のナビゲーションが即座に行われます。

04。 ヒューゴ

Hugoホームページ

Hugoを使用して数ミリ秒でサイトを作成します

「他の」主要な静的サイトジェネレーターと広く見なされているHugoとJekyllを比較するのは自然なことです。 Hugoは2つのうちの新しい方であり、その主要な重点分野の1つは速度です。これは、一部の人にとってはJekyllに不満を持っています。サイトが構築されるのを待つのが好きな人は誰もいません。Hugoは、マークアップとテンプレートから数ミリ秒で簡単なサイトを作成したり、数千ページを数秒で処理したりすることができます。

Hugoでは、Markdownを使用してコンテンツを作成することも一般的です。また、Hugo自体はGoプログラミング言語で実装されているため、テンプレートエンジンはGoテンプレートに基づいています。 Jekyllと同様に、軽量のHTTPサーバーが付属しており、ページをローカルですばやく提供します。 2つのツールのビルドワークフローは全体的にかなり似ています。

多くの人にとって、Hugoの主な利点は、構成の必要性がほとんどなく、コアバイナリ以外の依存関係がない、開始までの迅速で簡単なパスです。そのドキュメントとチュートリアルは非常に優れており、非常に親しみやすい学習曲線を作るシンプルさを維持するという精神があります。

HugoがJekyllと比較して持つ1つの欠点は、Jekyllで利用できる広範なプラグインエコシステムがないことです。ただし、その幅広い組み込み機能を考えると、これがほとんどのユーザーにとって問題になる可能性はほとんどありません。また、StackOverflowなどのサイトでのサポートは、それほど長くはないため、わずかに軽くなる可能性があります。ただし、人気は高まり続けており、近い将来、主要な静的サイトジェネレータになる可能性があると多くの人が信じています。

05。 NUXT

NUXTホームページ

Nuxtは開発にコンポーネントベースのアプローチをもたらします

Vue.jsは、穏やかな学習曲線、高性能、強力な機能セットの組み合わせにより、近年、フロントエンドフレームワークとして絶大な人気を博しています。

Nuxt.jsは、実際にはサーバーでレンダリングされたVueアプリケーションを作成するためのフレームワークです。つまり、完成した形式でクライアントに渡されて表示される前にサーバーによってレンダリングされる動的ページです。ただし、Vueプロジェクトを介したすべてのルートの静的HTMLページを構築するコマンドラインパラメーターを使用して、静的サイトを構築するためにも使用できます。

NuxtはVueフレームワークであるため、使用するにはVueに精通している必要がありますが、以前にVueを使用したことがある開発者は安心できます。また、Vueと同様に、サイトの開発にコンポーネントベースのアプローチをもたらします。

06。 MkDocs

MkDocsホームページ

MkDocsはプロジェクトドキュメントサイトを専門としています

MkDocsは、これまで見てきたツールよりも専門的です。これは、非常に単純な目的の1つを念頭に置いて設定されています。それは、プロジェクトドキュメント用のHTMLサイトを生成するための高速で使いやすい方法を提供することです。そして、それは絶対にこれを行うことに成功します。 Pythonに組み込まれているため、取得するにはPythonとpip(Pythonパッケージマネージャー)をインストールする必要があります。

その後、始めるのは簡単です。ドキュメントはMarkdownで記述され、ツールは単一のYAMLファイルを使用して構成されます。コマンドラインビルドプロセスは、可能な限り単純です。

MkDocs GitHubページには、ドキュメント用に特別に設計された多数のテーマが含まれています。または、独自のテーマのHTMLを作成することもできます。 MkDocsは、開始するのが最も簡単な静的サイトジェネレーターの1つであり、ドキュメントがユースケースである場合、他のツールを検討する理由はほとんどありません。

07。 ペリカン

ペリカンページ

Pelicanを使用すると、さまざまなブログプラットフォームからサイトをインポートできます。

Pelicanは、ユビキタスなMarkdownを含む、複数の言語で書かれたコンテンツをサポートしています。使いやすく非常に強力なJinjaテンプレートエンジンを使用しています。つまり、Pelicanは主にブログの作成に最適化されていますが、さまざまな種類の他のサイトの作成にも適しています。また、高速で、構築を待たずに数千ページのサイトを快適に処理できます。

多くの主要な静的サイトジェネレーターと同様に、Pelicanを使用すると、さまざまなブログプラットフォームからサイトをインポートできます。これにより、WordPressや他の多くの一般的なコンテンツ管理システムで構築された既存のサイトを変換するのは簡単です。 Pythonに精通している場合、特に以前にJinjaテンプレートを使用したことがある場合は、Pelicanが非常に安全な選択肢です。

ただし、逆に、JavaScriptまたはRubyに精通している開発者にとっては理解するのが少し難しいかもしれません。

08。 鍛冶

鍛冶のホームページ

adobe indesigncs4無料ダウンロードフルバージョン
Metalsmithは、このリストの他のツールよりもカスタマイズ可能です

Metalsmithは、他の多くの静的サイト生成ツールとは異なるアプローチを採用しており、ほとんど何もしようとはしていません。基本的に、静的サイトジェネレーターは、一連のソースファイルを取得して操作し、静的サイト自体である一連の出力ファイルを生成します。

Metalsmithはこれを行うためのフレームワークを提供しますが、実際の操作はすべてプラグインに任せます。これらの操作は、テンプレートの利用、変数の置換、Markdownなどの言語の解釈など、通常は他の静的サイトジェネレーターですぐに使用できるものです。

Metalsmithを介して実行すると、すべてのソースファイルがJavaScriptオブジェクトに変換されます。つまり、プラグインによる操作は、基本的にこれらのJavaScriptオブジェクトのプロパティに対する変更です。たとえば、 マークダウン() MarkdownをHTMLに変換するプラグイン。

このアプローチの結果、Metalsmithは非常にカスタマイズ可能ですが、セットアップ中に、よりモノリシックなツールよりも少し多くの考慮が必要になります。 JekyllによるLiquidテンプレートエンジンの使用が気に入らないのですか?ここであなたはあなた自身を選ぶことができます。 Metalsmithページには、SassからCSSのコンパイルから単語数の計算まで、幅広い機能を提供するプラグインの長いリストがあります。

ピニオン化されていないフレームワークを好む場合、Metalsmithは可能な限りピニオン化されていません。

09。 ミドルマン

ミドルマンのホームページ

Middlemanは、さまざまなサイトを構築するのに十分な柔軟性を備えています

MiddlemanはJekyllとほぼ同時期にリリースされ、Ruby onRailsを使用したことのある開発者にとって最も馴染み深いものになるでしょう。デフォルトのテンプレートエンジンはERB(Embedded RuBy)であり、Haml、Sass、SCSS、Coff eeScriptのサポートが組み込まれており、さらに拡張してさらにサポートすることができます。

いくつかの主要な静的サイトジェネレーターはブログを重視していますが、ミドルマンはその野心をより広く設定し、あらゆるタイプのサイトを開発するための柔軟性を提供することを目指しています。それは非常に非ピニオンで拡張可能です。つまり、ブログだけを作成している場合は、ブログを構成する必要があるため、設定が少し複雑になります。

10.10。 スパイク

スパイクのホームページ

Spikeは、非常に単純なフレームワークを作成するように設計されています

スパイクは、積極的に維持されている間に大きな人気を博したルーツと同じチームによって構築されています。これは、webpack、Postcss、Reshape、Babelを利用して、JavaScript開発者に馴染みのあるエコシステムを提供します。 Metalsmithと同様に、Spikeは非常に単純なフレームワークを提供し、プラグインが変換を処理できるように設計されています。

NYCを生成する

Webデザインイベント ニューヨークを生成する 2019年4月24〜25日に戻ってきて、業界をリードする講演者の詰め込まれたスケジュール、1日のワークショップ、貴重なネットワーキングの機会を提供します。お見逃しなく。 今すぐGenerateチケットを入手してください

この記事はもともとクリエイティブなウェブデザイン誌に掲載されました ウェブデザイナー ここでWebデザイナーを購読する

関連記事:

  • あなたが知る必要がある7つのウェブデザインのレッスン
  • ウェブデザインの未来
  • 2020年以降にウェブデザイナーとして生き残る方法