<p>Astroで作ったブログです</p><p>https://blog.nknighta.me/</p><h2 id="h148ee15d9e">なぜAstroを触ろうと思ったのか?</h2><p>普段からいろんなJSやTSのフレームワークを試しているのですが、いつも見ているTakuya MatsuyamaさんがYoutube上でAstroを使ってサイトを制作する動画をうｐしてたのと、ウマ娘のキャンペーンでBoC&apos;zの公式サイトがAstroで開発されていて改めて勉強がてらBlogを作ってみました。</p><p></p><blockquote class="twitter-tweet" data-theme="dark" data-dnt="true" align="center"><p lang="ja" dir="ltr">AstroJS使いやすいし動作も早いけど、Nextjsより文字化けしやすかったして少し癖ありかも<br><br>でもv5はv1に比べていろいろ機能も追加されてるし、<br>公式がGitHub pagesへのデプロイ方法も載せてくれてる(しかも日本語)のですごく良き<a href="https://t.co/JB5f0LQEpf">https://t.co/JB5f0LQEpf</a></p>— Nknight AMAMIYA@varius.technology (@nk4dev) <a href="https://twitter.com/nk4dev/status/1960532121778577808?ref_src=twsrc%5Etfw">August 27, 2025</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<p>Astroの方針としては、</p><p></p><blockquote><p>&quot;これに対して、モダンなウェブフレームワークの多くは、<strong>ウェブアプリケーション</strong>を作成するために設計されています。これらのフレームワークは、ブラウザ上におけるより複雑な、アプリケーションのような体験を作成するのに適しています。ログインした管理者向けのダッシュボード、受信トレイ、ソーシャルネットワーク、Todoリスト、さらには<a href="https://www.figma.com/" target="_blank" rel="noopener noreferrer nofollow">Figma</a>や<a href="https://ping.gg/" target="_blank" rel="noopener noreferrer nofollow">Ping</a>のようなネイティブに近いアプリケーションなどがその例です。しかし、その複雑さゆえに、コンテンツを配信する際に優れたパフォーマンスを発揮するために苦労するかもしれません。</p><p style="text-align: start">Astroは、その初期から静的サイトジェネレータとしてコンテンツに焦点を当ててきたため、コンテンツと読者を尊重しながら、<strong>パフォーマンスとパワーに優れた動的なウェブアプリケーションへと適切にスケールアップできます</strong>。Astroは、コンテンツにフォーカスするという独自の立場から、トレードオフを考慮しつつ、アプリケーションにフォーカスしたウェブフレームワークでは実装する意味がないようなパフォーマンス向上に取り組んでいます。&quot;</p></blockquote><p>だそうです。</p><p>ドキュメント上でコンテンツ駆動ベースと書いてあったので、個人的にはやっぱブログに最適なのかなと。</p><p>今回使用した技術は</p><ul><li>フロントエンド: AstroJS</li><li>CMS: MicroCMS</li><li>ホスティング:GitHub Pages</li></ul><p>ブログのリポジトリ</p><p><a href="https://github.com/nk4dev/astro-blog">https://github.com/nk4dev/astro-blog</a></p><h2 id="h9de96a3ebd">ホスティング・デプロイ設定</h2><p>事前にリポジトリを作成しMicroCMSのAPIキーを設定しておくとあとあと楽です。完成してから設定でもいいのですが、ビルド時にエラーを吐きやすくなります。</p><p>APIキーはリポジトリのSettings &gt; secrets and variables &gt; Actionsから設定できます。</p><div data-filename="astro.config.mjs"><pre><code class="language-javascript">// @ts-check
import { defineConfig } from &apos;astro/config&apos;;

// https://astro.build/config
export default defineConfig({
    site: &apos;https://blog.nknighta.me&apos;,
    base: &apos;/&apos;,
});</code></pre></div><p>GitHub Pages用のせっていはこれだけでした。Nextjsに比べると圧倒的に楽ですね。Nextだと画像の最適化機能が使えなかったりしましたが、Astroであれば特定の機能が使えないということは今のところないのでうれしいポイントです。</p><p>今回は自分のドメインを用いてブログを公開するのでbaseには&quot;/&quot;のみ設定していますが、もし&lt;GITHUB_USER_NAME&gt;.github.ioの形式で公開する場合にはリポジトリ名を入れないと404エラーを吐きまくります。</p><p>またデプロイはGitHub Actionを使います。これも公式ドキュメントに書いてあります。ありがたい</p><p><a href="https://docs.astro.build/ja/guides/deploy/github/#github-actionの設定">https://docs.astro.build/ja/guides/deploy/github/#github-actionの設定</a></p><p>deploy.ymlはそのままコピペで.github/workflows/deploy.ymlファイルに記載すれば大丈夫です。</p><p>あとはpushしてビルドが完了するのを待つだけです。</p><h2 id="hbc48be6f8b">引用・参考サイト</h2><p>Takuyaさんのサイト</p><p><a href="https://uses.craftz.dog/">https://uses.craftz.dog/</a></p><p>Astrojs docs (英語版)</p><p><a href="https://astro.build/">https://astro.build/</a></p><p>BoC&apos;z (Pixiv百科事典)</p><p><a href="https://dic.pixiv.net/a/BoC%27z">https://dic.pixiv.net/a/BoC%27z</a></p><p>※BoC&apos;z公式サイトは公開停止してました...(アクセスするとホームページにリダイレクトする)</p><p>Youtube動画</p><div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/3_JE76PKBWE?rel=0" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" allowfullscreen scrolling="no" allow="accelerometer *; clipboard-write *; encrypted-media *; gyroscope *; picture-in-picture *; web-share *;"></iframe></div>

AstroJSに入門する