個人サイトをAstroで作り直した

個人サイト「MOFURel.com」を作り直した。

今回は、Astroを使用している。
以前から気に入っているフレームワークで、今回のような小規模なサイトにはちょうどいいと思っていた。

もともと、このサイトに複雑な機能を持たせるつもりはなかったのでちょうど良い。

自分が制作したWebサービスやアプリを紹介できればそれで十分。
ユーザー登録やデータベースを必要とするような機能もない。

勉強と好奇心から別の静的サイトジェネレーターも検討したが、いまはあまり労力をかけたくないという理由から、結局これを選ぶことになった。

記事は書きたいけどCMSはいらない

ブログというほど大げさではないけれど、たまには文章も書いていきたいというのが念頭にあった。
プログラミングで試したことや、何かを作るときに考えていたこと、そういうものを残しておけるちょっとした場所が欲しかった。

でもそうなると、記事を管理する仕組みが必要になる。

WordPressのようなCMSを使う方法もあるし、ヘッドレスCMSという選択肢もある。
でも、このサイトは本当に小規模な個人サイトだし、そんなのは逆に面倒くさい。

記事の更新頻度もそれほど高くなるとは思えない。

だからMarkdownで書いたものから記事を生成する仕組みは自分にもの凄く合ってる。

mdファイルを作成し、文章を書き、Astroでビルド。
あとは生成されたファイルをサーバーにアップロード。

自分はWindowsのWSL上で動かしている。

書いている途中は npm run dev を動かしておけば、保存するたびにブラウザですぐ確認できる。
書き終わったら npm run build を打てば、すぐに静的なファイルができあがる。

アップロードも、最初は手作業でやっていたけど面倒なので、rsyncを使って npm run deploy と打つとサーバーに反映されるようにした。

すごくシンプルだと思うんですよね。
記事を書くために管理画面を用意する必要もないし、データベースを管理する必要もない。

更新のたびにビルドしてアップロードする手間はあるけれど、特に負担には感じない。
基本的にはコマンド打つだけだから。

余計なものがないのがいい。

CSSにはTailwind CSSを使っている。
Tailwind CSSは、用意されたユーティリティクラスを組み合わせてスタイルを指定する仕組み。
下手な使い方ばかりしていて、HTMLの可読性が落ちたりもしているけど、なんだかんだとこの数年は使っている。

AstroとTailwind CSSを組み合わせれば、今回のようなサイトをサクッと作れる。
Tailwind CSSが複雑さを生み出してるような気もするが、とにかく手間をかけたくない。
楽な方を取りたい。

ちょこっとこういったWebサイトを作るためのツールは、いまでは本当にいろいろありますよね。

静的サイトジェネレーターなら、Hugo、Eleventy、Jekyllとか。
WordPressのようなCMS、ContentfulやmicroCMSなどのヘッドレスCMSもある。

Next.jsやNuxtのようなフレームワークもあるし、昔ながらのHTMLとCSSだけで作る方法も。

結局Astroにしたのは、前から触ってて使い慣れているから。
それと、実際に使っていてシンプルに感じるから。

今回の作り直しにはAIの手も借りている。
手伝ってもらうときも、仕組みが単純だと助かる。

AIが書いたコードでも、AstroならほとんどHTMLとCSSだから、読めばすぐに何をしているかわかる。
わかりやすいから見直すのも早い。

記事も、決まったフォルダにMarkdownのファイルが並んでいるだけ。
どこに何があるかすぐわかるから、自分で書き直すときも、AIに頼むときも迷わない。

しばらく触らずに、何か月かたってから開いても、たぶん同じように迷わないと思う。
作ったときだけじゃなく、後から見てもわかりやすいのがいいなあと思ってる。

AIに頼るにしても、頼らないにしても、Astroは使い勝手がいい。