WordPressから静的サイトジェネレーターに移行する方法

この記事では、WordPress Webサイトを強力なツールを使用して静的Webサイトに簡単に変換する方法を導きます。 WordPressから静的Webサイトジェネレーターに移行するプロセスに焦点を当て、ヘッドレスCMSを使用するなど、いくつかの代替案を調査します。なぜこの種の移行を実行する必要があるのですか？なぜなら、ウェブサイトの速度を大幅に向上させ、検索エンジンのランキングを改善し、ホスティング料金を削減（または削除する）、セキュリティを大幅に向上させることができるからです。

キーポイント：

WordPressから静的Webサイトジェネレーターへの移行は、ホスティングコストとメンテナンスワークロードを削減しながら、Webサイトの速度、セキュリティ、SEOのパフォーマンスを大幅に向上させることができます。
• Gatsby.jsなどの静的なWebサイトジェネレーターは、動的なWordPress Webサイトを静的Webサイトに変換することができ、ページの読み込み速度の低減、管理の簡素化、セキュリティの改善など、多くの利点をもたらすことができます。
• WordPressの移行プロセスには、静的Webサイトジェネレーターの設定、WordPressの記事/ページのマークダウンへのエクスポート、静的リソースの生成が含まれます。 Mastering ReactとGraphQLの知識は、カスタマイズとデータクエリに役立ちます。
• 静的Webサイトは、ハッキングできるデータベースがなく、WordPress管理パネルに潜在的なセキュリティの脅威が展開された静的ページに影響しないため、より安全です。
• ヘッドレスCMSを使用して静的ファイルを生成し、リポジトリに同期してプロセスを自動化できます。 WordPressは、静的WebサイトのヘッドレスCMSとして使用できますが、他の最新のコンテンツ管理方法も考慮することができます。
• 静的Webサイトの利点：

大幅な速度の改善が唯一の利点ではありません。動的なWordPress（WP）Webサイトを静的Webサイトに変換することも、次の利点をもたらすことができます。

• ページの読み込み速度を削減します：ページは実行時に前処理する必要はありません（ユーザーがリクエストする場合）、コンテンツをデータベースから抽出する必要はありません。したがって、Webサーバーの応答速度は大幅に加速されます（10倍速く、またはそれ以上）。
• CDNを使用したレイテンシを減らす：これらの静的ページを分散コンテンツ配信ネットワーク（CDN）に直接展開できます。これにより、世界中の応答時間が大幅に短縮されます。
• 簡略化された管理：ワークフローをセットアップすると（この記事で説明します）、メンテナンス、WPのアップグレード、またはサーバーの更新に余分な労力を費やす必要はないことがわかります。
• セキュリティをサブトルに強化する：https out of bock、静的ページのみが、問題のあるPHPバージョンや時代遅れのWordPressで実行されず、Apacheで実行されることもありません。
• SEOの改善：Googleはコンテンツを評価するだけでなく、コンテンツへのアクセスの利便性とセキュリティも評価します。これは実際、今日でも効果的な数少ないSEOメソッドの1つです。検索エンジンの結果ページで、より速く、より安全なWebサイトのパフォーマンスが向上します。
• 心配のない：PHPをアップグレードする必要はなく、WPの未収のセキュリティの脆弱性について心配する必要はなく、Linuxサーバーを管理する必要もありません。展開したら、コーヒー/ビール/紅茶/高麗人参を簡単に楽しむことができます。

「WordPressは安全ですか？」 WordPress開発者は、長期的なサポート（LTS）はまだ非常に不足していますが、優れた基準とセキュリティ慣行に従います。ただし、そのアーキテクチャ自体のために、WPセキュリティチームの制御を超えて、直接責任を負うものがいくつかあります。

サーバーを更新します

WPアップデートのインストール
PHPアップデートのインストール
プラグインとテーマの更新をインストールする（利用可能な場合）
WPとPHPへの主要なアップグレードを定期的に管理する（LTSなし）
• これはすべて継続的なプロセスであり、プラグインは些細な脅威ではなく、特に維持されていないプラグインです。これらのプラグインは、多くの場合、WordPressのインストールを制御するために攻撃者が悪用できるセキュリティの脆弱性を備えています。これが、WordPressの商業的にホストされているバージョンであるWordPress.comのいくつかのプラグインに何年も費やしてきた理由です。かなりの量の意識的な努力があれば、wordpress
は

