【完全無料】Astro×Cloudflare Pagesで旅行ブログを作った手順まとめ

このブログ「国内旅行ノート」は、完全無料で作りました。

サーバー代なし、ドメイン代なし（pages.devの無料ドメイン利用）で、本格的なブログサイトが立ち上げられます。使ったツールは以下の3つだけです。

Astro（静的サイトジェネレーター）
GitHub（コード管理）
Cloudflare Pages（無料ホスティング）

実際にやった手順をそのまままとめました。

全体の流れ

Node.js インストール
    ↓
Astroプロジェクト作成
    ↓
GitHubにアップロード
    ↓
Cloudflare Pagesで公開
    ↓
テンプレートをカスタマイズ

所要時間：約1〜2時間（初めての場合）

Step 1：Node.jsをインストール

AstroはNode.js（バージョン18以上）が必要です。

バージョン確認

まずターミナルを開いて確認します。

node -v

v18.x.x 以上が表示されればOK。古いバージョンや未インストールの場合は更新が必要です。

nvmでアップデート（推奨）

# nvmをインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

# ターミナルを再読み込み
source ~/.zshrc

# Node.js v24をインストール
nvm install 24

# バージョン確認
node -v
# → v24.15.0 と表示されればOK

Step 2：Astroプロジェクトを作成

デスクトップに移動してプロジェクトを作成します。

cd ~/Desktop
npm create astro@latest

いくつか質問が出ます。以下のように答えてください。

質問	答え
Where should we create your new project?	`./travel-blog`
How would you like to start your project?	`Use blog template`
Install dependencies?	`Yes`
Initialize a new git repository?	`Yes`

完了すると Project initialized! と表示されます。

Step 3：動作確認（ローカルでプレビュー）

cd travel-blog
npm run dev

ブラウザで http://localhost:4321 を開くとブログのプレビューが見られます。

サーバーを止めるときは Ctrl + C を押します。

Step 4：GitHubにアップロード

GitHubでリポジトリを作成

https://github.com/new を開く
Repository name に travel-blog と入力
「Initialize this repository」のチェックは外す（重要）
「Create repository」をクリック

ターミナルでアップロード

git remote add origin https://github.com/あなたのユーザー名/travel-blog.git
git branch -M main
git push -u origin main

Step 5：Cloudflare Pagesで公開

https://dash.cloudflare.com/ にアクセス
左メニュー 「Compute」→「Workers & Pages」
右上の 「Create application」 をクリック
画面下部の 「Looking to deploy Pages? Get started」 をクリック
「Import an existing Git repository」 の「Get started」

GitHubと連携

「Connect GitHub」→「Install & Authorize」でGitHubアカウントを連携します。

ビルド設定

項目	設定値
Framework preset	Astro
Build command	`npm run build`（自動入力）
Build output directory	`dist`（自動入力）

「Save and Deploy」をクリックすると1〜2分でビルドが完了します。

「Success! Your project is deployed to Region: Earth」 と表示されたら公開完了！

https://travel-blog-XXXX.pages.dev というURLでアクセスできます。

Step 6：Stabloテンプレートに変更（任意）

デフォルトのAstroテンプレートからおしゃれなデザインに変更できます。

Stablo（おすすめ）

カード型レイアウト・ダークモード対応のブログテンプレートです。

# デスクトップにStabloをダウンロード
git clone https://github.com/web3templates/stablo-astro ~/Desktop/travel-blog-stablo

cd ~/Desktop/travel-blog-stablo
npm install
npm run build

ビルドが成功したら既存のGitHubリポジトリにpushします。

git init
git add .
git commit -m "Stabloテンプレートに移行"
git remote add origin https://github.com/あなたのユーザー名/travel-blog.git
git push -f origin main

Cloudflareが自動でビルド→デプロイします。

Step 7：記事を書く

記事は src/content/blog/ フォルダにMarkdownファイルで作成します。

---
title: "記事タイトル"
excerpt: "記事の説明文"
publishDate: "2026-04-28T00:00:00.000Z"
image: "../../assets/blog/blog1.jpg"
category: "travel-tips"
author: "travel-note"
tags: [旅行, ホテル]
---

ここに本文を書く

ファイルを保存してGitHubにpushするだけで自動でサイトが更新されます。

git add .
git commit -m "新しい記事を追加"
git push

かかった費用

項目	費用
Astro	無料
GitHub	無料
Cloudflare Pages	無料
ドメイン（`pages.dev`）	無料
合計	0円

独自ドメイン（tabi-note.com など）を取得する場合は年間約1,500円が必要ですが、なくても問題なく使えます。

まとめ

Astro×Cloudflare Pagesの組み合わせは、旅行ブログを始めるのに最高の構成だと思っています。

完全無料
表示が速い（SEOに有利）
記事を書くだけで自動更新
GitHubで管理できるので消えない

ブログを始めようか迷っている方は、まずこの構成で試してみることをおすすめします。

この記事で不明な点があればコメントください。旅行ブログの運営ノウハウも随時発信しています。

#ブログ作成#Astro#Cloudflare#旅行ブログ#無料