AstroJSに入門する
Astroで作ったブログです
https://blog.nknighta.me/
なぜAstroを触ろうと思ったのか?
普段からいろんなJSやTSのフレームワークを試しているのですが、いつも見ているTakuya MatsuyamaさんがYoutube上でAstroを使ってサイトを制作する動画をうｐしてたのと、ウマ娘のキャンペーンでBoC'zの公式サイトがAstroで開発されていて改めて勉強がてらBlogを作ってみました。
AstroJS使いやすいし動作も早いけど、Nextjsより文字化けしやすかったして少し癖ありかも
— Nknight AMAMIYA@varius.technology (@nk4dev) August 27, 2025
でもv5はv1に比べていろいろ機能も追加されてるし、
公式がGitHub pagesへのデプロイ方法も載せてくれてる(しかも日本語)のですごく良きhttps://t.co/JB5f0LQEpf
Astroの方針としては、
"これに対して、モダンなウェブフレームワークの多くは、ウェブアプリケーションを作成するために設計されています。これらのフレームワークは、ブラウザ上におけるより複雑な、アプリケーションのような体験を作成するのに適しています。ログインした管理者向けのダッシュボード、受信トレイ、ソーシャルネットワーク、Todoリスト、さらにはFigmaやPingのようなネイティブに近いアプリケーションなどがその例です。しかし、その複雑さゆえに、コンテンツを配信する際に優れたパフォーマンスを発揮するために苦労するかもしれません。
Astroは、その初期から静的サイトジェネレータとしてコンテンツに焦点を当ててきたため、コンテンツと読者を尊重しながら、パフォーマンスとパワーに優れた動的なウェブアプリケーションへと適切にスケールアップできます。Astroは、コンテンツにフォーカスするという独自の立場から、トレードオフを考慮しつつ、アプリケーションにフォーカスしたウェブフレームワークでは実装する意味がないようなパフォーマンス向上に取り組んでいます。"
だそうです。
ドキュメント上でコンテンツ駆動ベースと書いてあったので、個人的にはやっぱブログに最適なのかなと。
今回使用した技術は
- フロントエンド: AstroJS
- CMS: MicroCMS
- ホスティング:GitHub Pages
ブログのリポジトリ
https://github.com/nk4dev/astro-blog
ホスティング・デプロイ設定
事前にリポジトリを作成しMicroCMSのAPIキーを設定しておくとあとあと楽です。完成してから設定でもいいのですが、ビルド時にエラーを吐きやすくなります。
APIキーはリポジトリのSettings > secrets and variables > Actionsから設定できます。
// @ts-check
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({
site: 'https://blog.nknighta.me',
base: '/',
});GitHub Pages用のせっていはこれだけでした。Nextjsに比べると圧倒的に楽ですね。Nextだと画像の最適化機能が使えなかったりしましたが、Astroであれば特定の機能が使えないということは今のところないのでうれしいポイントです。
今回は自分のドメインを用いてブログを公開するのでbaseには"/"のみ設定していますが、もし<GITHUB_USER_NAME>.github.ioの形式で公開する場合にはリポジトリ名を入れないと404エラーを吐きまくります。
またデプロイはGitHub Actionを使います。これも公式ドキュメントに書いてあります。ありがたい
https://docs.astro.build/ja/guides/deploy/github/#github-actionの設定
deploy.ymlはそのままコピペで.github/workflows/deploy.ymlファイルに記載すれば大丈夫です。
あとはpushしてビルドが完了するのを待つだけです。
引用・参考サイト
Takuyaさんのサイト
Astrojs docs (英語版)
BoC'z (Pixiv百科事典)
https://dic.pixiv.net/a/BoC%27z
※BoC'z公式サイトは公開停止してました...(アクセスするとホームページにリダイレクトする)
Youtube動画