背景とゴール
Webエンジニアとして就職して1年経ったのですが、個人ブログを立ててないといけない思いが芽生えてきたので、GWのうちに作りました。
今回は以下のゴールで考えました。
- Markdownで記事を書きたい
- Cloudflare Free プラン内で完結、まずは0円で抑えてみたい
- 将来独自ドメインを当てるが、開発初期は workers.dev で確認する
近いうちムームードメインで取得したドメインがあるので、これを使って変えることを想定しています！
使うツール
-
Cloudflare Workers
今回作るきっかけになった。無料で作れるということと、簡単らしいので選びました。 -
Astro
markdownで記事を書きたかったのと、「コンテンツ駆動型サイト向け」と謳うAstroの使い心地を確かめてみたかったので選びました。
バージョンなど
| ツール | バージョン | 備考 |
|---|---|---|
| Node.js | v23.9.0 | 最新の LTS より新しめ（23系） |
| npm | 10.9.2 | Node.js にバンドル |
| wrangler | 4.14.1 | Cloudflare CLI（Workers用） |
| Astro CLI | 5.7.10 |
npx astro --version で確認 |
astro パッケージ |
5.7.10 |
npm list astro でも確認済み |
| テンプレート生成時期 | 2025年5月5日 |
npm create cloudflare@latest -- --framework=astro --template=blog 実行日 |
githubのリポジトリを作成
-
githubのアカウントを作成
-
ブログ用のgithubのリポジトリを作成
privateで作成しました。
Cloudflareのアカウントを作成
でアカウント作成しましょう。
必要ツールの作成
以下のコマンドでツールを作成します。
# Node.js v18+ & npm が前提
npm i -g wrangler # Workers 公式 CLI
wrangler login # ブラウザが開いて OAuth 認可
認可はブラウザで以下の画像のように行われます。
プロジェクトの作成
以下のコマンドでプロジェクトを作成しましょう。
npm create cloudflare@latest [プロジェクト名] -- --framework=astro
以下のように、テンプレートを使うかどうか聞かれるので、今回はblogを選びましょう！他の用途を選ぶ方は、ここで好きに選んでください。
How would you like to start your new project?
● A basic, helpful starter project (recommended)
○ Use blog template
○ Use docs (Starlight) template
○ Use minimal (empty) template
他にも、進めていくと以下のようなことを聞かれます。それぞれよしなに答えていきましょう。
- gitによる管理をしているかどうかなど聞かれますが、今作っているgitリポジトリで作業していきたい方はNoを選んで進んでください。
- 途中でサブドメインを登録するくだりがあります。[name].workers.devで固定されたドメインを取得できます。1アカウント1回の作業なので慎重につけましょう。
うまくいったら
npm run dev
でlocalで動かしてみまよう！
> [プロジェクト名]@0.0.1 dev
> astro dev
14:35:39 [@astrojs/cloudflare] Enabling sessions with filesystem storage. Be sure to define a KV binding named "SESSION".
14:35:39 [@astrojs/cloudflare] If you see the error "Invalid binding `SESSION`" in your build output, you need to add the binding to your wrangler config file.
14:35:39 [WARN] [@astrojs/cloudflare] [@astrojs/cloudflare] This adapter is intended to be used with server rendered pages, which this project does not contain any of. As such, this adapter is unnecessary.
14:35:39 [WARN] [config] The adapter @astrojs/cloudflare has limited support for "sharp". Certain features may not work as expected.
14:35:39 [WARN] [adapter] Cloudflare does not support sharp. You can use the `compile` image service to compile images at build time. It will not work for any on-demand rendered images.
14:35:40 [types] Generated 1ms
14:35:41 [content] Syncing content
14:35:41 [content] Astro config changed
14:35:41 [content] Clearing content store
14:35:41 [content] Synced content
14:35:41 [vite] Re-optimizing dependencies because lockfile has changed
astro v5.7.10 ready in 1833 ms
┃ Local http://localhost:4321/
┃ Network use --host to expose
14:35:41 watching for file changes...
14:35:44 [200] / 99ms
と出るので、http://localhost:4321/にアクセスすると見れます。
今回はblogのテンプレートを利用したので、以下のように見れます。
ここまでできたら、
npm run build
wrangler deploy
でdeployができます！
先ほどつけたhttps://[先ほどつけたドメイン名].workers.devにアクセスしてみましょう。
これで完成です！！
ちょっとハマった注意点
ssl/tls alert になったら
ssl/tls alert handshake failure: SSL alert number 40
と言われることがあります。
これはCloudflare Edge 証明書の発行ラグ（1‑5 分）と考えられるので、時間をおいて再度アクセスしましょう。手元からは
curl -I https://XXXX.workers.dev
で 200 OKが帰るまで待ちましょう。
自分でgitリポジトリを作ったら、構造が微妙になったのを治したい
repo-root/
└─ [astro-prj]/ ← Astro プロジェクト
└─ src/...
上記のように、Astroプロジェクトがリポジトリの直下に置かれてないので、これを以下のようにflattenして管理したくなりました。そうすることで、コードの管理がシンプルになってわかりやすくなるからです。
[astro-prj]/ ← Astro プロジェクト
└─ src/...
この方法を書いておきます。この操作をする前に、念のためにブランチを切っておくと良いです。
# プロジェクトディレクトリ内のすべての可視ファイル・フォルダを一段上に移動
mv [astro-prj]/* .
# 隠しファイル（例: .gitignore, .eslintrc, .npmrc など）も移動（. と .. は除外される）
mv [astro-prj]/.* . 2>/dev/null || true
# 一応、元のディレクトリが空になっているか確認
ls -a [astro-prj]
# 空になった元ディレクトリを削除
rm -rf [astro-prj]
# package-lock.json を基に依存関係を再インストールし、node_modules を同期
npm install
# 開発サーバを起動して、構成が壊れていないかをブラウザで確認
npm run dev
.gitignoreとかも確認しておきましょう。
今後すること
今回はテンプレートが表示されることをゴールにしましたが、今後を踏まえると以下のことをしておくと良さそうです。
- CICD環境を整える
- 独自のドメインを当てる
- テンプレートから自分のブログサイトにする
まとめ
個人ブログをデプロイしたい人の始まりにできれば幸いです！
Astroの開発に関しても今後書いていきます！
Discussion