前の記事では、ローカルWordPressで作成したサイトを静的化し、公開用のファイルとして出力するところまで進めました。
次のステップは、その静的ファイルをCloudflare Pagesへアップロードし、インターネット上からアクセスできる状態にすることです。
Cloudflare Pagesで公開するとは
前の記事までで、ブログはすでに静的ファイルとして完成しています。
ただし、そのファイルはまだ自分のパソコンの中にあるだけなので、他の人はアクセスできません。
Cloudflare Pagesへ公開する作業は、簡単に言えば、自分のパソコンにある完成済みのブログをCloudflareへ送り、インターネット上から見られるようにする作業です。
公開が完了すると、まずCloudflare Pagesが用意するpages.devのURLからサイトへアクセスできるようになります。
Cloudflareアカウントを作成する
Cloudflare Pagesを利用するには、まず Cloudflare のアカウントを用意します。
Cloudflareを初めて利用する場合は、公式サイトから無料アカウントを作成してください。
アカウントの作成自体はWeb画面での操作が必要ですが、よく分からない場合はAIに教えてもらいながら進めましょう。
Cloudflare Pagesで静的サイトを公開したいです。
まず、Cloudflareの無料アカウントを作成する手順を案内してください。Cloudflare Pagesプロジェクトを作る
次はPagesプロジェクトを作成しますが、ここからはCLIでの作業が可能になります。
生成AIに現在の環境を確認してもらい、CloudflareのCLIツールを使ってPagesプロジェクトを作成するところまで進めてもらいます。
現在のパソコン環境を確認し、CLIを使ってCloudflare Pagesのプロジェクトを作成するところまで進めてください。
作業は、事前に伝えた共通ルールに従って一つずつ案内してください。少し補足すると、CloudflareをCLIで操作するには、「ブラウザでのOAuth認証」または「APIトークン」による認証が必要です。
この時点では、比較的かんたんなブラウザでのOAuth認証で進めるのがおすすめです。
生成AIがAPIトークンを使う方法を案内してきた場合は、「ブラウザでのOAuth認証で進めてください」と伝えて、手順を切り替えてもらいましょう。
なお、だいぶ後の方になりますが、APIトークン方式も使えたほうが便利ではあります。
作業に抵抗がない人はここでAPIトークン方式で進めても構いません。
Cloudflare Pagesへ公開する
いよいよ静的化ファイルを公開します。
Cloudflare Pagesではファイルをアップロードして公開することを「デプロイ」と呼びます。
引き続きCLIで操作可能です。
作成した静的サイトをCloudflare Pagesへデプロイして公開する手順を教えてください。
引き続き、事前に伝えた共通ルールに従って進めてください。Pagesで公開されたサイトを確認する
デプロイが完了したら、Pagesから発行されたURLを実際にブラウザで開きます。
ここで初めて、これまで自分のパソコンの中だけにあったブログが、インターネット上からアクセスできるようになります。
まずは次のような部分を確認してみましょう。
- トップページが表示される
- 記事ページを開ける
- 画像が表示される
- デザインが崩れていない
- メニューや内部リンクが正常に動く
- スマートフォンでも問題なく表示できる
静的化したサイトをローカルで確認したときには問題がなくても、公開先のURLが変わったことでリンクや画像に問題が出る場合があります。
そのため、ローカルでの確認とPagesで公開したあとの確認は別々に行うことが重要です。
問題が見つかった場合は、表示されているURLやエラー内容をそのまま生成AIへ伝えて原因を調べてもらいます。
また、人間が目視で確認するだけでなく、CLIを使って確認することもできます。
おそらく生成AIがCLIでの確認方法も案内してくるので、その場合は指示に従って進めてください。
もし生成AIからCLIでの確認手順が案内されない場合は、次のように依頼できます。
Cloudflare Pagesで公開したサイトをCLIでも確認したいです。
公開状態に問題がないか確認するための手順を、事前に伝えた共通ルールに従って案内してください。また、ChatGPT Plusを契約している場合は、Pagesから発行されたURLをChatGPTに伝えれば、より正確なチェックを行ってくれます。
独自ドメインはあとから設定できる
Cloudflare Pagesでは、プロジェクトを作成するとpages.devのURLが用意されるため、独自ドメインを購入していなくてもサイトを公開できます。
そのため、まずは無料のURLで、
WordPressで記事を作る → 静的化する → Pagesへデプロイする
という一連の流れを完成させることができます。
実際にブログを作ってみて、今後も継続できそうだと感じてから独自ドメインを取得する方法でも問題ありません。
独自ドメインの取得やDNS設定については、別の記事で詳しく紹介します。
Cloudflare Pagesの主な制限
Cloudflare Pagesには、アップロードできるファイル数やファイルサイズなどに制限があります。
静的WordPressを公開する場合に、特に確認しておきたいのは次の2点です。
- 1サイトあたりのファイル数は20,000まで
- 1ファイルあたり25 MBを超えるファイルはアップロードできない
特に動画や非常に大きな画像などをWordPress内に保存している場合は注意が必要です。
通常の個人ブログでは問題にならないことが多いですが、デプロイ時にエラーが発生した場合は、ファイル数やファイルサイズも確認してみましょう。
Cloudflare Pages公開のチェック
Cloudflare Pagesへの公開が完了したら、最後に生成AIへチェックを依頼します。
ここでは、ブラウザで普通に見ただけでは気づきにくい項目を中心に確認してもらいます。
Cloudflare Pagesへの公開が完了しました。
以下の項目をもとに、公開サイトに問題がないか確認してください。
・ローカルWordPress用のURLが公開サイト内に残っていないか
・pages.dev側と独自ドメイン側で、意図しない重複公開が発生していないか
・主要ページが404になっていないか
・内部リンクが公開先URLを正しく参照しているか
・画像、CSS、JavaScriptなどの参照先がローカル環境のままになっていないか
・相対パスやURL変換の影響で、下層ページだけ表示崩れが起きていないか
・記事内のアンカーリンクやページ内リンクが正常に動作するか
・リダイレクト設定が意図どおり動作しているか
・robots.txtやnoindex設定が本番公開向けになっているか
・サイトマップが公開URLを参照しているか
・OGP画像やcanonical URLが本番URLになっているか
・公開不要な管理画面用URLやプレビュー用URLが露出していないか
・25 MiBを超えるファイルが含まれていないか
・Cloudflare Pagesのファイル数上限を超えていないか
必要に応じて、公開URLやCLIを使って実際の状態を確認してください。
問題が見つかった場合は、その原因を確認してから対応方法を案内してください。
作業は、事前に伝えた共通ルールに従って進めてください。ChatGPT Plusなど、指定した公開URLの内容を確認できる環境を使っている場合は、PagesのURLを生成AIへ渡して実際の表示内容をチェックしてもらう方法も便利です。
ブログを更新するときの流れ
ここまで完了すれば、ローカルWordPressからCloudflare Pagesまでの基本的なブログ環境が完成します。
今後の記事更新は、基本的に次の流れになります。
ローカルWordPressで記事を書く・修正する
↓
WordPressを静的化する
↓
静的ファイルをCloudflare Pagesへデプロイする
↓
公開サイトを確認する
記事を更新するたびにこの作業を行うことになります。
最初は少し手間に感じるかもしれませんが、ここまでの一連の作業が安定して動くことを確認できたら、静的化からPagesへのデプロイまでを自動化することもできます。
自動化については、別の記事で紹介します。
まとめ
これで、
ローカルWordPressでブログを作る → 静的化する → Cloudflare Pagesで公開する
という一連の環境が完成しました。
これまで自分のパソコンの中だけにあったWordPressサイトが、実際にインターネット上から見られるようになれば、ブログ公開までの大きな区切りです。
あとは記事を増やしながら、必要に応じて独自ドメインの設定、デプロイの自動化、表示速度の改善などへ進んでいきます。