静的サイトジェネレーター：初心者ガイド

Jamstack（JavaScript、API、およびMarkup）は、好みのWeb開発スタックとして急速に人気を博しています。 JamstackのWebサイト自体は、「ウェブサイトやアプリを構築するための最新の方法」と宣伝し、その優れたパフォーマンスを強調しています。

確かに、パフォーマンスは、セキュリティ、スケーラビリティ、および開発者エクスペリエンスの向上に加えて、重要な利点です。 Jamstack Architectureは、CDNを介して提供される事前にレンダリングされた静的ページを利用し、多様なソースからのデータを統合し、従来のサーバーとデータベースをマイクロサービスAPIに置き換えます。

静的サイトジェネレーター（SSG）は、これらの静的サイトを迅速かつ効率的に作成するための鍵です。

JavaScript、Ruby、Goなどのさまざまなプログラミング言語をサポートする多くのSSGが存在します。 包括的なリストはStaticSiteGenerators.netで入手できますが、Jamstack Webサイトは、名前またはGithubの星に基づいて、より管理しやすくフィルタブルリストを提供しています。 この記事は、プロジェクトに最適なものを選択するのに役立つ7つの人気のあるSSGとそのコア機能を強調しています。

キーテイクアウト：

SSGSは、静的サイトの作成を合理化し、パフォーマンス、セキュリティ、スケーラビリティ、および開発者エクスペリエンスを向上させます。 テンプレートエンジンを介してページを前処理するため、軽量で荷重が速くなります。

SSGSは、ヘッドレスCMSとシームレスに統合し、コンテンツの管理、データアクセスのAPIを提供します。これにより、非開発者は静的サイトの利点を保持しながらコンテンツを作成および更新できます。 人気のあるSSGには、ギャツビー、next.js、hugo、nuxt.js、Jekyll、Eleventy、およびVuepressが含まれます。それぞれが、サーバーレンダリングまたは静的なエクスポートされたJavaScriptアプリからVUEベースの静的Webサイトまで、ユニークな機能とユースケースを提供します。

静的サイトジェネレーターは何ですか？
• 従来のCMS（WordPressなど）は、クライアントリクエストに応じてWebページを動的に構築し、データベースからデータをアセンブし、テンプレートエンジンを介して処理します。 逆に、SSGSは、クライアントリクエストの前にテンプレートエンジンを介してページを前処理し、すぐに利用できるようにします。 静的資産のみがホストされているため、サイトは大幅に軽量で速いサイトになります。
従来のCMSとSSGの詳細な比較、およびSSGを使用する利点については、Craig Bucklerの記事「静的サイトジェネレーターを使用する7つの理由」を参照してください。 ただし、CMSのコンテンツ作成および管理機能は依然として価値があります。 これは、ヘッドレスCMSが登場する場所です。

