SIMけん初心者向け手順
GitHubとCloudflare Pagesで、初心者がWebサイトを公開するまで
- GitHubとCloudflare Pagesの役割
- 公開までの大まかな流れ
- 初心者がつまずきやすい点
最初に結論
GitHubはコードやファイルを管理する場所、Cloudflare PagesはそのファイルをWebサイトとして公開する場所です。初心者は、この2つを同じものとして考えると混乱します。GitHubに置いたファイルを、Cloudflare Pagesが読み取り、公開URLへ反映するという流れで考えると分かりやすくなります。
背景
AIでHTMLやCSSを作れても、公開できなければ読者には届きません。自分も最初は、ファイルを作ることと公開することの違いがあいまいでした。ローカルで見えているページは、自分のPC内で見えているだけです。副業サイトとして検証するなら、外部から見られるURLが必要になります。
実際に行ったこと
まずGitHubでリポジトリを作成し、HTML、CSS、JavaScript、画像ファイルを管理しました。変更履歴が残るため、後からどこを修正したか確認しやすくなります。次にCloudflare PagesでGitHubリポジトリを接続し、静的サイトとして公開しました。
ビルドが不要なHTMLサイトであれば、フレームワーク設定を選ばず、ビルドコマンドを空欄にして、公開ディレクトリをルートにする構成が分かりやすいです。更新するときは、GitHubへ変更を反映し、Cloudflare Pagesのデプロイが完了するのを待ちます。
つまずいた点
よくあるつまずきは、ファイル名の大文字小文字、リンクのパス、画像の場所、公開ディレクトリの指定です。PC上では動いても、公開環境では画像が表示されないことがあります。原因は、パスの指定やファイル名の違いであることが多いです。
独自ドメインは最初から必須ではありません。まず仮URLで公開し、ページ内容、リンク、スマホ表示、サイトマップを確認してから接続しても遅くありません。また、商用サイトの公開先としてGitHub Pagesを積極的に推奨する方針ではなく、今回はCloudflare Pagesを使う前提で整理しています。
分かったこと
公開作業は難しそうに見えますが、考え方は単純です。GitHubでファイルを管理し、Cloudflare Pagesで公開する。更新したら再デプロイされる。この流れを一度経験すると、サイトを増やしたり改善したりする心理的なハードルが下がります。
初心者への結論
最初は凝った構成にせず、HTML、CSS、JavaScriptだけの小さなサイトを公開するのが現実的です。公開後に、スマホ表示、リンク切れ、title、description、sitemap.xmlを確認します。仕様は変わる可能性があるため、具体的な操作画面はCloudflareとGitHubの公式情報も確認してください。
関連記事
この記事を書いた人
SIMけん。GitHubで複数のWebサイト公開を試している非エンジニア会社員です。
記事内容の訂正窓口
お問い合わせページから連絡してください。