個人サイトを改修したので、技術スタックの変化や理由を書きます。

改修した理由

pandocで変換するのが大変だったからです。一度個人サイトを初めてしばらくしてからも改修自体は進めていましたが、一つ一つのHTMLファイルにいろいろコードを書き足していくのは大変でした。また、ダークモードを加えたいなと思ったため、今のサイトのままだと大幅な改修は大変だと思いました。そのため、サイトを改修しました。

技術スタック

Hugoを使いました。 個人サイトを始めた ではHugoに関してこう記載していました。

そこからHugoを使おうとテンプレートの改造方法を調べました。正直、デザインは自分で作りたかったのと、よくわからないテンプレートを入れることに抵抗があったからです。調べると、何やらテンプレートのシステムが変わったという記述を見かけました。そのため、いったん様子見をしようと思い、Hugoはあきらめました。

上記で書いてある理由で見送りましたが、AIを使えばHugoへの移植がうまくいくんじゃないかと思い、ClaudeのProプランを契約して試しました。その結果、うまく改修をすることに成功しました。2月18日にHugoへの移植作業をはじめ、大体5日くらいで終わった計算になります。

変更内容

変更内容は下記に記載した通りです。

  • Hugoへの移植
    • HTMLタグの調整
    • タグのページの追加
  • UI変更
    • サイトのデザインや配色の変更
      • セマンティックなHTML構造への変更
      • コントラスト比の調整
      • 個別記事のタグの追加
      • 個別記事に見出しが追従する設定の追加
    • ヘッダーのコンテンツの変更
      • 順番の変更
      • ライセンスの削除
      • タグ一覧の追加
  • ダークモード対応
    • システムの設定に応じたサイトカラーの変更

ダークモードのボタンを用意するかどうかは悩みましたが、コストが高そうなので見送りました。ちなみに、自分で追加したJavaScriptファイルはまだありません。

移植作業の感想

Claudeの活躍

今回の移植作業でClaudeがとにかく活躍しました。ほとんどすべての作業をClaudeを頼りにしたといっても過言ではありません。Claude Codeはまだ導入していませんが、もししたら更なる効率化が見込めそうです。

Hugoの便利さ

また、今回の変更でHugoの便利さに気が付かされました。テンプレートを書くと、わざわざ複数個所に同じタグを書く必要がありま選。これはとても便利だと思います。また、ローカルサーバーが標準で用意されているのも便利です。すぐに変更した結果を見られるのは便利でした。

Hugoの難しさ

とはいえ、Hugoは難しいとも思います。テンプレート任せになっている分、複雑なことをしようとすると途端に難易度が上がります。また、原因追及をするときも、Hugo自体の仕組みを知らないとわからないことが多いと思います。Hugoのドキュメントが英語しかないのも苦労した点です。Claudeだけに任せっきりにせず、ドキュメントを機械翻訳を頼りに読みましたが、専門用語がわからないのか英語がわからないのかの切り分けが難しかったです。

最後に

いろいろありましたが、移植をしてよかったと思います。