安全です。これらは優れた開発者が入れるべき努力であると主張することができますが、WP Webサイトを静的Webサイトに変換しながら、アーキテクチャを再定義し、ほぼ同時に排除することなく永遠に排除することにより、これらの負担を緩和できることも確実です。仮想現実は、セキュリティの脅威になる可能性のあるすべての潜在的なポイントです。結局のところ、攻撃者は通常のHTML、CSSファイル、フラット画像であまり役に立たない。ただし、クロスサイトスクリプトとクロスサイトリクエストの偽造にまだ注意する必要があります。 ？‍♂ ‍♂️

準備：静的Webサイトジェネレーターが利用可能

出典：netlify

記事「100 Jamstack Tools、API、Services service Your Webサイト」で静的Webサイトジェネレーター（SSG）を簡単に確認しました。ここではカバーされていないSSGが多数あります。情報。一部のSSGは、WP2StaticなどのWordPressを特に標的としていますが、より一般的なSSG、つまりGatsby.js— "Reactベースのフリーオープンソースフレームワークに焦点を当て、開発者がスーパーファーストWebサイトとアプリケーションを構築するのに役立ちます。」 。

WordPressの移行

プロセスが非常に簡単であることを願っていますが、インストールした既存のプラグインなど（プラグインの方が少ない）など、より退屈で時間のかかるものがいくつかあることを認めなければなりません。記事を翻訳するには（シンプルな方が良い）。これは、特定の状況に合わせて調整する必要があるガイドと考えてください。基本的に、次のことを行います

gatsby.js

を設定します

WPの記事/ページをマークダウンとしてエクスポート
静的リソースを生成
3. ステップ1：フォークギャツビーランチャー

最初にギャツビーアドバンストランチャーまたはギャツビーマテリアルランチャーをフォークします。どちらもGatsby.JSプロジェクトのユニバーサルスターターを調整し、2番目のランチャーは「意図的な」材料デザインテンプレート（DEMO）を使用します。

これらのランチャーは、完全に機能的な反応駆動型プログレッシブWebアプリケーション（PWA）を直接提供できます。これらはすべて既に含まれています。

超高速読み込み時間（事前にレンダリングされたHTML、JS自動ブロック読み込み）

Markdown Article（コード構文の強調表示、埋め込みYouTubeビデオ、埋め込みツイート）

• ページネーション、タグ、カテゴリ
• disqus support
• netlifycmsサポート
• SEO機能（Google Analytics Support、SiteMap、robots.txt Generation、Meta Tags、Schema.org JSON-LD Google Rich Snippets用、Facebook/Google/PinterestのOpengraph Tags、TwitterカードTwitterタグ）
>
• 同期フィード（rss）
• ソーシャル機能（Twitter、LinkedIn、およびTelegram Share Bottons; FacebookおよびReddit Share/Shareカウント）
• 開発ツール（eslint、preattier、sermolint、githubページおよびnetlifyの展開サポート、Codeclimate file and Badges）
• 待って！
CDNに正常に移行して展開した後、あなたのウェブサイトは非常にうまく機能する必要があるため、Google Lighthouseでの監査は最良の結果を報告する必要があります。

インストールと構成

最初にGatsby.jsとnode.jsをインストールする必要があります。これにより、Gatsby CLIおよびnode.jsパッケージマネージャーNPMを使用できます。 node.jsについては、ダウンロードしてインストールするだけで、gatsby.jsについては、開発環境の開始またはセットアップを参照してください。この問題を解決したら、これがプロジェクトを開始する方法です（Gatsby-Material-Starterもクローンできることを忘れないでください）：

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-advanced-starter
npm run develop # 或 gatsby develop

高度な（例）および材料（例）ランチャーの構成はほぼ同じです。

前述のように、Netlify CMSはボックスからサポートされています。以下に示すようにstatic/admin/config.ymlを編集することで有効にすることができます：

backend:
  name: github
  branch: master
  repo: your-user/your-repo

Netlify CMSをGitLabまたはBitBucketと統合することもできます（BackEnd Configurationを参照）。

ステップ2：WordPressの記事をエクスポート

