はじめに
「自分のブログを持ちたい」と思ったとき、真っ先に浮かんだのは WordPress でした。おそらく多くの人が同じ選択肢を思い浮かべるはずです。でも、調べれば調べるほど「別の方法でやってみたい」という気持ちが強くなり、最終的に Astro・microCMS・Netlify という組み合わせでブログを自作することにしました。
この記事では、その技術選定の理由と、実際に構築してみてつまずいたポイントを正直に書きます。「ブログを自作したいけど何を使えばいいかわからない」という方や、「Astro や microCMS が気になっているけど難しそう」という方の参考になれば嬉しいです。
なぜ WordPress をやめたのか
セキュリティ管理の手間が気になった
WordPress は世界中で使われている実績があり、プラグインも豊富で初心者でも扱いやすいプラットフォームです。それは間違いありません。
ただ、技術者として調べていくと気になる点がありました。それがセキュリティ管理の手間です。
WordPress はプラグインやテーマを定期的にアップデートしないと、脆弱性を突かれるリスクが生まれます。個人ブログといえど、サーバーを乗っ取られてスパム送信に使われる事例は珍しくありません。「ブログを書くことに集中したいのに、セキュリティのアップデート対応に時間を取られたくない」というのが正直な気持ちでした。
「新しい技術を試してみたい」という動機も正直にある
もうひとつ、これは技術者あるあるかもしれませんが、Astro を使ってみたかったという純粋な好奇心もありました。
Astro は 2022〜2023 年ごろから注目を集めていたフレームワークで、「静的サイトに強い」「SEO に良い」という評判をよく目にしていました。自分の手で動かしてみることが一番の理解につながると思い、ちょうどいい機会だと判断しました。
選んだ技術スタックと、それぞれの役割
Astro——SEO に強い静的サイトジェネレーター
Astro の最大の特徴は、デフォルトで静的な HTML を生成する点です。
通常の React や Vue を使ったサイトは、ブラウザで JavaScript を実行してページを描画します。一方 Astro は、ビルド時点で HTML を生成して配信します。JavaScript をほとんどブラウザに送らないため、ページの読み込みが速くなります。
この「読み込みの速さ」は SEO に直結します。Google はページの表示速度をランキング要因のひとつとして評価しているため、静的 HTML で配信できる Astro はブログやコンテンツサイトと相性が良いのです。
microCMS——「ヘッドレス CMS」とは何か
記事を管理する CMS として選んだのが microCMS です。日本製のヘッドレス CMS で、無料プランでも十分使えます。
「ヘッドレス CMS」という言葉、初めて聞く方も多いと思います。
従来の CMS（WordPress など）は、コンテンツの管理と Web ページの表示が一体になっています。「ヘッドレス」というのはそのうち「表示（=頭）」の部分を切り離した設計です。コンテンツの管理だけを CMS が担い、表示は API で取得したデータを使って別のフレームワーク（今回は Astro）が行うという仕組みです。
この分離によって、フロントエンドの技術を自由に選べるようになります。
Netlify——GitHub と連携した自動デプロイ
Astro でビルドしたサイトをインターネットに公開するために使ったのが Netlify です。
GitHub リポジトリと連携しておくと、コードを push するだけで自動的にビルドとデプロイが走ります。「ファイルをサーバーに手動でアップロードする」という作業が不要になり、コードを書いたらそのまま公開まで完結するのが魅力です。
構築でつまずいた 2 つのポイント
2〜3 週間で構築しましたが、スムーズではありませんでした。特にハマった点を正直に書いておきます。
1. 独自ドメインの設定——反映待ちの「宙ぶらりん」状態
ブログの URL を独自ドメイン（devlifehacks.dev）にするため、ドメインを取得して Netlify に設定する作業が必要でした。これが初めての体験で、想像以上に戸惑いました。
手順自体はシンプルです。
- ドメイン登録サービスでドメインを購入
- DNS レコードを設定（Netlify のサーバーを向くように）
- Netlify の管理画面で独自ドメインを登録
- SSL 証明書の発行を待つ
ただ、DNS の設定変更はインターネット全体に反映されるまでに数時間〜最大 48 時間かかります。設定ミスがあってもすぐエラーが出ないため、「これで合っているのかどうか分からない」という宙ぶらりんな状態がしばらく続きました。
結果的には正しく設定できていましたが、反映待ちの間は「どこか間違えたのかも」と不安でした。同じ状況になったとき、DNS の変更には時間がかかるのが正常だと知っておくだけで、かなり気持ちが楽になります。
2. microCMS の API スキーマ設計——カスタムフィールドの関係性が分からなかった
microCMS では、記事のデータ構造を「API スキーマ」として定義します。タイトル・本文・カテゴリ・タグといったフィールドを GUI で設定する仕組みです。
ここで最初に戸惑ったのが、カスタムフィールドと通常フィールドの関係性でした。
例えば「カテゴリ」をどう扱うか。単純なテキストフィールドとして持たせるか、別の API として「カテゴリマスタ」を作って参照させるか。後者の「参照」という概念が初見では直感的に理解しにくかったです。
また、「複数選択できるようにしたい」「タグは記事ごとに自由に付けたい」といった要件を実現するフィールド設定も、ドキュメントを何度も読み直しながら試行錯誤しました。
一度スキーマを設定すると後から変更するのが大変なので、最初にしっかり設計しておくことをおすすめします。「この記事に必要なフィールドは何か」「フィールドどうしの関係はどうするか」を紙に書き出してから設定を始めると、やり直しが減ります。
デザインは AI ツールで後から大幅に見直した
最初に完成したバージョンは「とりあえず動く」状態でした。機能的には問題なかったものの、デザインはかなりシンプルなものでした。
その後、Claude Code という AI コーディングツールを使ってデザインを大幅に見直しました。「こういうレイアウトにしたい」「このセクションをもっとすっきりさせたい」という意図を伝えると、CSS の修正やコンポーネントの整理を素早く進めてくれます。
デザインの細かい知識がなくても、ある程度まとまった見た目に仕上げられるのは助かりました。コードを書く量も大幅に減り、「作りたいもの」に集中できた感覚がありました。
実際に運用してみた感想
構築後、実際にブログを運用してみて、個人的には満足しています。
特によかった点は次の 3 つです。
- 記事管理が楽: microCMS の管理画面から記事を書けるので、コードを直接触る必要がない
- 公開作業が不要: GitHub に push すれば自動でデプロイされるため、FTP でのアップロードなど余分な手間がない
- セキュリティを気にしなくていい: WordPress のようなプラグイン管理・セキュリティアップデートが不要で、想像以上にストレスフリー
静的サイトは「記事を書いたらビルドして公開する」という流れが明確で、余計なことを考えなくてよいのが気に入っています。
まとめ
役割 | 選択肢 | 選んだ理由 |
|---|---|---|
フレームワーク | Astro | SEO・表示速度・技術的な興味 |
CMS | microCMS | 日本製・ヘッドレス・無料プランあり |
ホスティング | Netlify | GitHub 連携・自動デプロイ |
つまずいたポイントは「独自ドメインの DNS 設定」と「microCMS の API スキーマ設計」でした。どちらも最初は戸惑いましたが、仕組みを理解してしまえば乗り越えられます。
「WordPress 以外でブログを作ってみたい」「Astro が気になっている」という方は、ぜひこの構成を試してみてください。
