静的ウェブサイトジェネレーター（SSG）は、過去10年間でますます人気が高まってきました。この記事では、開発者に優しいビルドプロセス、展開の容易、パフォーマンスの向上、セキュリティの向上がどのようにウェブサイトに利益をもたらすかについて説明します。まず、「静的ウェブサイトジェネレーター」という言葉の意味を明確にしましょう...
キーポイント
静的なWebサイトとは何ですか？
あなたが構築した最初のウェブサイトを思い出します。ほとんどの開発者は、単一のHTMLファイルに含まれる一連のページを作成することから始めます。各ページは、画像、CSS、一部のJavaScriptコードなどのリソースを呼び出します。これらのファイルは、Webサーバーを必要とせずにファイルシステムから直接起動することができます。当時はすべてが簡単でした。しかし、ウェブサイトがより大きく複雑になるにつれて、困難が続きます。ナビゲーションを考慮してください。すべてのファイルで類似している場合がありますが、新しいページを追加するには、他のすべてのページを更新する必要があります。フォルダー構造が進化するにつれて、CSSや画像への言及でさえ不器用になる可能性があります。サーバー側のインクルージョンやPHPなどのオプションを検討している可能性がありますが、より単純なオプションはコンテンツ管理システム（CMS）です…
コンテンツ管理システムとは何ですか？
CMSは通常、管理コントロールパネルを提供します。これらのパネルにより、著者はバックエンドデータベースに保存されているコンテンツを作成できます。訪問者がURLを要求する場合、CMSは次のとおりですテンプレート。
これはほぼ瞬時に行われます。テンプレートには、ナビゲーション階層に基づいてメニューを生成するコードを含めることができます。すべてがうまくいき、10人に4人以上がPHP/MySQLに基づいてオープンソースのWordPress CMSを使用してWebサイトを管理することを選択しました。残念ながら、CMSは一連のさまざまな問題をもたらします。-CMSの仕組みに従う必要があります。カスタムテキストまたはコンポーネントの追加は面倒です。ソフトウェアのアップグレードまたはデータベースの障害により、Webサイトがダウンする可能性があります。
静的Webサイトジェネレーターとは何ですか？
SSGは、両方の利点を保持しながら、手動エンコードと完全なCMSを使用する静的Webサイト間のトレードオフです。基本的に、テンプレートなどのCMSのような概念を使用して、静的HTMLページに基づいてWebサイトを生成できます。コンテンツは、データベース、マークダウンファイル、API、または実用的なストレージの場所から抽出できます。サイト生成は、開発マシン、ステージングサーバー、またはコードリポジトリの変更をプッシュするときにサービスを使用して構築することができます。生成されたHTMLファイルとその他のリソースは、リアルタイムWebサーバーに展開されます。 「静的」という用語は、「変更されていない」という意味ではありません。 SSGはページを1回ビルドしますが、CMSは要求されるたびにページを構築します。最終結果は同じであり、ユーザーは違いを知ることはありません。関連する概念は、「ヘッドレス」または「分離」CMSです。これらのシステムは、WordPressなどのインターフェイスを使用してコンテンツ管理を処理しますが、他のシステムがREST APIまたはGraphQL APIを介してデータにアクセスできるようにします。したがって、EleventyなどのSSGは、内部サーバーから抽出されたWordPressページコンテンツを使用して静的Webサイトを構築できます。生成されたHTMLファイルはWebサーバーにアップロードできますが、WordPressのインストールは組織外からのパブリックアクセスを必要としません。 Jamstack（JavaScript、API、およびタグ付け）という用語は、静的サイトに関連する側面でも使用されます。これは、静的ファイルを生成するが、より複雑なインタラクティブ性の作成を可能にするフレームワーク、サーバーレス関数、および関連するツールの台頭を指します。人気のある静的ウェブサイトジェネレーターには、Jekyll、Eleventy、Gatsby、Hugo、Metalsmithが含まれます。 SSGはほとんどの言語で利用できます（詳細については、staticgenを参照）。 next.jsなどのフレームワークは、可能な場合は静的にページをレンダリングしますが、必要に応じて開発者がサーバー側のコードを実行できるようにします。 SSGを使用することの利点を見てみましょう...
1 CMSは、特定のフィールドを持つデータベースにバインドされているため、オプションを制限します。特定のページにTwitterウィジェットを追加する場合は、通常、プラグイン、ショートコード、またはカスタマイズ機能が必要です。静的サイトでは、ウィジェットは単にファイルを直接挿入したり、パーツ/フラグメントを使用したりできます。 CMSによって課される制限の対象ではないため、制限はまれです。
2
ほとんどのCMSアプリケーションは、組み込みまたはプラグイン駆動型のキャッシュシステムを提供して、ページが可能な限り生成され、再利用されるようにします。これは機能しますが、キャッシュされたページの管理、検証、再生のオーバーヘッドは残っています。静的サイトは、有効期限が切れる必要のないPrecacheページを作成できます。展開前にファイルをスケールダウンすることもできます。静的サイトは、テンプレートのようなテンプレートを使用して、常にCMS駆動型バージョンよりも優れたパフォーマンスを発揮します。
3典型的なWordPressのインストールには次のことが必要です。-ubuntuやcentosなどの適用可能なオペレーティングシステム; - apacheやnginxなどのWebサーバー; - 関連する拡張機能とWebサーバー構成を備えたPHP; - WordPressアプリケーション; - 必要なプラグイン; - テーマ/テンプレートコード。
これらの依存関係はインストールして管理する必要があります。 WordPressは他のアプリケーションよりも少ない労力を必要としますが、単一の更新は依然として混乱につながる可能性があります。静的なWebサイトジェネレーターは、多くの依存関係を必要とする場合がありますが、開発者のPCで実行でき、生産サーバーに展開されません。 SSGは、任意のWebサーバーでホストできるクライアントHTMLファイルと関連するリソースを生成します。他のものをインストール、管理、維持する必要はありません。
4 CMSは複雑で、多くの可動部品と障害ポイントがあります。 WordPressサイトをしばらく実行した後、ほぼ確実に恐ろしい
"がデータベース接続を確立できないエラーに遭遇します。予期しないCMSの問題は、サーバーの過負荷、クラッシュデータベース、またはアクティブな接続を制限する可能性のある突然のトラフィックサージに起因する可能性があります。静的サイトを提供する作業は少なくなります。多くの場合、サーバーはフラットファイルを返すだけである必要があるため、トラフィックのニーズに基づいてスケーリングが簡単になります。 Webサーバーをクラッシュさせたり、APIをオーバーロードすることは可能ですが、これには非常に多くの同時リクエストが必要です。
5誰かがあなたのウェブサイトを攻撃したいと思うかもしれない多くの理由があります。トラフィックハイジャック、悪意のある広告、リンク、信頼性のスプーフィング、およびマルウェアホスティングはすべて、不正なユーザーがお金や賞賛を受け取ることができます。 CMSは多くの攻撃ベクトルを開きます。最も明白なのは、ログイン画面です。最も弱いユーザーパスワードと同じくらい安全です。サーバー側コードを実行しているページは、連絡先フォームを介したスパムなど、潜在的な脆弱性も提供します。誰かがアクセスしたことは明らかではないかもしれません。静的サイトは、サーバー側の機能をほとんど必要としない場合があります。いくつかのリスクは依然として存在しますが、以前ほど問題があることはめったにありません。-誰かがSSHまたはFTPを介してサーバーにアクセスして、ページを改ざんしたり、ファイルをアップロードしたりできます。ただし、通常、変更を簡単に確認し、サイト全体を消去してから再び回復します。コード - フォームメールプログラム。優れたセキュリティ慣行、COR、CSPが役立ちます。
6ハンドオーバーから数分以内にウェブサイトを破壊するクライアントのために魅力的なCMSテーマを何週間も費やすことができます！ CMSを使用することは必ずしも簡単ではなく、コンテンツエディターにかなりのパワーを提供します。プラグインのインストールなどのアクセス許可をロックできますが、これにより、誰かがフォントの変更、競合する色の導入、劣った写真の追加、またはレイアウトの速報を防ぐことはできません。静的サイトは、選択に応じて制限または柔軟性があります。 Markdownまたは同様のフラットファイルを使用する場合、エディターは間違いを犯したり、ページスタイルに悪影響を与える可能性は低いです。一部の人々は、CMSコンテンツ管理パネルを見逃しますが、1。既存のCMSを使用して、2つのデータをクリーンアップします。
7バージョンのコントロールとテスト データベースデータは揮発性です。 CMSを使用すると、ユーザーはいつでもコンテンツを追加、削除、または変更できます。サイト全体を拭くには、数回クリックするだけです。データベースをバックアップできますが、これを定期的に行ったとしても、データが失われる可能性があります。通常、静的サイトはより安全です。コンテンツは以下で保存できます。-フラットファイル：Gitまたは同様のシステムを使用してバージョン化できます。古いコンテンツは保存され、変更はすぐに元に戻すことができます - プライベートデータベース：サイトが生成されたときにのみ必要なので、パブリックサーバーで公開する必要はありません。
クライアントのPCでもサイトをどこでも生成してプレビューできるため、
テストも容易になりました。さらに努力すると、展開システムを実装してサイトをリモートで構築し、リポジトリ、レビュー、承認に新しいコンテンツをプッシュした後、ライブサーバーを更新できます。したがって、静的サイトの世界では、すべてが美しいです。うん？私のフォローアップ記事「静的Webサイトジェネレーターを使用しない7つの理由」をお読みください。静的なWebサイトジェネレーターを使用してサイトを構築するためのデモンストレーションについては、次のことを参照してください。 静的ウェブサイトジェネレーター（FAQ）のFAQ静的Webサイトジェネレーターを使用することの主な利点は何ですか？ 静的ウェブサイトジェネレーターは複数の利点を提供します。まず、データベースを必要とせず、攻撃のリスクを軽減するため、セキュリティが強化されています。第二に、パフォーマンスの向上を提供します。サイトは事前に構築されているため、より速く読み込まれ、ユーザーエクスペリエンスが向上します。第三に、それらは費用対効果が高い。静的サイトをホストすることは、通常、動的サイトよりも安価です。最後に、コンテンツのバージョン制御を提供し、必要に応じて変更を追跡して以前のバージョンに復元できるようにします。
静的Webサイトジェネレーターは、Webサイトのすべてのページを事前に構築することにより、Webサイトのパフォーマンスを向上させます。これは、ユーザーがページを要求する場合、サーバー側の処理なしにサービスをすぐに提供できることを意味します。これにより、Webサイトの読み込み時間が大幅に短縮されるため、ユーザーエクスペリエンスが高速でスムーズになります。
はい、大規模なWebサイトに静的なWebサイトジェネレーターを使用できます。ただし、サイトのサイズが大きくなると、ビルド時間が増加する可能性があります。これは、ジェネレーターが各ページを事前に構築する必要があるためです。それでも、パフォーマンスの利点は、特にコンテンツが頻繁に変化しないサイトで、より長いビルド時間を上回ることがよくあります。
静的サイトは通常、動的サイトよりも安全です。これは、攻撃の一般的なターゲットであるデータベースまたはサーバー側の処理に依存していないためです。ただし、他のWebサイトと同様に、静的サイトはすべてのタイプの攻撃に対して免疫がないため、Webセキュリティのベストプラクティスに従うことが重要です。
静的Webサイトジェネレーターを使用するには、通常、HTML、CSS、およびJavaScriptの知識が必要です。一部のジェネレーターは、RubyやPythonなどの特定のプログラミング言語についても知る必要があります。さらに、Gitなどのコマンドラインおよびバージョン制御システムの使用に精通する必要がある場合があります。
はい、ヘッドレスCMSを備えた静的なWebサイトジェネレーターを使用できます。これにより、CMSでコンテンツを管理し、ジェネレーターを使用してサイトを構築できます。これは、CMSの利点と静的サイトのパフォーマンスとセキュリティの利点を提供する強力な組み合わせです。
適切な静的Webサイトジェネレーターを選択すると、特定のニーズとスキルに依存します。構築された言語、使用しているテンプレートシステム、ビルド速度、コミュニティサポート、使用している他のツールとの互換性などの要因を考慮してください。
はい、eコマースに静的なWebサイトジェネレーターを使用できます。ただし、静的サイトにはバックエンドが組み込まれていないため、サードパーティサービスを使用して、カート機能や支払い処理などの側面を処理する必要があります。
人気のある静的なウェブサイトジェネレーターには、Jekyll、Hugo、Next.JS、Gatsby、Hexoが含まれます。それぞれに独自の利点と短所があるため、ニーズに最適なジェネレーターを選択することが重要です。
静的ウェブサイトジェネレーターは静的コンテンツに最適ですが、サードパーティサービスの助けを借りて動的コンテンツを処理できます。たとえば、APIを使用して動的なデータを抽出したり、コメントにDisqusなどのサービスを使用したり、フォームにFormspreeなどのサービスを使用したりできます。
以上が静的サイトジェネレーターを使用する7つの理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