場合によっては、すべての記事とページを含むエクスポートされたXMLファイルをExitWPを使用してマークダウンファイルに変換するだけです。ただし、WPのセットアップと微調整に応じて、このプロセスにはいくつかのトリックが必要になる場合があります。 Tania Rasciaは、WordPressからGatsbyに移行する時代の終わりThe End of Anの記事で、彼女がこのプロセスをどのように処理するかについての適切な概要を提供します。

ステップ3：ページを構築します

gatsby.jsがReactアプリケーションであることを考えると、React開発者になるか、少なくとも経験豊富なJavaScriptプログラマーがGatsbyをタイトなカスタマイズにするのに大いに役立つでしょう。また、特にこれらのページがMySQLデータベースで提供されなくなった場合、クエリとマイニングデータの場合、一部のGraphQLを理解することは非常に便利です。幸いなことに、gatsby.jsのドキュメントは非常によく発達しています。ここにいくつかの有用なリソースがあります：

データを介してプログラムでページを作成します

ページを作成および変更
データを介してプログラムでページを作成します
• ページ生成が終了したので、ほぼどこにでもリソース（静的ページと画像）を安全に配置できます！ 100のJamstackツール、API、およびサービスのホスティングセクションをご覧ください。サイトのアイデアをサポートし、自動パイプラインを使用して無料の静的Webサイトをホストする記事をご覧ください。

安全性、一度に所定の位置に！ WordPressの管理者がインターネット上にいる場合でも（.htpasswdファイルはパッチがかけられていなくても、WPのバックアップが改ざんされていても、これらのいずれもあなたが持っている静的に影響しない場合でも、展開されたページ

、フロントエンドがそれから「分離」されているためです。誤解しないでください。ファイアウォールの後ろでローカルLAN（LAN）でWordPressを実行していても、定期的に更新する必要があります。主要かつ突然のPHPまたはWPのアップグレードにより、私のウェブサイトは、私が認めようとしている以上に改ざんしたり、作業をやめたりするのを見てきました。ただし、ウェブサイトが静的な場合、これらのセキュリティの問題は存在しなくなります！

頭を失いました：ヘッドレスCMS これを行った場合、WordPressを使用する必要がなくなる場合があります。管理者に新しい記事とページを生成するように保持できますが、別のワークフローは、別のヘッドレスCMSを使用して静的ファイルを生成し、リポジトリに同期することです。これらはすべて1つのステップで自動的に行われます。これは「ヘッドレスCMS」です。これは、バックエンドインスタンスとしてどこかで実行されているが、実際のライブWebサイトとは完全に分離されているコンテンツ管理システムです。 WordPressは、静的Webサイトの一般的なヘッドレスCMSオプションであり、実際には大規模なSSG展開の最も一般的な選択肢です。移行方法は多くの状況をカバーする可能性がありますが、WordPressに組み込まれたレガシーコンテンツやコンテンツフローが多すぎる可能性があるため、すぐに完全な移行が不可能になる場合があります。これは、大規模なコンテンツオペレーションやデジタルメディアビジネスに特に当てはまります。ただし、より少ない履歴を管理する必要がある場合は、コンテンツ管理に対するより近代的なアプローチを調べることをお勧めします。ダイナミックサービスWebサイトからの移行は、このような変更を加えるのに良い時期です。私たちが実装した移行は、Netlify CMSをサポートしていますが、ここでヘッドレスCMSの使用方法はカバーしていません。これは、近い将来、別の記事で紹介するトピックです。

深さを掘ります

このような記事では、そのような記事でしかカバーできないため、SSGを使用してWPの移行に関する追加のリソースをいくつか紹介します。

gatsby.js

公式ドキュメントセンターとブログは非常に包括的でよく書かれています。 WP関連の記事を次に示します

GatsbyとWordPressを入手してください

• WordPressからGatsby.jsおよびJamestack
に移行します
• WordPressとGatsby.jsを使用してブログを作成する方法：パート1、パート2、およびパート3
ugo

HugoはGOプログラミング言語に基づいており、利用可能な多数のテンプレートを提供するもう1つの大きなSSG名であり、Gatsby.jsで検討できる信頼できるオプションです。 WordPressをHugoに移行するツールがいくつかあります。これらのガイドを見ると、柔軟性が低い一方で、プロセスはgatsby.jsよりもはるかに単純である必要があります。

クリス・フェルディナンディによる「WordPressからHugoへの移行」

