テック羅針盤
自動化レシピ

月0円で自分のサイトを持つ 公開までの全手順

Astro+GitHub+Cloudflare Pagesで、サーバー代0円の自分のサイトを公開するまでの手順を実録ベースで解説。かかるお金はドメイン代の年1,500円前後だけです。

公開日
  • #Cloudflare Pages
  • #Astro
  • #GitHub
  • #サイト運営

「自分のサイトを持つ=レンタルサーバーを月額で借りる」という常識は、もう古くなりました。この記事では、当サイト(テック羅針盤)自身も採用している「サーバー代0円」の構成と、公開までの手順を実録ベースで解説します。かかるお金は、独自ドメイン代の年1,500円前後だけです。

全体の仕組み: 3つの無料サービスをつなぐ

構成はシンプルで、役割の違う3つを直列につなぎます。

  1. Astro(静的サイトジェネレーター) — 記事のMarkdownファイルを、ただのHTMLに変換する道具。サイトの見た目と構造はここで作ります。
  2. GitHub(ソース置き場) — サイトの元データを置く場所。無料の非公開リポジトリで十分です。
  3. Cloudflare Pages(配信) — 出来上がったHTMLを世界中に配る係。個人サイトの規模なら無料枠で足ります。

この構成の肝は「静的サイト」であることです。WordPressのようにサーバー上でプログラムが動く方式と違い、あらかじめ作っておいたHTMLを配るだけなので、動かし続けるためのサーバーが要りません。料金だけでなく、乗っ取りの対象になる面積が小さい(管理画面やデータベースが存在しない)のも大きな利点です。

手順1: Astroでサイトの骨組みを作る

Node.jsが入っているPCで、次のコマンドを実行します。

npm create astro@latest my-site

質問にいくつか答えると、ひな形が出来上がります。記事はMarkdownファイル(見出しと本文をテキストで書く形式)として追加していく方式にするのが定番で、Astroの「Content Collections」という機能を使うと、記事の日付やカテゴリの管理も型付きでできます。

ローカルでの確認は npm run dev、公開用のHTML生成は npm run build です。この時点で、手元では完成したサイトが見られる状態になります。

手順2: GitHubに置く

GitHubに非公開リポジトリを作り、サイト一式をプッシュします。ここがサイトの「原本置き場」になり、以後の更新はすべて「記事ファイルを足してプッシュする」だけになります。

手順3: Cloudflare Pagesにつなぐ

Cloudflareのアカウントを作り、PagesでGitHubリポジトリを接続します。ビルドコマンド(npm run build)と出力フォルダ(dist)を指定すると、以後はプッシュのたびに自動でビルドと公開が走ります。この時点で プロジェクト名.pages.dev という無料のアドレスでサイトが世界に公開されます。

GitHub Actions(GitHubの自動処理機能)を使って「テスト→ビルド→デプロイ」の順に自動化しておくと、壊れた状態のサイトが公開される事故を機械的に防げます。当サイトもこの方式で、記事の形式チェックに通らない限り公開されない作りにしています。

手順4: 独自ドメインをつなぐ

最後に、取得した独自ドメイン(当サイトなら tech-rashinban.com)をCloudflareのDNS設定でPagesに向けます。CNAMEというレコードを1〜2件追加するだけで、httpsも自動で有効になります。証明書の取得や更新の作業は一切不要です。

ドメインはCloudflare Registrarで取ると、原価に近い価格(年10ドル前後)で、更新時の値上げ商法もありません。

つまずきやすいポイント

実際にやってみて詰まりやすいのは次の3点です。

  • ビルドは通るのに画面が真っ白 — 出力フォルダの指定ミスが大半です。Astroなら dist を指定します。
  • 独自ドメインだけ表示されない — DNSの反映に数分〜数十分かかることがあります。設定直後は慌てず待つのが正解です。
  • 更新したのに反映されない — ブラウザのキャッシュが古いだけ、ということがよくあります。シークレットウィンドウで開いて確認するのが手早いです。

なお、独自ドメインを最初から取るかは迷いどころですが、収益化や検索流入を少しでも考えているなら、最初から取ることをおすすめします。無料アドレスで始めて後からドメインを変えると、検索エンジンからの評価の引き継ぎに手間と時間がかかるためです。ドメイン代の年1,500円前後はこの構成で唯一の固定費ですが、サイトの「住所」として最初に払う価値があります。ドメイン名だけは後から変えにくい唯一の要素なので、サイト名との一致だけ確認してから取得しましょう。

この構成が向く人・向かない人

向くのは、記事を書いて公開することが目的の個人サイト・ブログ・ポートフォリオです。逆に、会員機能やコメント欄などサーバー側の処理が必須のサイトには、この構成単体では足りません(その場合も、静的サイト+外部サービスの組み合わせで足りることが多いです)。

「まず器を無料で持ち、記事に集中する」——サイト運営の初期コストを限りなくゼロに近づけたい人には、2026年時点でいちばん堅実な構成だと考えています。

本記事の手順・料金は 2026-07-18 時点の各サービス公式情報と当サイトの実運用に基づきます。無料枠の条件や価格は変わることがあるため、最新は各公式サイトでご確認ください。