2020年の静的サイトジェネレータートップ10

Onat Arzoglu)(2020年8月27日)

はるか昔のインターネット時代では、ウェブサイトはプレーンなHTMLページのみで構成されていました。これらの静的なWebサイトにはスタイルがほとんどなく、すべてが完全にシンプルでした。

その後、Webは、コーディングやプログラミングの知識がほとんどまたはまったくないオンラインプレゼンスを望んでいる技術者以外のユーザーにも開かれました。それは、 WordPress Joomla Drupal が登場しました。これらは、ファイル、画像、複雑なコンテンツ、またはプラグインやテンプレートを見つけることができる機能を管理できます。

ただし、これらの種類の動的サイトを作成する方が便利なようですが、構築と読み込みに時間がかかるという犠牲が伴いました。カスタマイズの制限とセキュリティの問題があることは、あなたを悩ます可能性のある他の懸念のいくつかです。

そして、これらの問題のすべてが、静的サイトジェネレーターという将来のソリューションの準備を整えています。 !

静的サイトジェネレーターとは何ですか?

静的サイトジェネレーターは、サイトコンテンツを意味するソースファイルを取得し、それをテンプレートに適用して、の構造を生成するツールです。訪問者に配信する準備ができている純粋な静的サイト。

静的サイトジェネレーターは、手動でコーディングされた静的サイトとCMS機能の間の貴重な妥協点を提供します。これにより、高度な生産性と効率を備えた最新のフレームワークとワークフローを備えたWebサイトを構築できます。

前述のように、静的サイトはWebの開始以来私たちの世界に存在していました。しかし、静的サイトジェネレーターはここ数年で登場し、静的サイトの機能を拡張しました。

3つの主な利点を見て、静的サイトと静的サイトジェネレーターの特別な特性を理解してみましょう。

静的サイトジェネレーターを使用する理由

速度

静的サイトを持つことの最大の利点の1つは、間違いなく速度です。静的サイトジェネレーターは、リアルタイムではなくビルド時にWebページを生成します。これは、静的ページがデータベースクエリが返されるのを待たず、オンデマンドで構築されないことを意味します。この利点のため、静的サイトは非常に高速です。ほとんどのコンテンツ管理システムは、高度に最適化されたシステムであっても、静的サイトの速度に近づくのに問題がある可能性があります。

セキュリティ

静的サイト自体は、作成されたばかりなのでハッカーに強いです。 HTML、CSS、およびJavaScriptの。攻撃者が悪用する可能性のあるセキュリティ上の欠陥を引き起こす可能性のあるデータベースや複雑なソフトウェアはありません。簡単に言うと、静的サイトにはハッキングするバックエンドがありません。たとえ持っていても、ハッカーはサーバーから余分なものを取得することはありません。サーバーに含まれるものはすべてユーザーに提供されます。

柔軟性

これは主にレベルによって異なります。 Web開発者としての能力はありますが、静的サイトジェネレーターを使用すると限界に自由を感じることは明らかです。コンテンツとWebデザインを100%制御できます。これにより、実装したいものをすべて使用して、まったく新しいサイトを簡単に作成できるようになります。静的サイトジェネレーターを使用すると、サイトに加えたすべての変更のコードを調べて、バージョン管理システムのすべての変更を確認できます。

以降、静的サイトジェネレーターは JAMstack とそのコミュニティは近年、非常に幅広い選択肢から1つを選ぶのが非常に難しい場合があります。

それが私たちが見たかった理由です。

  1. Hugo
  2. Jekyll
  3. Gatsby
  4. Hexo
  5. Next.js
  6. Nuxt.js
  7. 11
  8. Docusaurus
  9. Scully
  10. Gridsome

ヒューゴ

ウェブサイトの構築を待つ人はいません。ヒューゴのモットーはそうかもしれません。すべてのマークアップとテンプレートを組み合わせて、わずか数ミリ秒でサイトを構築できるためです。

Hugoは、他のサイトジェネレーターとは異なるGoogleのGo言語で構築されています。パスは非常に単純で、構成の必要性はほとんどなく、コアバイナリ以外の依存関係はありません。 Markdownで使用できるショートカットを利用して、柔軟性と生産性を向上させることができます。

gohugoio / hugo

A Goのbep、spf13、および友人による愛情を込めて構築された、高速で柔軟な静的サイトジェネレーター。ウェブサイト|フォーラム|…

github.com

JEKYLL

おそらく最も人気のある静的サイトジェネレーターであるJekyllについて言及するのを忘れるのは間違いです。

Ruby言語で構築され、考慮されていますブロガーフレンドリーとして。これは、データベースやコメントのモデレートを気にせずにコンテンツのみに集中できるためです。

Githubと緊密に統合されているため、JekyllサイトをGithubに無料で簡単にデプロイできます。 Jekyllは、WordPressやDrupalなどのプラットフォームからの簡単な移行オプションを提供します。コンテンツをインポートして、パーマリンク、カテゴリ、投稿、カスタムレイアウトでサポートできます。

