LULLIECAT

Astroという爆速のフレームワークがあると聞き、ちょっと気になったのでサイトをAstroで作りなおしました。元々簡単なサイトだったので、1日で概ね移行することができました。

今まではWordPressとそのプラグインのSimply Staticを使ってこのサイトを構築してきました。特に問題なく構築でき、また、様々な知見も得ることができました。このくらいのサイトだと、htmlファイルの生成に20秒程度しかかからず、速度も満足いくものでした。そのままGitHubへpushし、Cloudflare Pagesを使ってデプロイする、という一連の作業もスムーズに行え、環境としてはかなり良くできたと思っています。

ですが、将来を見据えた場合に不安があるのも確かです。Simply Staticというプラグインが更新されているうちは問題ないと思いますが、代替のプラグインが見つからず、不安が残ります。

将来の不安としては、WordPressに保存している記事の形式も若干不安がありました。ブロックテーマ用のタグが含まれるhtmlファイルの形式で記事を保存してあります。この形式だと、他のCMSに移行するのには若干手間がかかるかも、という不安がありました。

また、ブロックテーマも思ったよりイマイチなものでした。htmlを生成することに関してはブロックテーマはかなり良い選択肢だと思います。しかし、そのhtmlをデザインするには機能が不十分でした。各種要素に対するデザインは可能なのですが、クラス属性に対してデザインするためには、結局CSSを書く必要があるからです。要素が現れるコンテキストに依存して見た目を変えたいのですが、ブロックテーマでは要素は一律同じ見た目になります。

結局、ブロックテーマではWordPressのGUI上でできるデザインはせず、htmlの生成とクラス属性の付与だけ行い、デザインは別途CSSを直接書くことにしました。CSSにはなれたので特にこの環境でも問題ないのですが、なんかもったいないなという気がしています。

また、ブロックエディタでは、HTML文章は本来出力されるhtmlの構造とは別の構造をとるため、CSSを当てるのに少しテクニックが必要になります。また、JavaScriptで書かれた機能をブロックエディタ上で使うのも、できなくはないのですがうまく動かないことも多いように感じました。

そんな中色々と調べていると、最近はAstroというウェブフレームワークの勢いが良いということを小耳にはさみました。どうやら爆速でウェブサイトを生成できるとのことです。いわゆるStatic Site Generation(SSG)というやつで、ぼくがいままでWordPress + Simply Staticでやっていたことと同様のことができそう、というところが興味をひかれたポイントでした。

早速、ウェブサイトの構築を始めてみましたが、これがかなり簡単で感触も良く、かなり気に入りました。Astroは基本的にhtml文章とCSS、Markdownという広く一般的な技術を用いてサイトを構築します。独自の形式は少ないため、いままで学んできたものが素直に使えて快適でした。また、htmlとMarkdownでコンテンツを作っている限りなら、今後の移行にも不安がありません。

多くのフレームワークやWordPressがそうであるように、Astroにもコンポーネントという概念があります。部品を作って使いまわすことができるため、サイトの構築や更新も手間なく行えそうです。コンポーネントに渡すパラメーターもPropsという概念が使われていて、これもフレームワークの世界ではある程度は一般的なのでしょうか？関数の引数のような感覚で使えるので、素直に書くことができます。

コンポーネント自体は、ほとんどHTML文章です。そこに、CSSとJavaScriptのコードを付随させることができます。JSXのような見た目になります。カスタム要素を作るような感覚で書いていけば問題なく使え、とても直感的です。

WordPressのテンプレート階層に相当するものは、URLのパスベースでのページの振り分けになると思います。これも直感的でわかりやすいですね。

WordPressのループに相当するもの、つまり記事のリストをとってくるものも当然あります。Markdownなどで書かれた記事を置いておくディレクトリはコンテンツコレクションと呼ばれます。このコンテンツコレクションの中のファイルのリストを取り出すことができ、その後でMarkdownのフロントマターなどでそれをフィルタリングできます。フロントマターは自由に定義できるため、WordPressよりも柔軟なフィルタリングが可能です。

ページネーションも問題なく存在します。ただこれはまだぼくは手を出していないので未確認です。

ウェブページ生成速度は、Simply Staticと同等かなーという感じです。コンパイルに時間がかかっているようなので、記事数が増えるとAstroの方が速くなるかもしれません。

ざっと触れた感じですと、以上のような印象を持ちました。軽く触れた程度でサイトを移行できたので、かなり簡単な部類だと思います。このサイトは1日で移行できました。結構気に入りましたね。

このように、フロント側はAstroで良いのですが、今度はバックエンドをどうするか、という問題にいきつきました。Astroだけを使っている場合は、ディレクトリに記事のMarkdownを直置きするだけの管理です。Astro自体は様々なヘッドレスCMSに接続する機能があるのですが、今回はその中でもとびきり簡単そうなFront Matter CMSというものを使うことにしました。

Front Matter CMSはVSCodeの拡張で、ディレクトリ上にあるMarkdownファイルを整理・管理してくれます。データベースみたいなものではないため、大量のファイルが存在するようになると遅くなるかもしれませんが、ぼくが扱う程度の記事数ならばこれで問題ないと感じています。また、画像も管理できるようです。

Markdownの編集はVSCodeで行います。これは普通の感覚ですね。フロントマターの形式に制約をかけられるため、記事として正しいMarkdownを生成でき、不安がありません。日付なども自動で挿入されます。

以上のような感じで、このサイトをリニューアルしてみました。見た目はほとんど変わっていないと思います。もう少し色々とテコ入れしようと思っていますので知見がたまりましたらまた記事にします。結構お勧めの環境なので、WordPressの代替を探しているみなさんに是非使ってほしいと感じました。