このブログサイトの技術スタック

ブログを一新したので技術スタックのメモを残します。

Astro

https://astro.build/

マークダウンのビルドなどのSSGのベース。 なぜ、Astroを選んだかというと「ブログの静的サイトを作る」という用途には最適だと思ったので。

• mdx でコンポーネントによるパーツ管理や動的な処理ができる。
• Islands architecture を勉強してみたかった。いざとなったら React でも Svelte でもコンポーネントを埋め込めるのが良さそう、楽しそう。
• ブログ向けの Theme がけっこう充実している。

気になった点

• Astro 独特の記法を学ぶのに時間を使っていいのか。
  → React などでコンポーネントベースのアーキテクチャに慣れているとそこまで学習コストは高くなかったように感じる。とはいえ、まだ全然入門レベルだけど。
• Astro と近い思想の Qwik / Qwik City のほうがより洗練されたアーキテクチャなのではないか。
  → たしかに。しかしまだ Astro ほどはやってないからか選べる Theme が少ない。知見も少ない。あと、自分には難しかった。。
• ビルドが遅いのではないか。
  → たしかに以前使っていた Zola や Hugo に比べて遅い感じは既にある。記事数やビルド時の最適化対象の画像などが増えてくるとこれがさらにどうなることやら。しかし、Hugo と Zola は結構使ったので他を試したかった。 爆速という意味では Zola と同じ Rust 製の SSG である Rspress を最初に候補にした。しかし、 Rspress は Docusaurus のようにドキュメントサイト向けなのでブログにも使えるけどブログに向いてはなかった。あと、新しいからか単純に機能がまだ少ない。

AstroPaper

https://astro.build/themes/details/astropaper/

Astro のコミュニティ Theme の１つ。 無料。 選んだ基準は以下の機能があること。

• フロントエンドだけで完結する検索。
• 上記の検索が日本語に対応可能。
• Tailwind でスタイルされている。
• OG image の自動生成
• サイトマップ & RSS feed
• Light & Dark mode

まずフロントエンド完結の検索機能があるものがそこまで多くはない。 あっても日本語対応に一手間いることや、そこではまるものもよくあるので、これが自分にとっては重要。 CSS は Tailwind じゃないと慣れないので。

有料の Theme でもいいと思ったんだけど、試せないと分からないことが多いので無料のもののほうが導入しやすかった。 凝ったデザインは有料のほうが多い印象。

技術系記事、日記、著者プロフィール、の３つを完全に分けた Collection にしたかった。 一応手元ではできたけど、かなりの変更量になるので維持するのが面倒と思ってやめた。 結局、技術系記事と日記はフォルダとパスは別にしたけど、ビルドしたサイトとしては大きく区別はされていない。 著者プロフィール は .md ではなく .astro で書いた。 追加する際は都度もろもろ関連箇所を修正する必要があるが、増えることはそんなにないはずなのでまあOK。

Cloudflare

https://www.cloudflare.com/

ドメインとホスティングは Cloudflare / Cloudflare Pages

ドメインの管理がとても楽。
Pages との紐づけも楽。
デプロイも楽。ブランチの変更を自動で Pull してビルドもできる ¹ 。ビルド処理に通知とかなにか挟みたいなら GitHub Actions もできるし、ローカルから wrangler でデプロイも簡単。 無料でも素敵なパフォーマンスとキャパシティ。

Cloudflare はとても便利！

Pexels

https://www.pexels.com/

記事のアイキャッチの画像を Pexels から拝借している。 AstroPaper 自体のエキザンプルページがそういう構成になっていたからそれを踏襲して真似している。

Pexels は Canva のグループ会社。 画像はすべて無料で使っていい。 出典表記も不要らしい。 一応画像を使うときは都度ライセンスを確認している。 Pexels で選んだ画像をシームレスに Canva で開いて加工編集ということができる。 全然知らないサービスだったけど、最近は Canva をよく使ってるので慣れておきたい。

その他

マークダウンの Callout の記法がサポートされていなかったので、 remark-callout を導入した。

remark-callout を試してみた - Obsidian風のコールアウト記法をマークダウンで

検索として使われている Fuse.js の日本語対応は src/config.ts を

lang: "ja",

とするでいけた。

記事生成についてはまた別で書く。