このブログを支える技術

約4分で読めます2,023文字

前回の記事ではブログを作った理由を書いた。今回はこのブログを何で作ったのか、なぜそれを選んだのかを書いておく。

構成

このブログは次の組み合わせで動いている。

Itsuking Blog の構成図。microCMS で書いた記事を GitHub Actions が取得し、Astro で作った HTML を Cloudflare Workers にデプロイする。閲覧数と拍手は /api/* を通して D1 に保存する。

役割

使っているもの

サイトを作る

Astro

記事を書く・管理する

microCMS

サイトを置く

Cloudflare Workers

閲覧数、アクセスカウンター、Web 拍手

Cloudflare Workers と D1

サイト内検索

Pagefind

背景の 3D

Three.js

自動デプロイ

GitHub Actions

記事は microCMS の管理画面で書く。公開すると GitHub Actions が動き、全ページを HTML として作り直して Cloudflare Workers に置く。

調べ始めたきっかけ

構成を決めるにあたって、まず Claude に「ヘッドレス CMS とは何?」と聞いた。そこから Astro とは何か、microCMS とヘッドレス CMS はどう違うのか、Cloudflare Workers と組み合わせられるのか、と順に聞いていき、今の組み合わせにたどり着いた。

Astro を選んだ理由

Astro を知ったのは、知り合いのエンジニアが自分のブログに使っていたからだ。今回ブログを作るにあたって改めて調べ、カスタマイズしやすく、自分のブログには十分だと判断した。

SSG にした理由

ページの作り方はアクセスのたびに作る SSR と、ビルドのときにまとめて作っておく SSG を比べた。ブログを Astro で作るなら、SSG が合うと考えた。

決め手は SEO に強いことと、読者が見たいページをすぐに表示できることだった。SSG ではページを前もって HTML にしておくので、アクセスがあればそれを返すだけで済む。

microCMS を選んだ理由

ブログを作ったあと、一度は記事を Markdown ファイルにして GitHub で管理したいと考えた。エンジニアという仕事柄、記事も Git で記録していきたかったからだ。記事を書くたびにコミットすれば、GitHub の草(プロフィールに並ぶ、活動した日の緑のマス)も生やせる。

しかし考え直してやめた。手軽に自分の気持ちや感じたことを文章にするのがブログだからだ。記事を 1 本書くたびにエディタでファイルを作り、コミットしてプッシュするのでは、書くまでの手間が増える。microCMS ならブラウザで管理画面を開けばすぐ書ける。

Cloudflare Workers を選んだ理由

Cloudflare Workers を知ったのは、yusukebe さん(新しいタブで開きます)がきっかけだ。yusukebe さんはブログ(新しいタブで開きます)でも Workers を紹介している。

選んだいちばんの理由はサーバー代をかけたくなかったことだ。個人のブログなので、費用をかけない構成にした。

Pagefind を選んだ理由

サイト内検索には Pagefind を使っている。選んだのは、サイト内を検索しやすくするためだ。前回の記事で書いたとおり、X では過去の自分の考えを検索しにくかった。それもブログを作った理由の 1 つなので、検索はしやすくしておきたかった。

Pagefind はビルドのあとに記事の本文から検索用の索引を作る。検索そのものは読者のブラウザの中で動くので、検索のためのサーバーを用意しなくても、記事の本文まで検索できる。索引は日本語と英語で分けて作っている。

2000 年代のブログの雰囲気にした理由

このブログにはサイドバー、アクセスカウンター、Web 拍手など、2000 年代のブログによくあったものを入れている。

最初は今風のミニマルな構成で作った。しかし余白が多く、寂しく感じた。そこで、昔のブログの構成を取り入れた。

アクセスカウンターと Web 拍手は完全に自分のやる気のためだ。アクセスが多かったり、記事に拍手がたくさん付いていたりすると、ブログを続けようと思える。ただ、数字が連打で荒らされては意味がないので、回数制限も付けている。

TypeScript 7 で困ったこと

実際に作ってみて引っかかったのが TypeScript 7 だ。2026 年 11 月の時点では、Astro のプロジェクトに TypeScript 7 を入れると型チェック(astro check)が動かない。そのため、このブログは TypeScript 6 のままにしている。

同じ問題は Astro のブログで TypeScript 7 を試した灯里さんの記事(新しいタブで開きます)にも書かれている。この記事では、Astro を通さずに TypeScript だけで型チェックすると、7 は 6 の約 5 倍速かったそうだ。

Astro の GitHub の issue(新しいタブで開きます)を読むと、原因は Astro だけにあるわけではない。Astro の型チェックが使う TypeScript の API を、TypeScript 7 がまだ提供していない。issue では、TypeScript 7.1 が出れば Astro のファイルも TypeScript 7 で型チェックできるようになる見込みだと説明されている。早く 7 に上げられるようになってほしい。