Mar 16, 2024

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

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

Astroの圧勝!

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

NoLanguageNuxtGatsbyAstro
1JavaScript049815
2TypeScript11519763
3Astro/Vuejs2660453
4Sass/PostCSS709740109
5total10901435640

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を追加。

astro.config.mjs
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で作ってみたので、後日紹介予定です。

参考