Astro でブログを作り直した

Next.js のテンプレートを使って作られたブログを Astro で作り直しました。

Astro を選択した理由

Astro は SSG として機能する Web フレームワークです。ブログのような静的コンテンツの配信を目的とするウェブサイトの構築に向いています。 ランタイムで JavaScript を生成しないことからパフォーマンス水準が高く、他の SSG フレームワークと比較しても高速なページの描画を可能とします。

当ブログでは記事の執筆やブログの構築を通しての知識のアウトプットを目的としており、Web アプリケーションのような複雑な挙動はそれほど必要としないことから、Astro が最適と考えました。

また、仮に JavaScript を利用して複雑な挙動を実現したい場合でも Components Island を利用することで最低限の JavaScript でパフォーマンスの低下を最小限にすることができます。 React や Vue 等のコンポーネントを組み込むことができるのも、様々な技術を試すことができる点で魅力的に感じました。

Astro には他にもいくつかの利点があります。詳しくは下記のドキュメントをご参照ください。

Astro を選ぶ理由

構築手順

全体の流れとして、reona.dev のリポジトリ内新規の Astro プロジェクトを立ち上げて、一つの Pull request で移行を進めました。

Getting Started に沿って、CLI コマンドを実行します。執筆時点での Astro の最新バージョンは v2.2.1 です。パッケージマネージャーは pnpm を利用します。

1. pnpm create astro を実行

❯ pnpm create astro
pnpm create v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
warning prettier-plugin-astro@0.7.2: The engine "pnpm" appears to be invalid.
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...

success Installed "create-astro@3.1.2" with binaries:
      - create-astro

╭─────╮  Houston:
│ ◠ ◡ ◠  Let's build something fast!
╰─────╯

 astro   v2.2.1 Launch sequence initiated.

2. プロジェクト名を入力する

   dir   Where should we create your new project?
         ./dev

3. テンプレートを選択する

今回の用途に沿うようブログのテンプレートを選択します。

  tmpl   How would you like to start your new project?
         ○ Include sample files
         ● Use blog template
         ○ Empty

以下のリポジトリがテンプレートとして採用されています。

Charca / astro-blog-template

4. 依存ライブラリのインストール有無を選択する

  deps   Install dependencies? (recommended)
         ● Yes  ○ No

5. TypeScript の利用有無を選択する

    ts   Do you plan to write TypeScript?
         Yes

   use   How strict should TypeScript be?
         ● Strict (recommended)
         ○ Strictest
         ○ Relaxed

推奨されているとおりに strict モードを選択します。

6. Git リポジトリを作成有無を選択する

   git   Initialize a new git repository? (optional)
         ○ Yes  ● No

これで新規の Astro プロジェクトが作成されました。 pnpm dev コマンドでサーバーを立ち上げることができます。

今後やりたいこと

既に TailwindCSS への変更やダークモード対応、下書き機能の追加や markuplint の追加等は実施しましたが、他にも issue に起票して機能追加を実施していく予定です。