Astro でブログサイトを作ってみたら、どのフレームワークよりも楽だった話

あらすじ

最近、新しいブログサイトをいくつか作成しました。
その中でも Astro で作ったブログサイトは、非常に軽く、速く、自由度も高いことがわかりました。

これまでのブログサイトでは、だいたい次のような流れで記事を作成していました。

• 書きたい記事の下書きを作成 → 記事を完成形に調整（手動） → CMS で内容を整形 → 保存してサイトに反映

ですが、最近 Codex を使い始めてからは、こうなりました。

• 書きたい記事の下書きを作成 → Codex で記事を整形 → CMS で内容を整形 → 保存してサイトに反映

さらに Astro ベースのブログにすると、こうなります。

• 書きたい記事の下書きを作成 → Codex で整形しながらサイトへ反映

記事を完成させるついでに、Markdown ファイルや HTML、JavaScript まで Codex に任せられるので、
かなり手順を省略できるようになりました。

Astro ブログ（と Codex）を使うメリットとデメリット

メリット

• データベースがないので、DB 操作ミスによる全ロスを回避できます。
• ブログ記事ごとに md や html ファイルが生成されるので、GitHub でバージョン管理できます。
• DB のバックアップが不要になります。
• 記事エディターの機能に依存しないので、自由度が高いです。
• サイト自体が非常に速く、軽いです。
• 生成された md ファイルは他のブログサービスにも転載できます（zenn.dev など）。

デメリット

• Codex を使う料金が発生します。
• エンジニアでないと、少しハードルが高いかもしれません。

とはいえ、エンジニアにとっては非常に便利なやり方でした。 今回は、Astro ブログの始め方を簡単に紹介します。

Astro の準備

前提として npm と Codex が必要になります。
Codex と npm のインストール方法は、検索すればすぐに出てくるのでここでは省略します。

npm コマンドで Astro を入れます。

    npm create astro@latest

途中でいくつか質問が出てきますが、下記の画像の通りに答えてください。

Good luck out there, astronaut! と表示されたら、問題なくインストールできています。

次に、Astro を起動します。

    npm run dev

これで http://localhost:4321/ にアクセスすれば、Astro のブログを確認できます。

Blog のリンクに移動すると、テンプレートの記事が 4 つ作成されています。

First Post 以外は不要なので、とりあえず blog フォルダー内の不要なファイルを削除します。

すると、ブログページには記事が 1 つだけ残ります。

Astro を好きなように改装する

そのままだとこのブログはあまり個性的ではありません。
Astro のテーマを買うほどでもなかったので、
ChatGPT に Astro のテーマをデザインしてもらいました。
題材は、オンラインゲームのギルド運営ブログサイトです。

準備として、このテーマ画像を src/design/ フォルダーに入れておきます。
その他の画像ファイルも ChatGPT にお願いして、事前に作成しておきます。

そして、下記のプロンプトで Codex にお願いします。

    See src/design/theme.png. I want you to rework the current astro css into this theme.
    the require image is provided in the design folder. Analyse each image and make use of them in the theme.
     - icon.png is the user icon for the blog site
     - background.png is the main hero image background you can see in the theme.png
     - emblem.png is the top logo icon on the header
     - blog_post01.png is the hero image for the first blog post, which is also show on the index page
    Use `Noto sans Gothic` font only for the site and support language is only japanese.
    Use Playwright tool to capture the screen shot and test the create theme.
    If the created theme does not match fix it until it matches.
    For now you should only focus on 1440px width only and do not have to care about the other resolution.

日本語版はこちらです。

    src/design/theme.png を確認してください。現在の Astro の CSS を、
    このテーマに合わせて作り直してほしいです。
    必要な画像は design フォルダー内に用意されています。
    各画像を分析し、テーマ内で適切に活用してください。
     - icon.png はブログサイトのユーザーアイコンです
     - background.png は theme.png に表示されているメインのヒーロー背景画像です
     - emblem.png はヘッダー上部に表示するロゴアイコンです
     - blog_post01.png は最初のブログ記事のヒーロー画像で、インデックスページにも表示されます
    サイト全体では Noto Sans Gothic フォントのみを使用し、対応言語は日本語のみとしてください。
    Playwright ツールを使用してスクリーンショットを撮影し、作成したテーマをテストしてください。
    作成したテーマが参照画像と一致しない場合は、一致するまで修正を続けてください。
    現時点では、幅 1440px の表示だけに集中し、その他の解像度については考慮しなくて構いません。

プロンプトで重要なのは、参考デザイン画像がどこにあるのか、
そして結果を確認できるツールは何かを明確に伝えることです。\

今回は Playwright ツールを使って、Codex が結果を確認できるようにしました。

しばらくして http://localhost:4321 に再度アクセスすると、このようなサイトが出来上がっていました。

少し違うところもありますが、後で細かい指示を出せば修正できます。

ブログの記事ページもきちんと作成されていました。

ブログポストを作成してみる

試しに、下記のプロンプトで記事を作成してもらいました。

    Astral Gate というゲーム内ギルドの勧誘用に、新しいブログポストを作成してください。
    皆が参加したくなるような雰囲気のサムネイル画像も作成してください。

しばらくすると、記事ができました。

よく確認すると、index ページの記事一覧には、見栄えを整えるための仮記事が使われているようでした。
修正するように指示したところ、作成した記事が一覧に表示されるようになりました。

下書きだけで内容が整形され、Markdown まで生成され、サイトのカスタマイズもできるので、かなり便利です。
テーマを買う必要もないので、おすすめです。

最後に

私自身もいくつかのブログシステムを使ってきましたが、これが一番しっくりきました。

Markdown で記事を書けて、すべての要素を自由に修正できるうえ、無料で運用できます。
Codex や Claude が登場する前であれば、HTML を一つひとつ作成するのはかなり大変でした。
ですが、今なら一瞬です。
むしろ、普通の記事を書くより早いくらいです。

これからも Astro を愛用してブログを更新し続けたいと思います。

※ 本記事は筆者個人の見解および検証結果に基づくものであり、株式会社grasysとしての公式見解やサービス・製品の提供を保証するものではありません。掲載内容の正確性や動作・安全性について当社は責任を負いかねますので、あらかじめご了承ください。