Nuxt vs Gatsby vs Astro：60歳目前のおじさんがAstroに挑戦！

Simple is Best！ 60歳目前のおじさんにとって、複雑なものはNGです。ブログをNuxtからGatsbyに移行した後、最近話題のAstroにチャレンジしてみました。

Astroの圧勝！

Nuxt、Gatsby、Astroでそれぞれブログを作ってみたところ、Astroは圧倒的な軽さで圧勝！ Gatsbyの半分以下のステップ数で構築できました。

TOCやダークモード機能も簡単搭載、さらにTailwind CSSを導入すればデザインも楽々！ 元々ロジックよりデザインの方がコード量が多かったので、コード圧縮にも貢献しました。

Astroのセットアップ

インストールウィザードを使ってAstroをセットアップしていきます。

環境

• Mac OS Sonoma

• node v20.10.0

• yarn v1.22.21

手順

1. Astro公式ドキュメントを確認

2. yarn create astro でプロジェクトを作成。

3. yarn dev で開発サーバーを起動。

4. http://localhost:4321/ で動作確認。

Tailwind CSSとMDXの導入

1. Tailwind CSS導入ガイドを確認

2. @astrojs/tailwindをインストール。

3. npx tailwindcss ini でtailwind.config.jsファイルを作成。

4. 将来の拡張性を考慮し、記事ファイルをMDX形式に対応するために@astrojs/mdxをインストール。

5. astro.config.mjsに@astrojs/tailwindと@astrojs/mdxを追加。

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import sitemap from '@astrojs/sitemap';
import tailwind from '@astrojs/tailwind';
 
export default defineConfig({
  site: 'https://www.akiboi.net',
  integrations: [mdx(), sitemap(), tailwind()],
});

次回

既存の記事を登録し、表示できるようにしていきます

その他

記事と画像をAstroフォルダと連携するNotionアプリをnode.jsで作ってみたので、後日紹介予定です。

参考

• Astro公式ドキュメント: https://docs.astro.build/

• Tailwind CSS導入ガイド: https://docs.astro.build/en/guides/integrations-guide/tailwind/