AIとPCでどうにかする困ったことから、使える知識へ。このサイトについて ↗

自動化・効率化

WordPress.comからCloudflare Pagesへ無料移行した手順｜GitHub連携でブログを自動公開する構成

更新

このブログは最初、WordPress.comの無料サイトとして作っていました。記事や固定ページを用意していくうちに、広告コードやサイト構成をもっと自由に扱いたくなり、GitHub + Cloudflare Pagesの静的ブログへ移行しました。

結果として、レンタルサーバーを契約せず、pages.dev のURLで公開しながら、GitHubへの変更をCloudflare Pagesが自動ビルド・自動デプロイする構成にできました。

この記事で分かること

  • WordPress.comからCloudflare Pagesへ移した理由
  • GitHubを記事管理に使う構成
  • 下書きを公開しない仕組み
  • Cloudflare Pagesの自動デプロイ
  • Search ConsoleとAdSense申請まで進めた流れ
  • 実際にやって分かった注意点

なぜWordPress.comから移行したのか

WordPress.comは簡単に始められる一方、無料プランでは外部広告コードや細かなサイト制御に制約があります。

今回のブログでは、Google AdSense、Amazonアソシエイト、A8.net、楽天アフィリエイトを使える構成にしたかったため、HTMLの<head>、ads.txt、SEOメタ情報、サイトマップなどを自分で管理できる形へ移しました。

最終的な構成

ChatGPT
  ↓
GitHub（非公開リポジトリ）
  ↓ push
Cloudflare Pages
  ↓ 自動ビルド
公開サイト（*.pages.dev）

記事原稿、固定ページ、CSS、ビルドスクリプトはGitHubで管理します。Cloudflare PagesはGitHub連携を使い、リポジトリへ変更が入ると自動でビルド・デプロイします。

サーバー代は0円で始められた

Cloudflare PagesのFreeプランでは、現在月500ビルドまで利用できます。このブログ程度の更新頻度なら、通常の記事更新で使い切る規模ではありません。

独自ドメインは後から追加できますが、現在はCloudflareが用意するpages.devサブドメインを使っています。

WordPressから何を移したか

今回移したのは、固定ページ4件と下書き記事2件からスタートしました。

  • このサイトについて
  • プライバシーポリシー
  • 広告・アフィリエイトについて
  • お問い合わせ
  • Excel 2016の不具合記事
  • 写真の表をAIでExcelへ再現する記事

WordPress側の記事データを取得し、静的サイト用のJSON/HTMLへ変換しています。手作業で1記事ずつコピーする方法にはしませんでした。

下書きを公開しない仕組み

一番気を付けたのが下書きです。GitHubリポジトリが非公開でも、ビルド時に下書きをdistへ出してしまえば公開サイトから読めてしまいます。

そこで記事にdraft / publishedの状態を持たせ、publishedかつ公開日時を過ぎた記事だけをビルドするようにしました。

さらにビルド時に、下書きタイトルやURLが公開HTMLへ混入していないかチェックしています。

GitHubへ反映すると自動公開

Cloudflare PagesのGit連携を使っているため、公開用ブランチへ変更するとCloudflare側でビルドが走ります。実際にこのブログでも、GitHubのチェックからCloudflare Pagesのビルド成功・失敗を確認しています。

SEOまわりも自分で生成

  • title
  • meta description
  • canonical
  • OGP
  • 構造化データ
  • robots.txt
  • sitemap.xml
  • パンくず

Search Consoleの所有権確認

Google Search ConsoleではURLプレフィックスとしてサイトを追加しました。確認方法はHTMLファイル方式とHTMLタグ方式の両方を用意し、所有権確認後にsitemap.xmlを登録しています。

AdSenseコードも直接入れられる

Google AdSenseのコードは、Google公式の案内どおり全ページの<head>内へ出力する構成にしました。ads.txtもビルド時に生成します。

この記事執筆時点では、AdSenseは申請済みで審査中です。Cloudflare Pagesだから承認される、という意味ではなく、サイト構成としてAdSenseコードを配置して申請まで進められたという段階です。

実際に移行して良かったところ

  • サーバー契約なしで始められた
  • 広告コードを自由に入れられる
  • GitHubで変更履歴が残る
  • 記事更新からデプロイまで自動化しやすい
  • WordPressのプラン制限を気にしなくてよくなった
  • HTML/CSS/SEO構造を自分で制御できる

やって分かった注意点

  • WordPressのテーマやプラグインをそのまま移植できるわけではない
  • お問い合わせフォームなど動的機能は別の仕組みが必要
  • 公開日時を未来にすると、ビルド時点では記事が出ない
  • 下書き保護はGitHubを非公開にするだけでは不十分
  • サイトマップやSearch Consoleは反映に時間がかかる場合がある

独自ドメインは後からでも追加できる

Cloudflare Pagesは独自ドメインにも対応しています。このブログでは、まず無料のpages.devで運用し、必要になった時点で独自ドメインを検討する方針です。

まとめ

  • WordPress.comからGitHub + Cloudflare Pagesへ自動移行した
  • GitHub更新からCloudflare Pages公開まで自動化できる
  • 下書きはビルド対象から除外して保護する
  • Search Console・AdSense用コードも静的サイト側で管理できる
  • レンタルサーバーなしで実用ブログを運用できている

参考情報

関連記事

← ホームへ戻る