神戸を拠点に活動するソフトウェアエンジニア、富田真光（Tomita Masamitsu）の個人サイト・技術ブログ。プロフィール・実績・技術記事を公開しています。https://tomy-dev.com/jahttps://tomy-dev.com/blog/renewed-with-astro/https://tomy-dev.com/blog/renewed-with-astro/WordPressで運用していたポートフォリオサイトを、Astro + Cloudflareの構成で作り直しました。移行の理由と新しい構成について書きます。Mon, 20 Jul 2026 00:00:00 GMT<p>このサイトは、もともとWordPressのオリジナルテーマで作ったポートフォリオサイトでした。今回それをやめて、Astroで作り直しました。この記事はそのリニューアル後の1本目です。</p> <h2 id="なぜwordpressをやめたのか">なぜWordPressをやめたのか</h2> <p>理由はシンプルで、<strong>運用のシンプル化と爆速化</strong>です。</p> <ul> <li>本体・プラグインの脆弱性対応に追われる</li> <li>サーバーやDBの管理が必要</li> <li>サイトの表示速度を上げるにも限界がある</li> <li>そもそもWordPressである必要がない</li> </ul> <p>個人のサイトに管理画面もDBも必要ないと気づき、静的サイトに全振りすることにしました。 当初はNext.jsも検討していたのですが、軽量さと手軽さからAstroにしました。</p> <h2 id="新しい構成">新しい構成</h2> <ul> <li><strong>フレームワーク</strong>: <a href="https://astro.build/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAA3lBMVEX///8AAADS0tLh4eFtbW3r6+uYmJilpaV9fX1bW1vn5+fx8fHPz8/Z2dnLy8v8/PyysrJEREQSEhJBQUEpKSk0NDS+vr4aGhqenp6RkZEtLS2IiIheXl4MDAy5ubnxtdj1yuP53vfuocfiCZLoabH43Oz78fjzsuPrWtHoNdDuqsThK4XjM47jKpHjJJXjIZrlIabnLrPpVcT0ztneIW7gMHrkOpnlO6TlLKXvntDbIVrleJX22ODpj6zhOILfN3DjWZDaKE/dNV3sprfaQ1LZIT7rrLPooqLUAADZSUnwKWruAAABH0lEQVQ4jX2T60KCQBCFZxXlshpqSiWVWUkXqTTFzEq72eX9XyhxFnYXJs6vmXM+hmEBACleK6HqQIulqpH5jgQMEjAkwFwid5WcNQigoQJNAmiqAKvk8oqWs2oOqGJgiWdp5YBWMnoXi1Imr6PdBjDFqAxgpbdOlskAwi1vyg6WnpZ7aO7F9T7WtgbYaB7EtSOmcSXnwsP33MbGVABTW0wcSVcBumj52JWVjRWnY1iJ41uHR5LfHoKf+4b4sS2PwsumKMfR+95JWvbJC07PznuDwA0GF5dXJHA9DG9u7+aj0Xh8TwKTaRQNw3A2e5g/0kstnp5fouVyw9A5TGJotZq+Bv8Asd7eFx8FMcDn+qswh+8f6qdS9Vu0wFZcb/8AGq4R6TkbzaMAAAAASUVORK5CYII=" alt="" aria-hidden="true" width="16" height="16" class="link-favicon">Astro</a></li> <li><strong>CSS</strong>: Tailwind CSS</li> <li><strong>ホスティング</strong>: Cloudflare</li> <li><strong>コンテンツ管理</strong>: Markdown（Gitで管理）</li> </ul> <p>Astroはデフォルトで<strong>JavaScriptをほぼ配信しない</strong>フレームワークです。このサイトで動いているJSは、ダークモード切替の数行だけに厳選しました。 あとはビルド時に生成された静的なHTMLとCSSだけで動いているので表示速度が爆速です。</p> <p>あとは記事の管理の作成・管理をマークダウンでしたかったというのも大きいです。 CMSを別で用意することなく、VS Codeで記事を書いて、mainにマージされれば自動的に配信されるという快適さも得ることができました。</p> <p>また、ホスティングに<strong>Cloudflare Pages</strong>を選んだのは、<strong>世界中のエッジサーバーから高速に配信でき、Githubと連携したCI/CDまで無料で完結する</strong>ためです。 今の構成でかかってくるコストはドメイン代だけになりました。</p> <p>シンプルにプロダクトとしてCloudflareが好きだからというのもあります。</p> <h2 id="こだわったところ">こだわったところ</h2> <h3 id="とにかく速く">とにかく速く</h3> <ul> <li>Webフォントを使わず、OS標準フォントで表示</li> <li>画像はビルド時に最適化</li> <li>静的ファイルをCloudflareのエッジから配信</li> </ul> <h2 id="これからのこと">これからのこと</h2> <p>このブログでは、技術のこと・作ったもの・気になっていること・日々の活動について書いていく予定です。よろしくお願いします。</p> AstroTailwind CSSCloudflare