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 には他にもいくつかの利点があります。詳しくは次のドキュメントをご参照ください。
構築手順
全体の流れとして、reona.dev のリポジトリ内新規の Astro プロジェクトを立ち上げて、1 つの Pull request で移行を進めました。
Getting Started に沿って、CLI コマンドを実行します。執筆時点での Astro の最新バージョンは v2.2.1 です。パッケージマネージャーは pnpm を利用します。
pnpm create astroを実行
❯ pnpm create astro
pnpm create v1.22.19
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
warning [email protected]: The engine
- pnpm appears to be invalid.
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed
- [email protected] with binaries:
- create-astro
╭─────╮ Houston:
│ ◠ ◡ ◠ Let's build something fast!
╰─────╯
astro v2.2.1 Launch sequence initiated.- プロジェクト名を入力する
dir Where should we create your new project?
./dev- テンプレートを選択する
今回の用途に沿うようブログのテンプレートを選択します。
tmpl How would you like to start your new project?
○ Include sample files
● Use blog template
○ Empty次のリポジトリがテンプレートとして採用されています。
- 依存ライブラリのインストール有無を選択する
deps Install dependencies? (recommended)
● Yes ○ No- TypeScript の利用有無を選択する
ts Do you plan to write TypeScript?
Yes
use How strict should TypeScript be?
● Strict (recommended)
○ Strictest
○ Relaxed推奨されているとおりに strict モードを選択します。
- Git リポジトリを作成有無を選択する
git Initialize a new git repository? (optional)
○ Yes ● Noこれで新規の Astro プロジェクトが作成されました。
pnpm dev コマンドでサーバーを立ち上げることができます。
今後やりたいこと
すでに TailwindCSS への変更やダークモード対応、下書き機能の追加や markuplint の追加等は実施しましたが、他にも issue に起票して機能追加を実施していく予定です。