「ワードプレスからヒューゴへの移動へのステップバイステップガイド」 Christopher Kirk-Nielsen

によるWordPressからHugoへの切り替え jekyll

• Ruby環境をセットアップできた場合、Jekyll（静的WebサイトやブログのSSGにプレーンテキストを変換できる）はさらに使いやすくなりますが、Webアプリケーションとは異なり、静的ページのみを生成します。 gatsby.jsのように。 Gatsbyのように、PythonベースのExitWPを使用してWPからMarkdownを生成できます。また、Windowsベースの実行可能ファイルwpxml2jekyllを使用して、wp xmlからJekyll対応のマークダウンファイルを生成することもできます。いくつかの有用な記事：

  「WordPressからJekyllへの移行ブログ」
  • 「WordPressからJekyllへの移動：パート1およびパート2」by Florian Courgey サービスとしてのソフトウェア（SaaS）ソリューション
  Gatsby Cloudは、Gatsby.jsのWebサイトの構築と維持のサポートを無料または有料で提供し、クイックビルドを簡単に自動化し、プレビューにアクセスし、毎日の編集を生成し、NetLify、CloudFlare、AWS CloudFront、またはAkamaiを簡単に展開できます。 。 HardyPressは静的なWordPress Webサイトも生成します。支払い時に、クレデンシャルを入力してオンラインWPインストールにアクセスしてその場ですべてを管理できる管理パネルがあります。 HTTPS、フォーム、および検索。商業サポートを備えたその他のWP関連SSGには、シフター、ストラット、およびサイトセュースが含まれます。
  結論と考え：王は死んでいますか？
  私にとって、私にとっては安心することが非常に重要であり、これが何年も前にWordPressのWebサイトの開発をやめた主な理由の1つです。私が嫌いなのは、エラーがいつでも（ゼロの日かそうでないか）表示される可能性があり、時間内にパッチが適用されないと私の仕事を危険にさらす可能性があるということです。私を信じてください、メインと突然のPHPまたはWPのアップグレードのために、私は自分のウェブサイトが私が認めたいよりも改ざんしたり、作業をやめたりしているのを見てきました。ただし、ウェブサイトが静的な場合、これらのセキュリティの問題は存在しなくなります！

  私の意見では、WordPressは2012年に「オイルピーク」の状況に達しました（Google Trends：WordPress 2004-to-Presentを参照）。それが迅速に適応しない場合、それは市場シェアを失い続けるだけです。これは、より統合されたプロセスでより速く、より安全な作業を行うことができる技術にとって有益です。 WPの作成者であり、AutomaticのCEOであるMatt Mullenwegは、開発者が「JavaScriptを掘り下げる」ことを奨励し始め、Calypsoを紹介してJavaScriptのWPのPHPバックエンドを大胆に放棄したことを認めました（プロセスに関する彼の反省を読んでください）。これにより、衝撃波（パニック）がコミュニティにもたらされ、WordPressが完全にPHPを放棄すると噂されています。グーテンバーグは、この方向への別のステップにすぎません。それがなんとか自分自身を再構築することができれば、王は最終的にその王冠を保持するかもしれません。そうでない場合、ねえ、インターネットの3分の1近くに電力を供給するのは簡単ではありません。 ？

  2020年にWordPress Headless CMSを搭載したSitePointがGatsbyにどのように移行したかについての記事を読んでください。

  Jamstack Basics Jamstackから学びます。 Jamstack Basicsのコレクションは、Jamstackで最初の一歩を踏み出すのに役立ち、コンテンツを常に追加しています。専門家になるために必要なチュートリアルを提供します。 Jamstackの最後に更新されるため、いつでもインデックスを参照できます。 WordPressを静的なWebサイトビルダー（FAQ）

  に移行する faqs

  WordPressを静的Webサイトジェネレーターに移行することの利点は何ですか？
  WordPressを静的Webサイトジェネレーターに移行するには、いくつかの利点があります。まず、静的Webサイトは通常、WordPress Webサイトよりも高速です。これは、データベースからPHPを処理したり抽出したりする必要がないためです。これにより、Webサイトの読み込み速度が大幅に向上する可能性があります。これは、SEOとユーザーエクスペリエンスにとって重要です。第二に、静的なWebサイトは、ハッキングできるデータベースがないため、より安全です。最後に、静的なWebサイトはホストが安く、保守が容易であるため、中小企業や個人ブログに最適です。
  WordPressから静的Webサイトジェネレーターへのスムーズな移行を確保する方法は？
  スムーズな移行を確保するには、事前に計画することが重要です。最初にWordPressサイトをバックアップして、問題が発生した場合にロールバックできるようにします。次に、ニーズに合った静的なWebサイトジェネレーターを選択します。いくつかの人気のあるオプションには、ジキル、ヒューゴ、ギャツビーが含まれます。ジェネレーターが選択されたら、StaticやWP2Staticなどのプラグインを使用してWordPressコンテンツをエクスポートできます。エクスポート後、新しい静的Webサイトを設定してコンテンツをインポートする必要があります。最後に、新しいWebサイトを徹底的にテストして、すべてが適切に機能することを確認します。
  静的なWebサイトジェネレーターに移行するときは、WordPressのテーマを保持できますか？
  残念ながら、静的WebサイトジェネレーターでWordPressテーマを直接使用することはできません。ただし、静的Webサイトジェネレーターのテンプレートシステムを使用してトピックを再作成できます。これには、HTML、CSS、および場合によってはJavaScriptの知識が必要です。または、WordPressテーマに非常に似たプレハブテーマを選択できます。
  静的なWebサイトジェネレーターに移行すると、WordPressプラグインはどうなりますか？
  静的Webサイトジェネレーターに移行すると、WordPressプラグインが提供する機能が失われます。ただし、多くの静的なWebサイトジェネレーターには、同様の機能を提供できる独自のプラグインまたは拡張機能があります。移行後、これらのプラグインを手動で調査およびインストールする必要があります。
  静的なWebサイトジェネレーターでコンテンツ管理システム（CMS）を使用できますか？
  はい、静的なWebサイトジェネレーターでCMSを使用できます。いくつかの一般的なオプションには、Netlify CMS、林業、コンテンツフルが含まれます。これらのCMSを使用すると、WordPressと同様のユーザーフレンドリーなインターフェイスでコンテンツを管理できます。ただし、静的Webサイトジェネレーターが提供できる静的ファイルを生成します。

  静的Webサイトでフォームを処理する方法は？

  静的なWebサイトには、フォームの提出を処理するためのバックエンドがないため、静的Webサイトでのフォームの処理は少し難しい場合があります。ただし、FormspreeやNetlifyフォームなどのサードパーティサービスを使用して、フォームの提出を処理できます。これらのサービスは、フォームのアクションプロパティとして使用できるURLを提供し、フォーム送信を処理してデータを送信します。
  静的Webサイトでコメントを処理する方法は？

  フォームと同様に、コメントはコメントを保存して取得するためのバックエンドがないため、コメントも静的なWebサイトで課題になる可能性があります。ただし、DisqusやCommentoなどのサードパーティサービスを使用してコメントを処理できます。これらのサービスは、Webサイトに追加できるJavaScriptスニペットを提供し、コメント機能を処理します。

  SEOを失うことなく、WordPress Webサイトを静的Webサイトジェネレーターに移行できますか？

  はい、SEOを失うことなく、WordPressのWebサイトを静的なWebサイトジェネレーターに移行できます。重要なのは、新しい静的WebサイトがWordPress Webサイトと同じURL構造を維持することを確認することです。これにより、検索エンジンは引き続きページを認識し、ランク付けし続けることができます。さらに、静的Webサイトは、WordPress Webサイトよりも高速であることが多く、実際にSEOを改善できます。

  静的Webサイトを投稿する前にプレビューできますか？

  はい、ほとんどの静的なWebサイトジェネレーターには、Webサイトを公開する前にプレビューできる組み込み開発サーバーがあります。これは、ウェブサイトが公開される前にテストし、すべてが適切に機能することを確認するための素晴らしい方法です。

  公開後に静的ウェブサイトを更新する方法は？

  静的Webサイトの更新は、WordPress Webサイトの更新とは少し異なります。変更を加えるためにバックエンドにログインする代わりに、Webサイトのソースファイルを更新してからWebサイトを再構築する必要があります。このプロセスは、NetlifyやVercelなどの継続的な統合/継続展開（CI/CD）サービスを使用して自動化できます。

以上がWordPressから静的サイトジェネレーターに移行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。