WebサイトをAstroに移行しました

未分類

縁側プログラミングのWebサイトを、WordPressからAstroに移行しました。

なぜ移行した？

記事をMarkdownで書いてGitで管理したかったからです。

「縁側プログラミング」を立ち上げたのは今から5年前の2020年でした。 当時はWebサイト構築方法にどんな選択肢があるのかもまったく知らず、「技術ブログ 作成方法」とかで検索して、勧められるままにWordPressで作ったような記憶があります。

5年間で100本あまりの記事を書いてきましたが、最近は記事を書くたびにWordPressでの編集が面倒に感じるようになり、Markdownで書きたい、VSCodeで書きたいという思いが強くなっていました。 また、WordPressのメンテナンスも地味に手間がかかることや、読み込みが遅いことも気になっていました。 だったらZennのようなサービスを使えば？と思われるかもしれませんが、これまで大事に育ててきた自分のWebサイトには愛着があるので、これからも続けていきたい気持ちがありました。

そこで、以前から興味のあった静的サイトジェネレーター（SSG）を試してみることにしました。 SSG自体は以前から知っていたのですが、私はWeb系の知識が乏しいのでハードルが高く感じていました。 でも今ならAIの力を借りれば自分でもできるのではないか？と思って、挑戦してみました。

どうやって移行した？

GeminiとClaude Codeを使いました。

はじめにGeminiのDeep Researchで、技術選定と開発プランを立ててもらいました。 Markdownで書きたい、既存の記事を移行したい、などの要件を伝えて、SSGのフレームワークを比較調査してもらいました。 その調査結果をもとにAstroを採用することに決めて、具体的な開発と移行の計画を立ててもらいました。

次にAstroのチュートリアルに取り組みました。 実装はAIに任せるつもりでしたが、AIの書いたコードは理解したかったので、Astroの仕組みは知っておきたかったからです。

そしてコードは大部分をClaude Codeに書いてもらいました。 Geminiに次に何をやればいいか聞き、それをClaude Codeに伝えて実装してもらうという流れを繰り返しました。

やってみてどうだった？

Webの知識が少ない自分でも、AIを使えばサイトを構築できることがわかりました。 そして、Claude Codeでガリガリと実装していくのはとても楽しかったです。

良かったこと

GeminiとClaude Codeの2つのAIを使ったのは良かったです。 GeminiのDeep Researchはとても優秀で、技術選定や計画立案にとても役立ちました。 Claude Codeの実装力も優秀でした。 ダークモードやレスポンシブ対応なども比較的スムーズに実装できましたし、OGP画像自動生成も実現できました。

チュートリアルを自分の力で実施してからClaude Codeでの実装に取り掛かったのも良かったと思っています。 新しい分野の技術に挑戦する時に、最低限の知識をつけたうえでAIと一緒に実践的な開発に取り組むと、開発も学習もスムーズに進むと感じました。

苦労したこと

GeminiとClaude Codeはどちらも優秀で頼りになりましたが、2つのAIの連携方法には工夫が必要だと感じました。 Geminiの立てた計画に従ってClaude Codeで実装するのが基本の進め方でしたが、実装中に方針変更が必要になることが何度かありました。 その場合は変更内容をGeminiに伝える必要がありました。 自分が連絡係としてGeminiとClaude Codeの間で状況を共有していたのですが、正直面倒でした。 Geminiの立てたドキュメントで共有し、Claude Codeにそれを更新させるなど、工夫すると良かったのだろうなと思いました。

既存記事の移行も苦労しました。 WordPressには100本あまりの記事がありました。 WordPressから記事をまとめてダウンロードしてMarkdownに変換するツールを利用しましたが、WordPressの機能やプラグインを利用してスタイルを調整していた部分の多くで見た目が崩れてしまっていました。 スタイルが崩れている箇所をClaude Codeにまとめて修正させたかったのですが、なかなか精度良くすべての記事を処理させるのは難しく、またトークンも大量に消費してしまってリミットに達してしまい、うまくいきませんでした。 結局、記事の移行はいろいろ手作業が必要になってしまいました。 将来の次の移行に備えて、これから書く記事はなるべくプレーンなMarkdownで書こうと思いました。

おわりに

これで快適に記事を書けるようになったので、これからもいろいろ発信を続けていきたいと思います。