• ヘッドレスCMSは、バックエンドを介してコンテンツのみを管理し、他のフロントエンドがデータにアクセスするためのAPIを提供します。 編集チームはおなじみのインターフェイスを利用でき、コンテンツはAPIを介してSSGSがアクセスできる多くのデータソースになります。 人気のあるヘッドレスCMSオプションには、Strapi、Sanity、Perpentulが含まれます。 WordPressは、ヘッドレスCMS機能用のREST APIも提供しています。 したがって、最新のジャムスタックツールは、コンテンツ管理システムの利点を保持しながら、静的にサービスにサービスされたWebサイトを作成できるようにします。

  gatsby

  Gatsbyは、Reactで構築され、データ操作のためにGraphQLを利用して構築された静的Webサイトとアプリを構築するための包括的なフレームワークです。 より深いダイビングについては、SitePointとThe GatsbyのWebサイトのドキュメントで「Gatsbyの始めましょう：最初の静的サイトを構築する」を探索してください。

  キーギャツビーの利点：

  最先端のWebテクノロジー（React、Webpack、Modern JS、CSS）を使用しています 多様なデータソースのための広範なプラグインエコシステム。

  静的なページ生成による簡単な展開とスケーラビリティ。

  プログレッシブWebアプリ（PWA）コードが組み込まれているジェネレーターと最適なパフォーマンスのためにデータ分割。
  • 画像の読み込みを最適化します
  多くのスターターサイトが容易に利用できます。
  • next.js
  • gatsby-image
  next.jsは、VercelによってReactに構築されたサーバーレンダリングまたは静的なエクスポートされたJavaScriptアプリを作成するための汎用性のあるフレームワークです。
  next.jsアプリを作成するには：
  2. 開発サーバーを起動：

  。

  でアプリにアクセスします

  next.jsは、アプリを構築およびカスタマイズするための広範なドキュメントを提供しています。 主な機能には次のものがあります

  最適なパフォーマンスのためのデフォルトのサーバー側のレンダリング。
  自動コードスプリッティング、ルーティング、およびホットリロード

  <code class="language-bash">npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"</code>

  画像の最適化、国際化、分析。

  <code class="language-bash">npm run dev</code>

  包括的なドキュメント、チュートリアル、および例

  ビルトインCSSサポート。http://localhost:3000

  多数のアプリの例。
  • ugo
  • 非常に人気のあるSSG（49K Github Starsを超える）であるHugoは、Goで書かれており、例外的な速度を誇っています。 その迅速なビルドプロセスにより、広範なコンテンツを持つブログに最適です。 ドキュメントには、簡単にセットアップするためのQuickStartガイドが含まれています
  • キーヒューゴ機能：
  • 速度のために最適化された（コンテンツレンダリング〜1ms）。
  • ページネーション、リダイレクト、複数のコンテンツタイプなどの組み込み機能。
  • 豊富なテーマシステム。
  マークダウンに代わるものとしてのショートコード。
  dart sassサポート（2020年12月以降）。
  4. nuxt.js

  Vue.jsに基づいて構築された高レベルのフレームワークであるNuxt.jsは、生産対応のWebアプリの作成を促進します。 サーバー側のレンダリング（ユニバーサル/同型モード）、静的サイト生成、およびシングルページアプリ（SPA）をサポートします。 セットアップは簡単です。 「Hello World」の例は、NUXT Webサイトで入手できます。

  キーnuxt.js機能：

  優れたパフォーマンス。

  50を超える利用可能なモジュールを備えた
  モジュラーアーキテクチャ。
  簡単な学習曲線（vue.jsに基づく）。
  統合されたVUEX州管理。
  自動コード分割。
  最新のJavaScriptコードのトランスピレーション、バンドル、および縮小。
  メタタグ管理。
  前プロセッサのサポート（SASS、LESS、STYLUS）
  • jekyll
  Jekyllのシンプルさと学習の容易さにより、人気のある選択肢（42K Github Stars）。 Rubyで構築され、コンテンツにMarkdownを使用してテンプレートにLiquidを使用して、ブログやテキストが多いWebサイトに最適です。 GitHubページに電力を供給し、無料のホスティングを提供します

  キージキル機能：

  シンプルさ。

  無料のgithubページホスティング。

  強力なコミュニティサポート。
  • eleventy
  6. JavaScriptがJekyllに代わるJavaScriptと見なされることが多い
  lownentyは、ゼロ構成アプローチと柔軟なテンプレートを備えたシンプルなネイティブJavaScript SSGです。 始めるためのリソースには、クレイグ・バックラーの「Getting of Eleventy」、Raymond Camdenの「11tyチュートリアル」、Tatiana Macの「Eleventyへの初心者のガイド」、およびEleventy Webサイトのドキュメントが含まれます。
  重要な機能：

  

  シンプルさとパフォーマンス。
  アクティブなコミュニティ。
  柔軟なテンプレート。
  • 高速ビルド時間。
  • vuepress
  7. VUEを搭載したSSGであるVuepressは、技術文書のために最適化されています。 そのデフォルトのテーマは、この目的に適しています。 現在の安定したバージョンは1.8.0ですが、バージョン2アルファはGitHubで利用できます。 Vue、Vueルーター、およびWebpackをレバレッジ化するスパをレバレッジングするスパとして機能します。

     vuepressをセットアップするには、

     ：

     を使用します create-vuepress-site

     詳細については、VuePressガイドを参照してください

     <code class="language-bash">npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"</code>

     キーVuepress機能：

     クイックセットアップおよびマークダウンコンテンツオーサリング。

     vue.js統合（MarkdownのVueコンポーネント、カスタムテーマ）
     • 高速読み込み（事前にレンダリングされた静的HTML、SPA機能）。
     • 組み込みの多言語サポート。
     • nuxt.js vs. vuepress：

     両方ともVue.jsベースであり、静的Webサイトを作成します。 nuxt.jsはより幅広い機能を提供し、アプリケーションに適しています。 Vuepressは、より簡単なプロジェクトのためにnuxt.jsのオーバーヘッドを避けて、静的なドキュメントWebサイトと簡単なブログの作成に優れています。 静的サイトジェネレーターの選択：

     SSGを選択するときは、これらの要因を考慮してください：

     プロジェクトの要件：

     必要な機能を特定します。
     動的能力：
     • 必要な動的機能のレベルを決定します ビルド/デプロイ時間：
     コンテンツボリュームのパフォーマンスを評価します
     • プロジェクトの種類：ブログ、個人のウェブサイト、ドキュメント、またはeコマースに適したSSGを選択します。
     • 開発者の親しみやすさ：快適な言語を使用してSSGを選択します。
     コミュニティとサポート：
     • リストされているすべてのSSGには、強力なコミュニティとリソースがあります。
     faqs：
     • ssgとは何ですか？テンプレートとコンテンツから静的HTMLページを生成するツールは、ダイナミックWebサイトと比較して、より速い負荷時間とセキュリティの改善を提供します。
     SSG対cms？
     cmssページは動的にページを生成しますが、SSGはサイト全体を事前に構築し、静的ファイルを作成します。 SSGは、頻繁に更新されたコンテンツに最適です。

     プログラミングの知識が必要ですか？

     基本的なプログラミングスキルはカスタマイズに役立ちますが、多くのSSGはユーザーフレンドリーです。
     • SSGSはブログや動的コンテンツを処理できますか？はい、テンプレートエンジンとデータソースを介してダイナミックコンテンツをサポートしています。
     SSGおよびSEO？
     • 静的サイトは、荷重時間が速いため、一般的にSEOに優しいです。 SSGSはメタデータとヘッダーの最適化を促進します

以上が静的サイトジェネレーター：初心者ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。