Official Sitehttps://crab-blog.crab-lab.workers.dev/enhttps://crab-blog.crab-lab.workers.dev/posts/hello-fuwari/https://crab-blog.crab-lab.workers.dev/posts/hello-fuwari/Cloudflare WorkersとGitHub Actionsを利用してFuwari製ブログを構築した記録Sun, 02 Aug 2026 00:00:00 GMT<h1>はじめに</h1> <p>はい、どうもcrabです。 以前から個人のサイトを作成したいと思っていて始めました。<br /> これからWeb開発をメインに発信できたなあと思います。<br /> まずは手始めに今回のブログを作成した経緯について簡単にまとめたいと思います。<br /> ちなみにこの記事はchatgptでほぼすべて書いてもらいました。なので間違っていることがあるかもしれないのでダブルチェックをお願いします。。。</p> <p>今回は</p> <ul> <li>Astro</li> <li>Fuwari</li> <li>Cloudflare Workers</li> <li>Github Actions</li> </ul> <p>を利用して構築しました。以下それぞれ選んだ理由を記載します。 chatgptと相談して選んだので、理由は後付けですが・・・</p> <h2>Cloudflare Workersを選んだ理由</h2> <p>ブログを公開する方法はいくつかあります。</p> <ul> <li>GitHub Pages</li> <li>Vercel</li> <li>Netlify</li> <li>Cloudflare Workers</li> </ul> <p>今回はCloudflare Workersを選びました。</p> <p>理由は以下の3つです。</p> <ul> <li>GitHubとの連携が簡単</li> <li>CDN込みで高速</li> <li>将来的にWorkersやKVなどCloudflareのサービスも使ってみたい</li> </ul> <h2>Astroを選んだ理由</h2> <p>今回はAstroを採用しました。</p> <p>理由は</p> <ul> <li>静的サイト生成が高速</li> <li>SEOに強い</li> <li>Markdownで記事を書ける</li> <li>ReactやSvelteなども組み込める</li> </ul> <p>という点です。</p> <p>拡張性の高さも結構ありますね。もともと自作で作成していたアプリとかも埋め込みたいですね。</p> <h2>Fuwariを選んだ理由</h2> <p>テーマはいくつか比較しました。</p> <ul> <li>AstroPaper</li> <li>AstroWind</li> <li>Yukina</li> <li>Fuwari</li> </ul> <p>最終的にFuwariを選びました。</p> <p>決め手は</p> <ul> <li>シンプルで見やすい</li> <li>デザインの完成度が高い</li> <li>ダークモード対応</li> <li>タグや検索機能が充実している</li> <li>カスタマイズしやすい</li> </ul> <p>という点です。</p> <p>プロフィール画像との雰囲気も合っていたので採用しました</p> <hr /> <h1>構築手順</h1> <h2>GitHubリポジトリを作成</h2> <p>まずGitHubで新しいRepositoryを作成します。</p> <p>今回はPublic Repositoryで作成しました。</p> <hr /> <h2>Cloudflare Workersを作成</h2> <p>Cloudflareへログインし、</p> <p>Workers &amp; Pages</p> <p>から新しいWorkerを作成します。</p> <p>最初に</p> <pre><code> workers.dev </code></pre> <p>のサブドメイン登録を求められます。</p> <p>これは初回のみ必要です。</p> <hr /> <h2>GitHub Actionsを設定</h2> <p>GitHub Secretsへ</p> <ul> <li>CLOUDFLARE_API_TOKEN</li> <li>CLOUDFLARE_ACCOUNT_ID</li> </ul> <p>を登録します。</p> <p>その後、</p> <pre><code> .github/workflows/deploy.yml </code></pre> <p>を作成し、</p> <p>Push時にCloudflare Workersへ自動デプロイするよう設定しました。</p> <hr /> <h2>Fuwariを導入</h2> <p>Fuwariをインストールします。</p> <pre><code>pnpm create fuwari@latest </code></pre> <p>インストール後</p> <pre><code>pnpm install </code></pre> <p>で依存関係を取得します。</p> <hr /> <h2>ハマったポイント</h2> <h3>workers.devの登録</h3> <p>Cloudflare Workersでは最初にworkers.devのサブドメイン登録が必要でした。</p> <h3>Astroのバージョン</h3> <p>Astro 7へアップデートすると @astrojs/svelteとのバージョンが合わずビルドエラーになりました。</p> <p>最終的には</p> <p>Astro 5 @astrojs/svelte 7.2.3</p> <p>へ戻すことで解決しました。</p> <h3>GitHub Actions</h3> <p>Biomeのフォーマットチェックで失敗したため、 コード整形を実施してからPushしました。</p> <h2>今後</h2> <p>このブログでは今のところ</p> <ul> <li>Web開発</li> <li>米国株投資</li> </ul> <p>について発信していく予定です。 お楽しみに。</p> <h2>まとめ</h2> <p>Cloudflare WorkersとFuwariを利用することで、 無料かつ高速なブログを構築できました。</p> <p>今後も実際に試した内容や、 開発中にハマったポイントを中心に記録していこうと思います。</p>