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 は
準備:静的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の記事/ページをマークダウンとしてエクスポート
- 静的リソースを生成
- ステップ1:フォークギャツビーランチャー
これらのランチャーは、完全に機能的な反応駆動型プログレッシブWebアプリケーション(PWA)を直接提供できます。これらはすべて既に含まれています。
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
高度な(例)および材料(例)ランチャーの構成はほぼ同じです。
backend: name: github branch: master repo: your-user/your-repo
ステップ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
GatsbyとWordPressを入手してください
- WordPressからGatsby.jsおよびJamestack に移行します
- WordPressとGatsby.jsを使用してブログを作成する方法:パート1、パート2、およびパート3
- ugo
HugoはGOプログラミング言語に基づいており、利用可能な多数のテンプレートを提供するもう1つの大きなSSG名であり、Gatsby.jsで検討できる信頼できるオプションです。 WordPressをHugoに移行するツールがいくつかあります。これらのガイドを見ると、柔軟性が低い一方で、プロセスはgatsby.jsよりもはるかに単純である必要があります。
「ワードプレスからヒューゴへの移動へのステップバイステップガイド」 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は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サイトジェネレーターに移行することの利点は何ですか?静的Webサイトでフォームを処理する方法は?
静的なWebサイトには、フォームの提出を処理するためのバックエンドがないため、静的Webサイトでのフォームの処理は少し難しい場合があります。ただし、FormspreeやNetlifyフォームなどのサードパーティサービスを使用して、フォームの提出を処理できます。これらのサービスは、フォームのアクションプロパティとして使用できるURLを提供し、フォーム送信を処理してデータを送信します。フォームと同様に、コメントはコメントを保存して取得するためのバックエンドがないため、コメントも静的な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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











このGOベースのネットワーク脆弱性スキャナーは、潜在的なセキュリティの弱点を効率的に識別します。 Goの同時機能機能を速度で活用し、サービスの検出と脆弱性のマッチングが含まれます。その能力と倫理を探りましょう

このパイロットプログラム、CNCF(クラウドネイティブコンピューティングファンデーション)、アンペアコンピューティング、Equinix Metal、およびActuatedのコラボレーションであるCNCF GithubプロジェクトのARM64 CI/CDが合理化されます。 このイニシアチブは、セキュリティの懸念とパフォーマンスリムに対処します

このチュートリアルは、AWSサービスを使用してサーバーレスイメージ処理パイプラインを構築することをガイドします。 APIゲートウェイ、Lambda関数、S3バケット、およびDynamoDBと対話するECS Fargateクラスターに展開されたnext.jsフロントエンドを作成します。 th

これらのトップ開発者ニュースレターを使用して、最新のハイテクトレンドについてお知らせください! このキュレーションされたリストは、AI愛好家からベテランのバックエンドやフロントエンド開発者まで、すべての人に何かを提供します。 お気に入りを選択し、Relを検索する時間を節約してください
