ReyoKatsu.netの制作

Created
Updated

制作した動機

今までhoneblog.comに技術記事から日記まで何でも書いていましたが、色々と思うところがありreyokatsu.net(本サイト)を制作しました。

honeblog.comの課題

  • カスタマイズの限界: 不慣れなのもあり、Hugoでこだわったページを作るのが難しい
  • ドメインの不一致: honeblog.comというドメインと中身が一致しないページがある
  • Hugoの制約: Markdownの記事の形式にしているためプロフィールページへのURLがやたら長い
  • リソースの未活用: reyokatsu.netをサブドメインで身内向けサービスを公開するためにしか使用していなくてもったいなかった

今後の運用方針

reyokatsu.netでプロフィールと技術記事、成果物等のページを公開し、honeblog.comでその他雑記を公開する運用にする予定です。

使用技術

なるべく塩漬け運用したいので、セキュリティリスクを考慮して今回もSSGを使用することにしました。
具体的には以下のフレームワークや言語、ツールを使いました。

  • フレームワーク
    • Astro
    • Vite
  • 言語
    • TypeScript
    • SCSS
  • ツール
    • Figma
    • Gemini CLI
    • Neovim

デザイン自体はFigmaで大雑把に作成し、実装しながら手直しをしました。
フロントエンドは、サークル公式サイトの制作でAstro+TypeScritを使用したサイト制作に慣れていたため今回も同じ構成を採用しました。
また、いつもはAIに全任せしたコーディングはやらないのですが、バイブコーディングの流行りにおいていかれそうな感覚があったのでベースをGemini CLIで作ってみました。 実際にバイブコーディングしてみた感想としては、やはり指示の的確さ、具体性で実装が大きく変わるので、言語化の重要性が高いことを痛感しました。

制作した感想

ひとまず、無事に動くものができて一安心といったところです。

一旦は完成しましたが、これから運用していくときっと色々と改善点が出てくるんだろうなぁと思っています。 公開してからn年が経っているhoneblog.comですら未だにテーマに変更を加えることがありますし …
それと、デザインに関しては本当にド素人であまり完成度が高くないので、追々ちゃんと勉強して修正したいです。