Claude Codeと協力して、個人サイト（saiso.jp）をWordPressからAstroにお引越ししました

saiso.jpを長年運営しているのですが、どうにも筆が進まず、どうにかしたいなあと思っていたのですが、Claude Codeに激ハマりしていたので、これはよいおもちゃになるな！、と思い、一気にリニューアルしてみることにしました。

WordPressからの移管

saiso.jpでブログを書き始めてから、ずっとWordPressです。超簡単に使えるので便利に使ってはいたのですが、僕自身はバリバリプログラミングをするエンジニアではなく、いわゆるWebディレクターというかPdMというか、そっち系の仕事をしていたので、「ここをこうしたい！」という想いがあっても、実現できずにいました。プラグインもなんかちょっと物足りない感もあり、、

個人サイトなので、機能は別にどうでもいいのですが、見た目もなんか微妙だけどそんなにいじることもできずに我慢していました。

Claude Codeと二人三脚でリニューアル

ということでがっつりリニューアルすることにしました。 今回の目的は、

  • 書いて出すまでの摩擦を限りなくゼロにする
  • 現状の気になるところをとりあえず全部改善
  • 記事メディア運営の知見を個人サイトに簡単に反映してトラフィックをちょっと集めたい

実際にやったこと

都度思い出したらtodoを増やしていきつつやっていったので、結構もりもりになっちゃいました。

  • WordPress + コアサーバー から Astro + Vercel + Cloudflare に全面移行
  • WordPress上の全296記事を XML エクスポートから Markdown に自動変換
  • タグ語彙の AI 並列自動分類（移行時、全記事に対して、エージェント並列で付与）
  • サイトデザインを変更
  • アイキャッチを自動生成し、旧記事にもすべて対応
  • ダークモード対応
  • 関連記事対応

作業期間は2日くらいで、実装は Claude Code にお願いしつつ、細かな指示出しをしていくスタイルで行いました。

技術スタックなど

Astro（静的サイトジェネレータ）、Vercel（ホスティング）、Cloudflare（DNS と Email Routing）、そして実装は Claude Code にほぼお任せ、という構成にしました。

デザインを HTML モックでざっくり作って、ブラウザで見ながら微調整して、実コードに反映する、という感じでいつもAI と一緒にやっています。

WordPress からのデータ移行は、XML エクスポートを parse して 296 記事分の Markdown を生成するスクリプトを書きました。記事本文の HTML を Markdown に変換しつつ、WP の画像 URL や内部リンクを新しい URL に置換しています。

DNS 切り替えは、Value Domain に登録したドメインのネームサーバーを Cloudflare に向けて、A レコードを Vercel 指定の IP に書き換える手順です。メールは Cloudflare Email Routing で個人 Gmail に転送する構成にしました。送信は使わないので、受信だけ動けばいい、というシンプルな要件です。

こだわりポイント

SEO

別に現状トラフィックがあるわけでもないのですが、僕自身知見がめちゃくちゃあるので、それらすべてを反映すべく、SEOまわりには気をつけて実装しました。（秘伝のタレ的な専用のSkillも作成済み）

アイキャッチ

アイキャッチも自動生成にしました。基本的に画像なしの日記が多いのですが、見栄え的にもSNS的にも、アイキャッチがないと悲しいのでここはマストで実装。自動生成機能をリリースしたタイミングで、既存の 296 記事分もまとめて書き出しています。

記事内にすでに画像があるかないかで自動判定をしていて、ある場合はその画像を背景にタイトルプレートを重ねる、ない場合は濃紺地にタイトルをぽんと置く、という出し分けにしています。（ここも微妙な調整をたくさんしました） リリース時、ビルドごとに全記事ぶん作り直していたことに気づき、すぐに修正。タイトルと背景画像のハッシュをキーにキャッシュを挟んで、変更のない記事は再生成しないようにしました。2 回目以降のビルドは 1 秒くらいで済みます。よかったよかった。

仕組みとしては satori（Vercel 製のライブラリで、JSX っぽい記法で書いた構造から SVG を生成）→ resvg で PNG に変換、という流れ。日本語の改行は BudouX でフレーズ単位に分割してから、Intl.Segmenter で単語境界を補って、貪欲法で詰めていくアルゴリズムにしています。地味だけど、こういう対応をするのがかなり好きです。

あと、細々した画像まわりの機能も実装しています。

その他

本文カラー、ダークモード、関連記事表示、記事下のプロフィールエリア、アフィリエイトリンクがあったらアフィリエイト開示の自動挿入、あたりも実装中に思いついて都度都度追加しました。

今後の課題はいかにラクに書けるようにするか

WordPressの管理画面にアクセスしなくてよくなったので、毎日かならず開くVS Code上でブログを書けるのがかなりうれしい！

ガジェット系記事なども書きたいのですが写真挿入とかアフィリエイトリンク挿入とかめんどくさかったので、一気にラクにしたいなと思っています。

さいごに

今の時代、XもあるしInstagramもあるしnoteもあるし、個人サイトを持つ必要なんてほぼないのですが、やはり個人サイトを初めて持ったあのときの感動は忘れられません。

noteを独自ドメインでやっちゃえばいいのかなーなんて思ったこともありますが、自分でメンテする自分だけの場所を持つのは、なんというかヴィンテージブームの流れに近いものがあるかもしれませんが、大切にしていきたいと思っています。

というわけで、せっかくリニューアルできたので、どうにか更新頻度を増やしていければと思います！

（この記事はAIがざっくり下書き作成してくれたものを、僕が全部編集して書いています。編集大好き。）

AIWeb

関連記事