Astro + Cloudflare Workers でブログを作ってみた。
「自分だけの場所」が欲しくて、Astro と Cloudflare Workers を使ってブログを構築しました。
Web開発の本業の方のような華麗なコードでは決してありませんが、素人なりに試行錯誤して形にした記録です。
あんまり期待しないでくださいね…？
と言いつつ、やるからには「小説書き」として、読みやすさ追求や自分なりのこだわりを詰め込んでみました。
今回は、「環境構築からプロジェクトの構成を把握するところまで」をまとめます。
使用したものとそのバージョン
今回、事前に用意するものはこちら。
| ツール | 役割 | 備考 |
|---|---|---|
| Visual Studio Code | エディタ | 開発のメイン環境 |
| Node.js | 実行環境 | Astroを動かすための基盤 |
| pnpm | パッケージ管理 | npmより高速でストレージに優しい |
| GitHub | ソース管理 | コードと記事の保管場所 |
本記事で作成するブログの根幹となるフレームワークのバージョンはざっくりこんな感じです。
これ以外もブログテンプレートを作成するときに勝手に追加されます。
| ライブラリ | バージョン | 役割 |
|---|---|---|
| Astro | 5.17.1 | 静的サイト生成（SSG）の核 |
| tailwindcss | 4.1.18 | ページ全体の装飾 / レイアウト |
| @tailwindcss/typography | 0.5.19 | 記事本文の自動装飾 |
導入
まずはAstro公式のブログテンプレートを使って、土台を作ります。
# プロジェクトの作成
$ pnpm create astro@latest -- --template blog開発環境の起動手順
# フォルダの移動
$ cd [PROJECT_NAME]
# ローカルに開発環境を起動
$ pnpm devサイトレイアウト編集
ここに関しては今回はあまり深く説明しません。 個々の実装についてをすべて解説すると、とんでもない文量になりそうなのですべてを説明することを諦めました。 また、ここが一番の楽しみであると思うのでそれを潰さないようにする意味合いもあります。
ただ、さすがに何も情報なしにここで手放しにしてしまうのもあまりに無責任なので、各構成要素の作り方ではなく 「操作すべき箇所」 を明確にします。 Github から Astro Blog などと検索するとさまざまなテンプレートがたくさんあります。 それらを参考にするか、もしくは実際に導入して試すなどしながら自分好みのレイアウトに変えていってください。 テンプレートを使う分には作者へのリスペクトは必要だけども、導入するのはタダで、始めるのもタダなのでね。
ここでは astro v5 の公式ブログテンプレートをベースとしたとき、どこを編集することで何が起きるのかについてを、観測した範囲でざっくりとメモしたものを共有程度に抑えておきます。
[PROJECT_NAME]
├── public/ # 画像やフォント、アイコンなど、そのまま公開される静的ファイル
├── src/
│ ├── assets/ # 最適化が必要な画像など
│ ├── components/ # ボタンやカードなど、使い回すUIパーツ
│ ├── content/ # 記事の本文（Markdown/MDX）を置く場所
│ ├── layouts/ # ページの基本となる構造を定義
│ ├── pages/ # 実際のURLになるファイル（index.astroなど）
│ ├── styles/ # CSSやTailwindの設定
│ ├── consts.ts # 全体で参照できる変数を設定
│ └── content.config.ts # 記事が持つ情報のルールを決める場所
├── astro.config.mjs # Astroの全体設定ファイル
├── package.json
└── tsconfig.jsontailwindcssの使い方について
# 作業するフォルダに移動しておく
$ cd [PROJECT_NAME]
# tailwindcss と @tailwindcss/typography の導入
$ pnpm add tailwindcss @tailwindcss/typographytailwindcssは、cssでレイアウトや装飾を定義せず、htmlのclassのなかで定義することで 特定のcssが適用されるという一見すると大変そうに見える挙動になっている。
実際のコードの一部を見てもらう。これが…
<button class="my-button">Click me</button>
<style>
.my-button {
background-color: #51a2ff;
color: #f3f4f6;
border: 4px solid #bedbff;
}
</style>こうなる。
<button class="bg-blue-400 text-gray-100 border-4 border-blue-200">Click me</button>わざわざ css や style で定義しなくてもこれだけで同じ見た目を再現できる。
class それぞれの記述で何が起きているのかを見てみよう。 Visual Studio Code 上で、tailwindでhtmlに定義した要素にカーソルを合わせてみると、 実際にcssで書いたときにどういった風に定義されるのかが分かる。
これを見ると、2つほどメリットがあるように感じた。
- cssとhtmlを一本化して個々の要素に対して柔軟に設定できる
- 既に定義されているため、全く同じ挙動をするものが何かひと目でわかる
ただし、ここが微妙だなと思った点としては、
- 定義されていないオリジナルの挙動はCSSやstyleで定義する必要がある
これを意識してみると、どういった場合に使うべきかをなんとなく理解できるようになってくると思います。
【参考】
おわり
今回は、公式のブログテンプレートの状態でローカルで動く（$ pnpm dev で確認できる）ところまでを目標にしました。
ここまでやると、自分自身でウェブサイトを構成するうえで「どこをつくりたいのか、何が必要なのか」
を考えるところまで来れると思っているので、ぜひ楽しんでみてくださいね。
次回の第2回では、 「本文の見た目の調整とフォントの軽量化（サブセット化）」 について。 Google Colab を使い、数MBある日本語フォントをサクサク動く数百KBまで、ブラウザのみで圧縮した手順を公開します。
ここまで読んでいただきありがとうございました。お疲れ様です。