静的ホスティングの方法 WordPress 無料のサイト（GitHub Pages、Vercel、Netlify 上）

WordPress 強力で人気のあるコンテンツ管理システムですが、動的な WordPress サイトはコストがかかり、継続的なメンテナンスが必要になります。多くのシンプルなウェブサイトやブログでは、 WordPress サイトは優れた代替手段となります。静的サイトはより高速で安全であり、GitHub Pages、Netlify、Vercel などのプラットフォームで無料でホストできます。

このチュートリアルでは、静的バージョンを作成する手順を説明します。 WordPress サイトを作成して無料でホスティングします。このアプローチは、ユーザーフレンドリーな WordPress 静的サイトの利点を享受しながらコンテンツを作成するためのインターフェース。

必要なツール

プロセスに入る前に、必要なツールがすべて揃っていることを確認しましょう。静的ホスティングに必要なすべてのもののリストは次のとおりです。 WordPress 無料でサイトにアクセス:

チュートリアルを進める前に、これらのツールがインストールされ、アカウントが設定されていることを確認してください。すべてが準備できていれば、プロセスはスムーズかつ簡単になります。

ステップ 1: あなたの能力を開発する WordPress LocalWP のサイト

始める前に、 WordPress サイトの準備ができました。まだサイトを作成していない場合、または現在別の場所でホストされている場合は、LocalWP (旧 Local by Flywheel) を使用して、ローカルでサイトを開発およびテストすることをお勧めします。

1. LocalWPを無料でダウンロードしてインストールするには、 ローカルwp.com.
2. 新しいを作成します WordPress LocalWP のサイト。
3. サイトをデザインし、コンテンツを追加し、必要なプラグインをインストールします。
4. 静的な形式でサイトが希望どおりに表示され、機能することを確認します。

静的サイトの制限を理解する

静止している間 WordPress サイトは速度の向上、セキュリティ、無料ホスティングオプションなどのメリットを提供しますが、その制限に注意することが重要です。 WordPress 静的な環境では機能しません:

1. WordPress フォーム： 伝統的 WordPress サーバー側の処理に依存するフォームは機能しません。これには、問い合わせフォーム、サブスクリプションフォーム、その他のインタラクティブなフォームが含まれます。
2. WordPress コメント: リアルタイムのユーザーインタラクションを可能にする動的コメントシステムは、静的サイトではサポートされていません。
3. 管理者エリアへのアクセス: リンク先 /wp-admin または同様の内部 WordPress ルートはサーバー側の処理を必要とするため機能しません。
4. リアルタイムのコンテンツ更新: 静的サイトでは、動的サイトとは異なり、コンテンツの変更を表示するには再生成と再展開が必要です。 WordPress 変更が即座に行われるサイト。
5. ユーザー認証: ユーザーのログインやメンバーシップを必要とする機能は、基本的な静的サイトの設定ではサポートされていません。
6. 電子商取引機能: 動的なショッピング カートと支払い処理は、通常、静的な環境では機能しません。
7. 検索機能: WordPressの組み込み検索機能は動作しませんが、代替手段を実装することはできます (Simply Static Pro の機能で説明されているように)。
8. ダイナミックサイドバーとウィジェット: リアルタイム データを取得したり、サーバー側の処理を必要とするウィジェットは、期待どおりに機能しません。

考えられる回避策

これらの制限は存在しますが、その一部を軽減する方法があります。

• フォームの場合は、Formspree や Netlify Forms などのサードパーティ サービスを使用できます。
• コメントは、Disqus や Facebook Comments などのサービスを通じて処理できます。
• 検索機能は、Lunr.js や Algolia (Simply Static Pro で提供) などのクライアント側ソリューションを使用して実装できます。
• 電子商取引の場合は、Snipcart や Gumroad などの外部サービスを使用することを検討してください。

を開発するとき、 WordPress サイトを構築する場合は、これらの制限を念頭に置き、それに応じてサイトの構造と機能を計画してください。コンテンツ主導のページに重点を置き、静的な環境には適合しない動的機能への依存を最小限に抑えます。

ステップ2: Simply Staticをインストールして構成する

Simply Staticは無料です WordPress プラグイン 静的バージョンを生成する WordPress サイト。設定方法は次のとおりです。

1. あなたの中で WordPress ダッシュボードで、「プラグイン > 新規追加」に移動します。
2. 「Simply Static」を検索し、プラグインをインストールして有効化します。
3. Simply Static > 設定に移動して WordPress ダッシュボード。
4. 「一般」タブで、以下を設定します。
   • 宛先 URL: 「オフラインで使用するために保存」を選択します。すでにカスタム ドメインがある場合は、以下のスクリーンショットのように「絶対 URL」を選択します。

5. ローカルディレクトリ: これを外部のディレクトリに設定します WordPress インストール、例: /Users/yourusername/Documents/StaticSite

6. 「含める/除外」タブで、必要な URL がすべて含まれていることを確認します。
   • ほとんどの場合、/wp-content/と/wp-includes/を使用します

7. 設定を保存します。

もあります SimplyStaticのプロ版Simply Static プラグインのプロ機能の概要は次のとおりです。

1. 高度な展開:
   • SimplyCDN、GitHub、Amazon AWS S3、Digital Ocean Spaces、BunnyCDN などの複数のプラットフォームに静的サイトをデプロイします。
2. 簡単なサイト更新:
   • 単一の投稿、一括更新、特定の URL など、コンテンツの更新を効率的に管理します。
3. フォームとコメントの統合:
   • Contact Form 7、Gravity Forms、Elementor Forms などの人気のプラグインのフォームを静的サイトにシームレスに統合します。
4. 検索機能：
   • Fuse.js を使用して基本的な検索を実装するか、Algolia を使用してより包括的な検索エクスペリエンスにアップグレードします。
