ノムニチが新しくなりました！

こんにちは．M2 の藤原です． このたび，乃村研究室の Web サイトとノムニチが新しくなりました！ 見た目のリニューアルに加えて，サイトを動かす仕組みも Rails から Hugo + GitHub Pages に移行しました． 今回は，移行の背景や記事の書き方の変化，これまでのコンテンツを引き継ぐための工夫を紹介します．

なぜ移行したのか

#

これまでのノムニチは，研究室のサーバ上で Rails のアプリケーションとして稼働していました．

記事の本文をデータベースに保存し，記事の表示時に HTML に変換する仕組みでした．

一方で，研究室の紹介や日々の記事など，公開しているコンテンツは基本的に静的なものです． そこで，開発打ち合わせで「静的サイトジェネレータを使い，あらかじめページを生成しておく形が合っているのではないか」という話になりました． 研究室サーバの管理負担を減らす狙いもあり，Hugo でサイトを生成し，GitHub Pages で公開する構成に移行しました．

新しいノムニチの仕組み

#

Hugo は，Markdown で書いた記事やテンプレートから，HTML などのファイルを生成する静的サイトジェネレータ (SSG) です． 記事を更新した際にサイトを生成しておけば，公開時には生成済みのファイルを配信できます． 新しいノムニチでは，記事を Markdown ファイルとしてリポジトリで管理し，Hugo であらかじめ HTML に変換したサイトを GitHub Pages で公開しています．

このサイトのビルドと公開は，GitHub Actions で自動化しています． GitHub 上の main ブランチに変更が反映されると，GitHub Actions が Hugo を実行してサイトをビルドし，生成されたファイルを GitHub Pages に公開します． そのため，記事を更新するたびに，手元で公開用のファイルを生成してサーバへアップロードする必要はありません．

サイトの見た目には，Hugo 用のテーマである Blowfish を使っています． テーマは，ページのレイアウトや配色などを担います． 今回は Blowfish をベースに，研究室のトップページや個人ページへのリンクなどを，乃村研究室のサイトに合わせて調整しました．

記事の書き方はどう変わったか

#

Markdown ファイルを直接編集して記事を書く

#

Hugo への移行に合わせて，記事を書く流れも変わりました． これまでは，ノムニチの Web 画面で Markdown の本文を入力し，プレビューで表示を確認して投稿していました． 新しいノムニチでは，手元のエディタで Markdown ファイルを直接編集して記事を書きます． 普段使っているエディタの補完や検索・置換などを使いながら執筆でき，Hugo のローカルサーバで公開前の表示も確認できます．

また，記事も Git で管理するため，変更履歴を残したり，以前の内容との差分を確認したりできます． Markdown で本文を書く点は共通ですが，ブラウザの投稿フォームで編集・保存する流れから，ファイルを編集して Git で変更を反映する流れになりました．

ショートコードで記事の見た目を工夫

#

記事の見た目を手軽に工夫できるようになったことも，今回の移行の楽しみの一つです． Hugo には，Markdown の本文中に短い記述を加えて，決まった形式の表示を呼び出す「ショートコード」という仕組みがあります． Blowfish にもさまざまなショートコードが用意されており，HTML や CSS を一から書かなくても，カードや囲み枠，写真のギャラリーなどを記事に組み込めます．

例えば，この記事の冒頭にある旧ノムニチの GitHub リポジトリのカードも，Blowfish の github ショートコードで表示しています． Markdown ファイルに次の一行を書くと，指定したリポジトリをカードとして紹介できます．

{{< github repo="nomlab/nomnichi" showThumbnail=false >}}

補足や読者に注目してほしい内容には，alert ショートコードが使えます． 次のように本文を囲むと，アイコン付きの枠として表示されます．

{{< alert icon="circle-info" >}}
新しいノムニチも，これまでの URL からアクセスできます．
{{< /alert >}}

実際の表示は以下のようになります．

このほかにも，記事の内容に合わせて次のような表現ができます．

文章や写真にこうした表現を組み合わせることで，紹介する内容に合わせた記事を書けそうです． 使えるショートコードや詳しい書き方は，Blowfish の公式ドキュメントで紹介されています．

これまでのコンテンツを引き継ぐ

#

移行では，新しいサイトを作るだけでなく，これまでのコンテンツやリンクとの整合性を保つことも考えました．

これまでの URL でアクセスできるようにする

#

これまでのサイトでは，/lab/nom 以下にコンテンツを配置していました． 新しいサイトでもこのパスを引き継ぎ，GitHub Pages 上の /lab/nom 以下にサイトを配置しています． これにより，サイト内で使っている /lab/nom から始まるリンクとの整合性を保っています．

また，従来のドメインへのアクセスは，リバースプロキシを通じて GitHub Pages に転送する構成にしています． リバースプロキシが GitHub Pages からコンテンツを取得して返すため，閲覧する側はこれまでのドメインのまま，新しいサイトにアクセスできます．

個人ページを引き継ぐ

#

研究室のサイトには，現役メンバだけでなく，OB の個人ページもあります． OB のページについては，これまでの HTML をそのまま Hugo の static ディレクトリに配置しました． ここに置いたファイルはそのまま公開用のファイルとしてコピーされるため，既存のページを残すことができます． 現役メンバのページは，Markdown で新たに書き直しました．

また，記事の著者名からそれぞれの個人ページへ移動できるように，Blowfish のテンプレートを一部上書きしています． リンク先を /lab/nom/users/ユーザ名/ に揃えることで，OB は引き継いだ HTML のページへ，現役メンバは Markdown から生成したページへ移動できます． これまでのページと新しく作ったページを，同じサイトの中で扱う形にしました．

移行作業の流れを履歴に残す

#

こうしたコンテンツの移行では，作業の流れを後から追えるように，取り込みと編集のコミットを分けました． まずオリジナルのコンテンツをそのままリポジトリに取り込み，一度コミットしました． その後，新しいサイトに合わせて編集し，変更した内容をもう一度コミットする手順を踏みました． これにより，元の状態と移行時の変更を Git の差分で確認できるようにしました．

おわりに

#

今回のリニューアルでは，これまでのコンテンツを引き継ぎながら，サイトの見た目と公開の仕組みを新しくしました． 新しくなったノムニチでも，研究室での活動や日々の出来事を発信していきます． 今後ともよろしくお願いします！