こんにちは。Liberlunaメンバーのnakasyouです。

EJS

Liberlunaのサイトは、初めは、ejsで作られていました。

<%- include("header.ejs") %>
<h1>Libeluna</h1>

こんな感じです。他ファイルを埋め込むことができます。便利でした。

しかし、次第に、ejsで開発するのは辛くなってきました。なぜなら、includeを大量に書く羽目になったり、<style>が乱立したりしてしまったからです。

NuxtJS

そこで、新しく、NuxtJSというもので開発を始めてみました。 NuxtJSは、Vue.jsをサーバーでレンダリングし、静的ファイルを出力できるものです。

Vue.jsを使っているので、スコープ付きStyleが使えます。style同士が競合することを防げるわけです。 また、外部モジュールを使って、sitemap.xmlを作ることができます。すごく便利です。

しかし、NuxtJSは、もともと、動的サイトを作るものです。(たぶん) なので、静的サイト開発が難しいと感じました。

また、NuxtJSで作ったLiberlunaのサイトは、Nuxt2を使っていました。Nuxt3にしたいな、と思っていました。

Astro

たまたま、Astroというフレームワークを耳にしました。そのフレームワークは、静的サイトを作るために存在するそうです。 Nuxt3に切り替えたいな、と思っていて、きりがいいので、Astroを使ってみました。

感想は、使いやすいです。開発モードのリロード速度は、Nuxt2より、圧倒的に速いです。

純粋な静的サイトを作ることを目的にしているので、インターネットで検索しても、動的サイトの情報は出てきません。 静的サイトの情報のみ出てくるので、開発しやすいです。

Astroのサイトは、習得も含めて、1週間ほどで出来ました。NuxtJSは、1ヶ月近くかかっていました。 つまり、とても簡単だということです。

特徴

JavaScriptとHTMLが混ざったような形です。

---
import Header from "../components/Header.astro"
---
<div>
  <Header />
</div>
<style>
/* Style */
</style>

のような形で基準します。VueとJSXが混ざった感じです。 しかも、動的ルーティングができます。また、Markdownを標準でサポートしています。

まとめ

Astroを使えば、簡単に静的サイトを作ることができます。 みなさんも、お試しあれ〜。