5. WP-CLI サポート:
   • WP-CLI を使用して、コマンド ラインから直接 Simply Static 機能を構成、エクスポート、管理します。
6. 多言語サポート：
   • WPML、Polylang、TranslatePress の統合により、複数の言語でコンテンツを提供します。
7. 縮小：
   • CSS、JavaScript、静的 HTML ファイルを縮小してサイトのパフォーマンスを最適化します。
8. WordPress 隠蔽：
   • デフォルトを置き換える WordPress 事実を隠すための道 WordPress コンテンツ管理システムとして使用されています。

これらのプロ機能は、静的機能と柔軟性を大幅に向上させます。 WordPress これにより、より高度な展開、より優れたパフォーマンス、および改善されたユーザー エクスペリエンスが実現します。

ステップ3: Gitリポジトリを初期化する

静的サイト ジェネレーターをセットアップしたので、バージョン管理用のローカル ディレクトリを準備しましょう。

1. ターミナルまたはコマンド プロンプトを開きます。
2. Simply Staticで指定したディレクトリに移動します（例： cd /Users/yourusername/Documents/StaticSite).
3. 次のコマンドを実行して新しい Git リポジトリを初期化します。

   git init

ステップ4: GitHubリポジトリを作成する

リポジトリの作成と管理には GitHub Desktop を使用します。

1. GitHub Desktopをダウンロードしてインストールするには、 デスクトップ あなたがまだいなければ。
2. GitHub Desktop を開き、GitHub アカウントにサインインします。
3. 「ファイル」>「新しいリポジトリ」をクリックするか、「ハードドライブに新しいリポジトリを作成する」ボタンを使用します。
4. 以下を設定してください。
   • 名前: リポジトリの名前を選択します (例: “my-static-wordpress”)
   • ローカルパス: Simply Staticで指定したのと同じディレクトリに設定します
   • このリポジトリをREADMEで初期化する: チェックを外す
   • Git ignore: 「なし」を選択します（手順3で独自に作成しました）
   • ライセンス: 適切なライセンスを選択するか、「なし」のままにします
5. 「リポジトリの作成」をクリックします

ステップ5: リポジトリをコミットする

リポジトリが設定されたので、最初のコミットを実行しましょう。

1. GitHub Desktop では、静的サイト内のすべてのファイルが変更としてリストされているはずです。
2. コミットの概要を入力します（例：「静的サイト ファイルの最初のコミット」）。
3. 「メインにコミット」（古いバージョンでは「マスターにコミット」）をクリックします。
4. 「リポジトリを公開」をクリックして、ローカル リポジトリを GitHub にプッシュします。

ステップ6: 単純な静的エクスポートを実行する

次に、静的サイトを生成します。

1. 自分に戻って WordPress ダッシュボード。
2. 「Simply Static > Generate」に移動します。(ローカル ディレクトリにのみデプロイするため、診断エラー アラートは無視できます)。
3. 「静的ファイルの生成」をクリックします。
4. プロセスが完了するまでお待ちください。サイトのサイズによっては、数分かかる場合があります。
5. 完了したら、GitHub Desktop に戻ります。
6. 新しく生成または更新されたファイルが変更としてリストされます。
7. 「静的サイト ファイルを更新する」などのメッセージを付けてこれらの変更をコミットします。
8. 「Push origin」をクリックして変更を GitHub にプッシュします。

ステップ7: リポジトリをホスティングプラットフォームに接続する

静的サイトが GitHub 上にあるので、無料のホスティング プラットフォームに簡単に接続できます。GitHub Pages、Netlify、Vercel の手順を説明します。

GitHubページ

1. GitHub.com のリポジトリに移動します。
2. 左側のサイドバーで「設定」>「ページ」をクリックします。
3. 「ソース」の下で、「ブランチからデプロイ」を選択します。
4. デプロイするブランチを選択します（通常は「main」または「master」）。
5. ルートフォルダ（/）を選択し、「保存」をクリックします。
6. あなたのサイトは https://yourusername.github.io/repository-name/.

Netlify

1. で無料アカウントにサインアップ netlify.com.
2. Netlify ダッシュボードで「Git からの新しいサイト」をクリックします。
3. Git プロバイダーとして GitHub を選択し、Netlify を承認します。
4. リストからリポジトリを選択します。
5. ビルド コマンドと公開ディレクトリは空白のままにします。
6. 「サイトを展開」をクリックします。
7. サイトは Netlify サブドメインで公開され、サイト設定でカスタマイズできます。

ヴェルセル

1. で無料アカウントにサインアップ vercel.com.
2. Vercel ダッシュボードで「新しいプロジェクト」をクリックします。
3. GitHub リポジトリをインポートします。
4. ビルド設定はそのままにしておきます (Vercel は静的サイトであることを自動検出します)。
5. 「デプロイ」をクリックします。
6. サイトは Vercel サブドメインで公開され、プロジェクト設定でカスタマイズできます。

まとめ

おめでとうございます！これで、 WordPress ホストされたサイト 無料でご利用いただけます。変更を加えるたびに、静的ファイルを再生成してプッシュすることを忘れないでください。 WordPress このワークフローにより、 WordPress 静的サイトのスピード、セキュリティ、無料ホスティングのメリットを享受しながら、コンテンツを作成できます。

追加のヒント:

• よりプロフェッショナルな外観にするには、カスタム ドメインの設定を検討してください。
• 定期的にアップデートしてください WordPress インストールとプラグインを実行して、最新の機能とセキュリティ アップデートを確実に利用できるようにします。
• の高度な機能をご覧ください Simply Staticのプロ版隠れるような WordPress 静的サイトにフォームや検索機能を設定します。