DEV Community

px4n
px4n

Posted on • Originally published at hello.px4n.dev

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

#hugo #web

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

いろんな静的サイトジェネレーターを転々とした末、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"
/>
Enter fullscreen mode Exit fullscreen mode

'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;
  }
}
Enter fullscreen mode Exit fullscreen mode

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に頼りました
Enter fullscreen mode Exit fullscreen mode

Top comments (0)