jekyll / jekyll

Jekyllは、個人、プロジェクト、または組織のサイトに最適な、シンプルでブログ対応の静的サイトジェネレーターです。考えてみてください…

github.com

GATSBY

最も人気のあるオプションの1つとして、Gatsbyは静的サイトジェネレーターベースですReactで。これにより、Webpack by Reactベースのコンポーネントを利用して、魅力的なWebサイトを作成できます。それに加えて、Gatsbyのビルド速度は、静的サイトに必要な複雑な機能を処理するのに十分な速度です。

Gatsbyのもう1つの優れた点は、そのエコシステムです。具体的には、公式サイトに2000以上のプラグインが掲載されています!これらは、データソース、カスタム機能、建物の最適化など、さまざまなものを処理するためにすぐに使用できます。ウェブサイトを簡単にカスタマイズするために必要なものは何でも見つかると確信しています。

gatsbyjs / gatsby

GatsbyはReactに基づく無料のオープンソースフレームワークで、開発者が非常に高速なウェブサイトやアプリを構築するのに役立ちます…

github.com

HEXO

HexoはNode.jsを利用しており、強力なフレームワークでブログに焦点を当てています。非常に大規模なWebサイトでも非常に高速なレンダリングを提供します。すべてのGitHubフレーバーのMarkdownオプションとほとんどのOctopressプラグインがHexoでサポートされています。

ブログやサイトをGitHubPages、Heroku、その他のサイトに転送するための1つのコマンド展開を提供します。ブログサイトをHexoにインポートする場合は、優れた移行オプションもあります。

hexojs / hexo

高速でシンプル& Node.jsを利用した強力なブログフレームワーク。ウェブサイト|ドキュメント|インストールガイド|…

github.com

NEXT.JS

Next.jsは、Reactベースの静的サイト生成フレームワークです。静的サイトのみでなく、サーバー側レンダリング(SSR)アプリケーションにも使用できます。 Reactコミュニティのこの複数の出力機能により、引き続き人気が高まっています。

これにより、開発者は、特に最初のページの読み込みとSEOの観点から、パフォーマンスの高いサイトと静的にエクスポートされたJavaScriptアプリケーションを作成できます。自動コード分割、単純なクライアント側ルーティング、Webpackベースの開発環境、Node.jsサーバーの実装など、Next.jsの機能のいくつかに言及するとよいでしょう。

vercel / next.js

https://nextjs.org/learnにアクセスして、Next.jsの使用を開始します。 https://nextjs.org/docsにアクセスして、完全な…

github.com

NUXTを表示します。 JS

Nuxt.jsとNext.jsの類似点は名前だけではありません。それらの目的も同じ方向にあります。 Nuxt.jsは、Next.jsのようなオールインワンソリューションを提供するVueを搭載した高レベルの生成フレームワークです。 SSR、静的Webサイト、または単一ページのVueアプリケーションの作成を決定できます。

Nuxt.jsには、サーバーレスでありながら、メインHTMLを含むすべてのページの事前レンダリング機能もあります。これにより、Webサイトの高速化、SEOパフォーマンスの向上というメリットを享受できます。

Nuxt

Dismiss GitHubには、5,000万人を超える開発者が協力しています。それらに参加して、独自の開発チームを成長させましょう…

github.com

ELEVENTY

ランディングページでわかるように、Eleventyはそれ自体をより単純な静的サイトジェネレーターと見なしています。それには他にもいくつかの理由がありますが、おそらく主な理由はJavascriptで構築されているだけです。つまり、ReactやVueなどのフレームワークに精通している必要はありません。

もう1つは、その使用機能です。 Eleventyは、非常に柔軟なテンプレートシステムを使用して、複数のテンプレート言語を操作できます。さらに、サポートされているすべてのテンプレート言語を1つのプロジェクトで使用できます。

Eleventyは、柔軟性と効率性を備えた忠実なコミュニティを開発してきました。 2020年には間違いなく成長しているプレーヤーです。

11ty / 11ty

よりシンプルな静的サイトジェネレーター。ジキルの代替品。 JavaScriptで書かれています。テンプレートのディレクトリを変換します…

github.com

DOCUSAURUS

Docusaurusは、特にドキュメントに焦点を当てた静的サイトジェネレーターです。 Facebookオープンソースの一部として2017年に立ち上げられましたが、2020年にはすでに注目を集めています。Docusaurusは、オープンソースのドキュメントWebサイトを構築するための非常に簡単な方法を提供します。 React.jsで構築されており、コミュニティから大きな注目を集めています。

ナビゲーションツールやページのカスタマイズなどのコア機能を提供する一方で、Docusaurusはドキュメントのバージョン管理も行っており、ドキュメントの同期を維持できます。プロジェクトがリリースされます。そのシンプルさにより、優れたドキュメントの作成に集中しながら、サイトを非常に高速に公開できます。

