サイトをリニューアルしてHugoに移行

この記事はhttps://hello.px4n.dev/ja/blog/2025/07/06/revamped-site-moved-to-hugo/からの転載です。

長年個人サイトを放置してて、昔のブログ記事もあちこちのサービスに散らばってたので、全部ここに集めることにしました。

いろんな静的サイトジェネレーターを転々とした末、HugoとNightfallテーマをカスタマイズして使うことに落ち着きました。革新的なことは何もしてないけど、ちょっとした遊び心と個人的なタッチを加えてみました。

追加した楽しい機能

コナミコマンドのイースターエッグ

どのページでも ↑↑↓↓←→←→BA を押してみてください（めんどくさい人はCtrl+Shift+TでもOK）。レトロなターミナルモードが起動しますよ〜：

• マトリックス風の緑文字に黒背景（グロー効果付き）
• CRTスキャンライン効果で懐かしい感じに
• ページタイトルをタイプライター風に表示
• トースト通知でメッセージ表示
• 開発者ツールを開くとコンソールにASCIIアート

実装はJavaScriptでステートマシンを作ってretro-modeクラスをトグルしてるだけ。レトロモードのスタイルは専用のSCSSファイルに分離して、スキャンラインとグロー効果はCSSアニメーションで実現してます。

カスタム404ページ

404ページをターミナル風にしてみました：

• アクセスしようとしたパスをlsコマンド風に表示
• whoamiで「lost_user」を返すとか小ネタ満載
• 「システム診断」セクションでエラー分析っぽく
• エラーテキストにグリッチ効果
• ナビゲーションボタンで迷子救済

ページソースにASCIIアート

ソース表示するとASCIIアートとビルド情報が見えます。

Hugoのparamsでカスタムアートも設定可能。

コメントにイースターエッグも仕込んでます。地味に気に入ってる機能。

言語切り替えスイッチ（国旗付き）

ちゃんとした言語切り替えを実装：

• 国旗アイコン使用（絵文字じゃなくてSVGで統一感）
• 言語切り替えても同じページを維持
• アクティブな言語をハイライト
• Hugoのi18nシステムと連携

flag-iconsの美しいSVG国旗に感謝！

シリーズナビゲーション

連載記事用のナビゲーションパーシャル追加：

• 同じシリーズの全記事を表示
• 現在の記事には「(current)」ラベル
• テーマカラーでスタイリング

ターミナル風アニメーション

ホームページの挨拶に点滅カーソル効果、ナビゲーションにアクティブページインジケーター。小さな演出だけど雰囲気出るよね。

タイポグラフィシステム改造

テーマのデフォルトじゃ物足りなかったので：

• Source Sans 3で可変フォントウェイト（200-900）
• 言語別フォントスタック（フォールバック付き）
• グローバルフォントスムージング
• h2/h3にビジュアルマーカー追加

技術的なメモ

CSPヘッダーがイマイチ

コメントシステム動かすためにContent Security Policyが適当になってる：

<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' 'unsafe-inline' https://cusdis.com"
/>

'unsafe-inline'使ってるのセキュリティ的にアレだよね。そのうち直さないと。

ちょっと便利だったパターン

ナビゲーションのアクティブ状態、多言語パスのせいでJavaScriptが必要になった。まあ現在のURLチェックしてクラス追加するだけの簡単なやつ。

日本語フォントスタックの使い回しにCSSカスタムプロパティが便利：

[lang="ja"] {
  --ja-font-stack: "M PLUS Rounded 1c", "M PLUS 1p", "Noto Sans JP", sans-serif;

  header,
  nav,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--ja-font-stack) !important;
  }
}

HugoのSCSSコンパイルは何も設定いらなくて楽。webpackとか要らないの最高。

日本語コンテンツでわかったこと：

• removePathAccentsはラテン文字のみ対応
• CJK URLには明示的なslugが必要
• フォントごとにline-height調整が必要
• 日本語のウェイト300は英語と全然違って見える

投稿ナビゲーションの配置には:has()セレクタが便利だった。JavaScript要らずで済む。

セットアップ

よくあるCI/CDパイプライン：

1. GitHub - ソース管理（ブランチ保護ルール付き）
2. GitHub Actions - PR時にHugoビルドとチェック
3. Netlify - チェック通ったらmainブランチからデプロイ

こうしておけば変なのがデプロイされることもないし安心。

今後の予定

ちょっとした改善くらい：

• もっとイースターエッグ仕込む（作るの楽しいし）
• ダーク/ライトモード切り替え
• CSPヘッダーちゃんと直す
• WebGL実験とかやってみたい

テーマの改造はオープンソースなので、使いたい人はどうぞ。それじゃ！

ちなみにオタクっぽくするため日本語翻訳をAIに頼りました