reona.dev

Astro でブログを作り直した


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

2023/06/29 追記:Next.js に出戻りしました。Astro 版はリポジトリを分けて残しています。https://github.com/reona5/dev-by-astro

Astro を選択した理由

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

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

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

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

Astro を選ぶ理由

構築手順

全体の流れとして、reona.dev のリポジトリ内新規の Astro プロジェクトを立ち上げて、1 つの 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.
  1. プロジェクト名を入力する
   dir   Where should we create your new project?
         ./dev
  1. テンプレートを選択する

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

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

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

Charca / astro-blog-template

  1. 依存ライブラリのインストール有無を選択する
  deps   Install dependencies? (recommended)
 Yes No
  1. TypeScript の利用有無を選択する
    ts   Do you plan to write TypeScript?
         Yes
 
   use   How strict should TypeScript be?
 Strict (recommended)
 Strictest
 Relaxed

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

  1. Git リポジトリを作成有無を選択する
   git   Initialize a new git repository? (optional)
 Yes No

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

今後やりたいこと

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