logotype

Astroでブログを作った

2026/10/20
Tech
Astro

お久しぶりです。 tanaと申します。

なぜ今の時代に個人ブログ/個人サイト？

ブログは書いたり書かなかったり消したり消さなかったり、某ブログサービスから届いた「そろそろ記事書けば？」(要約)という通知に逆張り発動したりしてなんやかんやブログはほとんど書いてこなかったのですが、 究極自分で作ればなんやかんや書ける(気がした)のでブログを作ってみました

後はロマンですね、ロマンロマン

ロマンは何事にも勝るってどこかに書いてありました。書いてなかったら私が書きます。

コダワリ？

コダワリは普通にtypoだったのですが、なんか面白いのでこの記事中はコダワリに統一しようと思います。

フロントエンド

主要ライブラリ/フレームワークたち

AstroAstro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.astro.build SolidJSSolid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.www.solidjs.com KobalteUnstyled components and primitives for building accessible web apps and design systems with SolidJS.kobalte.dev

私が定期的に推しているAstro & SolidJS(Kobalte)でちゃんとサイトを作ってみました。

やっぱ使いやすいですね、Kobalte。
UIライブラリはヘッドレスに限ります。

要するに私の好きなライブラリ/フレームワーク詰め合わせなわけです。

他にもいい点はありますが…

他にもあるいい点

とにかく軽量。

軽いです。とにかく。

AstroはZero-JSを掲げていますし、Solidはランタイムが薄くて高速であることが売りですし、KobalteはヘッドレスUIです。

ヘッドレスUIはスタイルが含まれていないので、その分Tailwindなどで記述ができ、その分圧縮できます。

他のコダワリ

このサイト、リンクの隣にfaviconが出ます。

これは他の方が作成した技術ブログで見かけて感動したから導入したのですが、このブログで採用しているMarkdownの処理系、Sätteriで動くプラグインがないので、Vibe Codingで自作したりしています。動くので良いかなと。

ありました。 怠惰なので私もこっちに乗り換えています。

また、このサイトに存在するすべての画像はWebPに圧縮されています。これは後述。

これがパフォーマンスに脳を焼かれた変人の図ですね

激細かコダワリ

とても細かいコダワリを今思い出したのでここに書いておきます。

ダークモードとライトモードの切り替え、Autoで設定した場合と明示的に設定した場合とでアイコンが微妙に違います

こういう時はへぇボタンを押すといいですね

合計13へぇもありがとうございます😭

「十時十分」の「十分」の読み方は「じゅっぷん」ではなく「じっぷん」である

よりもたくさんのへぇをいただけて非常に嬉しいです😭

バックエンド

バックエンドにコダワリなんてないです。

サーバーサイドのプログラムを全く書いていないですし、ただCloudflareにタダ乗りしてるだけなので。

ビルド

ここに一番拘っています。

世界の個人ブログの中で最も優れていると思っているぐらいです(過言)

Turbo

なんと、個人ブログごときにTurborepoを導入しています。

なぜ導入したかというとロマンと使ってみたかったからに尽きるのですが、ビルド時間が短くなったというのも利点ではあります。

インクリメンタルビルドっていいですからね。

最初のコミットまでに1ヶ月はかかっているのですが、この間にpnpm タスクビルダー → Turborepoと移り変わっています。

元々ちょっとRustを触っていたのでインクリメンタルビルド大好き人間だったのですが、改めてTSで使うと感動しますね。

Astroでもインクリメンタルビルドしたいです。
アップデートお待ちしております。

OGP

OGPの作成パイプラインは半分自作です。

まず、前提としてこのサイトのOGPは基本Cloudflare R2にホストされています。

これは私がロマンだと思ったからであり、それ以上の理由はありません(ファイル数制限にビビったのもある)

大まかなビルドの流れを説明すると、

YesNoYesNoNoYes処理開始S3バケットから既存のOGPファイル一覧を取得既存ファイルをHashSetに保存記事一覧を取得記事ループ開始未処理の記事があるか？記事データを取得xxhashを使用しOGPファイル名を生成生成されたファイル名は既存のものか？OGP画像を生成S3へアップロード既存ファイルリストから処理したファイル名を削除既存ファイルリストは空か？既存ファイルリストに含まれているファイルをS3から削除処理終了

こうです。

AWS S3を契約できるほどの富豪ではないのでCloudflare R2ですが…

とにかく差分更新差分更新言いながら作りました。

結果差分更新できたので良かったです。

Mermaid

MermaidをSSGのタイミングでSVGに変換して埋め込んでいます。 MermaidごときのためだけにJS配布なんてしたくないですからね。

ここでもスタックにコダワリというかなんというかがありまして、
普通mermaid-cliを使用するところだと思うのですが、せっかくならとmermaid-rs-rendererを採用してみました。

この記事を書いている途中、ObsidianからPele(公式サイト, GitHub)というJS製のmermaidレンダラーがリリースされていました。 このブログでも2日でプラグインを自作し、このPeleを採用しています。 新しいものを使っているとかっこいいですからね。 (monorepoから分離してsatteri-peleとして公開中です。使ってあげてください。 https://npmjs.com/package/satteri-pele)

結論からいうと成功です。
とにかく速いしヘッドレスブラウザとかいうセットアップがめんどくさいものランキング1位を使わなくていいのが最高です。 あとあのObsidianと同じスタックを使っているという時点でアツいです。 あとSatteriでマトモに使えるMermaidライブラリがなかったので、、、

節約術？

なんとこのサイト、こんなOverengineeringで出来ているにも関わらず、節約術が大量に仕込まれています。(浪費術も仕込まれています)

GitHub Actionsでビルドしたり…(Public repoの場合ほぼ完全無料)

Cloudflare Workers Static Assetsでデプロイしたり…(ほぼ完全無料)

R2を使ったり…(浪費術)(暫くは無料枠に収まる予定です。飽きを考えたら実質完全無料ですね笑)

CMS

CMS、ご存知でしょうか。
Contents Managemant Systemの略称です。

PCから書くならまだしも、スマートフォンなどからbranch切ってMarkdown作ってプッシュしてPR作って…っていうのをいちいちしていたら死んでしまいますからね。

今回はGitベースのCMSである Sveltia CMS を採用しています。

選定理由は

  • レスポンシブ対応
  • プレビュー画面の差し替えが可能
  • Gitベースでサーバーサイドの処理が不要
  • PRを使用したレビュー工程を追加できる
  • 導入が簡単
  • カスタマイズ性が高い
  • Open Source
  • 日本語対応 ← (UI自体は日本語でなくてもいいのだが、IMEとの相性問題があるので非常にありがたい)

みたいな感じです。

test

プレビュー

きちんとこのサイト、PRプレビュー機能まで盛り込まれています。

だからこの段階でば～っと読んで語時チェックができるわけですね。

美しすぎると思います。

で、このサイトは何に使うの？

色々使います！！(終了)

さておき、ブログからリンク集から、ポートフォリオから、Worksから、更に色々なものをおいていく実験場的な何かにしたい気持ちがあります。

いかがでしたか？

今回は今話題じゃない o38.me の内部情報について調べてみました！

このブログの大半はGitHubで公開しているので興味がある方は観察してみてはどうでしょうか？