facebook / docusaurus

Docusaurus We Docusaurusv2に懸命に取り組んでいます。 Docusaurusを初めて使用する場合は、v1の代わりに新しいバージョンを使用してみてください…

github.com

SCULLY

Scullyは、Angularで構築された唯一の静的サイトジェネレーターです。そのため、JAMStackの呼び出しに対するAngularの回答と見なされています。 Angularアプリを作成すると、ScullyはすべてのページをプレーンなHTMLとCSSで事前レンダリングできます。

静的サイトを構築しながら、Angularの開発を継続することを目的としています。 Scullyを既存のAngularプロジェクトに追加するために必要なコマンドは1つだけです。これは2019年後半にリリースされた非常に新しい静的サイトジェネレーターですが、Angular開発に興味がある場合は、まだベータ版と見なされていることを念頭に置いて、ぜひ試してみてください!

scullyio / scully

最速のAngularアプリを構築するための最良の方法。 Scullyは、Angularプロジェクト向けの静的サイトジェネレーターです…

github.com

GRIDSOME

Gridsomeのすべての構造は、 Vue。シンプルで安全な展開、プログレッシブWebアプリ(WPA)、SEOサポートなどのさまざまな優れた機能を提供します。また、GraphQLデータレイヤーを備えているため、多くのデータソースからシングルページアプリケーションや静的サイトを非常に簡単かつ迅速に構築できます。

Reactに組み込まれているGatsbyと同様に、Gridsomeにはすぐに使えるコレクションがあります。使用するテンプレートとプラグイン。そのライブラリはギャツビーのように便利ではないように思われるかもしれませんが、2年の歴史を考えると問題ないと思います。これは時間の経過とともに改善される可能性が高く、より多くの人がGridsomeを使い始めます。

gridsome / gridsome

Gridsome isヘッドレスCMS、ローカルファイル、または…

github.com

最終的な考え

スピードと柔軟性を備えながら、物事をシンプルに保ち、コストを節約したい場合、静的サイトジェネレーターは、Webサイトを構築するための優れた選択肢であり、Webが戻る方法のようです!

適切なものを選択するのは簡単ではないかもしれませんが、少なくとも上記のオプションをチェックして、ニーズと能力に最適なものを見つけることから始めることができます。

フォームと静的サイト

Getform は、オンラインWebフォーム用のフォームバックエンドプラットフォームおよびフォームエンドポイントサービスです。上で述べたように、その性質上、静的サイトジェネレーターでコンタクトフォームを構築することは、そのバックエンドレス構造のために不可能です。そこでGetformが登場します。 Getformは、静的なサイトの連絡先フォームを作成するのに最適な方法です。

必要なのは、Getformで一意のフォームエンドポイントを作成してHTMLページに貼り付けることです。残りは、Googleが処理します。カスタムメール通知、自動応答、ファイルアップロードサポート、Zapier & Webhook統合、Google reCaptchaによる高度なスパムフィルタリングなどの追加機能により、フォームを完全に管理できます。 ここで登録して開始できます。

以下に、Hugoでお問い合わせフォームを簡単に設定する方法を示すために作成したサンプルチュートリアルがあります。 、Jekyll、Gatsby、Eleventy、Hexo、Gridsome!それらをチェックして、最初の静的サイトジェネレーターの連絡フォームを設定できます。

HugoWebサイトに連絡フォームを追加する方法

Hugo静的Webサイトに連絡フォームを設定します。 Getformで数分。

中。com

Getformを使用してJekyllサイトへの連絡フォームを設定する方法

Jekyllは、ルビーの宝石としてバンドルされている解析エンジンです。動的コンポーネントから静的Webサイトを構築するために使用されます…

blog.getform.io

ギャツビー連絡先の構築Getformを使用したフォーム

GatsbyJSは、GraphQLを使用して任意のデータのコンテンツを保存およびアクセスするReactベースのプログレッシブWebアプリフレームワークです…

blog.getform.io

Getformを使用した11tyお問い合わせフォーム

Getformを使用してお問い合わせフォームを設定し、Vercelでデプロイする11tyウェブサイトの設定方法を学びます。

blog.getform.io

Hexoサイトに連絡フォームを追加する方法

Hexoは、Node.jsを利用した、高速でシンプルな&強力なブログフレームワークです。 Hexoのように作成された静的サイトの利点は…

blog.getform.io

セットアップ方法Getformを使用したGridsomeの連絡フォーム

は、静的Webサイトを構築するための無料の&オープンソースVue.jsベースのJAMStackフレームワークです&デフォルトで高速なアプリ…

blog.getform.io

静的サイトへのGetformの設定についてサポートが必要な場合は、お気軽にご連絡ください [email protected] までお問い合わせください。サポートさせていただきます。

この投稿が気に入った場合は、共有してフォローすることを忘れないでください。 Facebook および Twitter で、ブログの最新情報を入手してください。