成果物
サイト名 | |
|---|---|
CMS | microCMS |
フレームワーク | Astro |
デプロイ先 | Cloudflare Pages |
読む側の見えるところでこだわったこと
- 類似サイトでよくある、他PFへの共有オプションを置かない
- 「◯◯でシェア」など。このサイトは他者との繋がりの形成が目的ではない
- 関連記事を表示しない
- このサイトに対する滞在時間を長くさせることのメリットはない
- サイドバーを閉じれるようにした
- 目次とプロフィールが隠され、ほぼ本文のみが目に入るようになり没入感が高まる
- できる限りアニメーションに頼らない
- 連続的な動きを持たせないことで即動作している感、軽さを感じさせる狙い
総じて「あってもなくてもいいものは、ない方が美しい」という理念で見た目をデザインした。
ことのはじまり
例えばある程度まとまった長文を書き置きたいとなった場合、普通の人なら note.com など既存のサービスを使って解決すると思われるが、自分の場合宗教上の理由でその手のサービスにコンテンツを載せることを避けたいと考えている。
これを解決する方法はいくつかあり、過去には以下のような仕組みで運用していたが、自分のニーズと完璧に合致する仕組みにはまだ出会えていなかった。
Notion * Wraptas
コンテンツの管理やそのエディタを Notion で担い、サイトのスタイルやホスティングを Wraptas で実現する構成。とにかく楽ちんで扱いやすい。
一年半くらいこの構成でサイトを公開していたが、 Wraptas の料金（およそ1,000円/月）が気になり始めてから移行先を模索し始め、後述の Obsidian に移行する。
Obsidian * digital-garden * Vercel
コンテンツの管理やそのエディタを Obsidian で担い、サイトのスタイルを digital-garden プラグインで実現する構成。この構成はホスティング料金が無料となる。
いちNoitonユーザとして敵城視察、もといObsidianのハンズオンを兼ねてセットアップしてみたものの、データをローカル管理するというObsidianの考え方と、データはクラウドに置きたい自分の考え方と合わず頓挫。
表題の構成によるサイトが立ち上がってからは Obsidian 絡みのことも全部畳んでしまったが、 Obsidian への理解は深まったので結果オーライと思いたい。
上記のような経緯もあり、改めて新サイトを1から作り直すこととした。
新サイトで実現したかったこと
Obsidian * digital-garden に変わる、書物用自サイトを作成したい。
- 必須な要件
- 自分のドメイン（takeno.tech）を設定できること
- 記事はmarkdown記法で書けること
- 記事内の画像はディレクトリのことを意識することなく埋め込めること
- 記事の編集がローカル環境でなくともできること
- サイトのレイアウトが自由に設定できること（最低限CSSの調整）
- 維持コストがかからないこと
新サイト公開までの道
アイデア出し
まず自宅サーバで運用しているOpenWebUI越しの gemini-3-flash-preview に協力してもらい、既存のサイトの内容も見てもらいながら要件の洗い出しや採用する仕組みの選定を行った。
- 普通に既存のブログサービスを使う
- ヘッドレスCMS * SSG
- WordPress
- Wiki.js のようなウィキエンジン
- Notion * Wraptas に戻す
様々なアイデアと要件を吟味した結果、最終的にmicroCMSとAstroを中心としたJamstackな構成で作る結論に達した。
お試し版サイトの作成
今回のようなJamstack構成を持つサイトを作成したことがない。なので、いきなり本番を見据えたものを作らず仕組みの理解を兼ねておためし版を作成した。
引き続き gemini-3-flash-preview に仕組みの理解に関することなどの助言をもらいながら、およそ3日程度でAPIの設定、コンテンツの作成、表示するページの型、デプロイして公開するまでの流れを一通り通せた。
色々試した上でやはりこの構成が良さそうということになり、いよいよ本番向けのものを作成し始めた。
本番向けサイトの作成
再び開発環境と各サービスの設定を1から作り直し、147のCommitと33のPRを経て一旦完成とした。
以下は作業中に思ったことの備忘録を記す。
設計書とか仕様書とか DESIGN.md とか用意したほうが良かった
機能的なところだけで言えば、動いてくれれば問題ないくらいの温度感で進めたので特になくても困ることはなかったが、デザインに関わる実装では手直しすることが多々あった。
この時、自分自身もどのようなデザインで統一して作り込んでいこうか、その時々によってブレることがあった。
いきなり細かい箇所の機能や見た目をどうするか、といったところは決められずとも「これだけは絶対に譲れない」みたいなこだわりのある箇所は予めドキュメント化するべきだった。
開発機のRAM容量が8GBでは（さすがに）足りない
本番向けサイトの作成は一貫してノートPC（Debian 13 入り Thinkpad X1 Nano）を使っていたが、なんとRAMが8GBしかない。IDE + 開発サーバ + ブラウザ + その他諸々を立ち上げていくと簡単に8GBを超過する。
ストレージが高速だからか、Swapが優秀なのか、超過したとて「ほんの若干諸々の初動が遅いないな」と感じるくらいで実用上問題はないのだが、押し出されたデータを毎回SSDに書いているのでストレージの寿命が早く縮まりそうな気がする。
自前のLLM動作環境が欲しくなる
実際のコーディングにあたり開発初期は Vscode の Gemini Code Assist を使用していたが、全くレスポンスが返ってこなかなったり、リクエストが混んでいることを理由に旧世代のモデルが回答したりといったことが多発した。
開発途中から IDE を Antigravity に切り替えると、Vscode + Gemini Code Assist のときと比べてレスポンス内容の不満は解消されたが、今度はレート制限につきあたることがあった。
今回の作業に関わらず、日常のちょっとしたタスクにも常日頃からLLMには世話になっているが、その全てが現状 Google のお膝下でその恩恵を教授している。
今後更にレートが厳しくなったり、料金体制の変更が入る可能性も無きにしもあらずんばな現状、自前で用意できるLLM動作環境に関する知識をつけておきたいと感じた。（Gemma 4 とか）
終わりに
約１ヶ月の試行錯誤を経て、ほぼ望み通りの執筆・公開環境が整った。
ぶっちゃけ日常的なことの記録はマイクロブログサービスで事足りると思っているし、実際にその用途で misskey.io などを利用している。
それらとは別に長い時間かけて取り組んだことのまとめや、積極的に見せびらかしたいことなど、体裁を整えて人様に紹介したいことは自分の作った環境、自分の望む見せ方でWebページに書き置きしていきたい。