この記事について
このブログを始めるにあたって選んだ技術構成について書いておきます。今回は「どう作ったか」に絞った記事で、記事の追加フローなど運用面の話はまた別の記事にする予定です。
過去の失敗: XServer + WordPress
実は今回が初めてのブログ挑戦ではありません。以前、XServerを1年契約してWordPressでブログを立ち上げたことがあります。結果的に長続きしなかったのですが、原因は技術的な問題ではなく、扱うジャンルの選定を誤ったことでした。
ただその1年で、WordPress運用の実感は得られました。管理画面からポチポチ操作するだけでサイトが立ち上がる導入のしやすさは確かに魅力でした。一方で、そこからテーマを自分好みにカスタマイズしたり、プラグインを組み合わせて機能を足したりする段階になると、途端に手間が増えた記憶があります。
今回の構成: Astro + Cloudflare + GitHub
今回はエンジニアとしての本業の知見をそのまま活かせる構成にしました。
- Astro: 静的サイトジェネレーター。ページはビルド時にHTMLへ変換され、必要な箇所だけコンポーネント化できる
- Cloudflare: Workers経由の静的アセット配信でホスティング。独自ドメインもCloudflare Registrarで取得し、そのままカスタムドメインとして接続
- GitHub: 記事もコードもリポジトリで管理。ブランチを切ってPRを作成し、レビュー後にmainへマージすれば公開される、という普段の開発と同じフローがそのまま使える
設定ファイルもかなりミニマルです。
// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
site: 'https://codeto-sake.com',
integrations: [sitemap()],
});構築自体は1日で終わりました。GitHubでのPRベースのフローは、エンジニアであれば普段の開発と地続きなので、抵抗なく使えると思います。少なくとも自分はそうでした。
良かった点1: コスト
一般的な選択肢と比べてみます。
| 項目 | XServer + WordPress | 一般的なブログサービス(note・はてなブログ等) | Astro + Cloudflare(本ブログ) |
|---|---|---|---|
| 初期費用 | サーバー契約 + ドメイン代 | 基本無料 | ドメイン代のみ |
| 月額ランニングコスト | 数百〜千円台(サーバー代) | 無料〜1,000円前後(有料プラン利用時) | ほぼ0円(ドメイン更新費のみ) |
| カスタマイズの自由度 | プラグイン・テーマ改修で拡張可能 | テンプレートの範囲内が中心 | コードで全て制御(コンポーネント・CSS変数) |
| 運用に必要な知識 | PHP・DB管理の知識があると安心 | ほぼ不要 | Git/GitHubの知識があれば十分 |
ランニングコストがほぼドメイン代のみに収まる点は、副業として無理なく続ける上でかなり効いています。そして「運用に必要な知識」の欄がそのまま、この構成がエンジニア向けである理由です。Git・GitHubに普段から触れている人なら、学習コストはほとんどかかりません。
良かった点2: スピード
WordPress時代は、キャッシュ系プラグインを入れるなどして手を尽くしても、表示速度には一定の壁がありました。動的にページを生成する仕組み上、どうしてもそこから先は重くなります。
Astroはビルド時に静的なHTMLを生成する仕組みなので、そもそも動的処理の重さを引きずりません。体感でもページの読み込みが明らかに速く、これは今回の構成でいちばん気に入っている点です。
気をつけておきたい点
運用歴はまだ浅く、実体験として困った点は正直まだありません。ただ、構成そのものの性質上、意識しておいたほうがよさそうな点をいくつか挙げておきます。
- 静的サイトなので動的機能は標準搭載ではない: コメント機能やサイト内検索などが欲しくなった場合、外部サービスとの連携が別途必要になります
- コンテンツ変更のたびにビルド・デプロイが必要: WordPressの管理画面のように、保存したその場で反映されるわけではありません。実際、このブログでも記事を「下書き」設定のままマージしてしまい、公開したつもりが本番に反映されていない、というつまずきが直近でありました
- Node.jsのバージョン管理:
.nvmrcなどでバージョンを固定しておかないと、ローカルとデプロイ環境でズレが起きる可能性があります
まとめ
WordPressでの経験を踏まえて、今回は「コストを抑えつつ、エンジニアとして使い慣れた道具(Git・GitHub)で完結できること」を重視してAstro + Cloudflareを選びました。構築も1日で終わり、コスト・速度の両面で今のところ満足しています。
次は、実際にこの構成で記事を追加・運用していく中でのコツやつまずきについて、別の記事で書く予定です。