Hugo Academic を使ってウェブサイトをアップデートしました

Summary

• 新: https://github.com/r9y9/website
  • トップページ
  • ブログ一覧
  • デモページ一覧
• 旧: https://github.com/r9y9/blog + https://github.com/r9y9/demos-src

これまで、ブログとデモページ¹をそれぞれ個別に Hugo で管理していましたが、それらを統合して一つの Hugo site として管理するように変更しました。 内部的に色々変わっていますが、URL はほぼ変わらないようにしています。

はじめに

2年振りくらいにブログを書いています。大したことを書くわけではないのですが、ウェブサイト（ブログ含む）を大幅にアップデートしたので、その記録を残しておきます。

Why

なぜ大幅にアップデートをしたのか、理由は以下のとおりです。

• 経歴をまとめたプロフィールページなどコンテンツを追加したかった。ただし、これまでは、ブログとデモページをそれらに特化した個別の Hugo site として管理しており、それ以外の情報を追加することが容易ではなかった。プロフィール用に別の Hugo site を作ることも検討したが、管理のし易さの観点から一つの Hugo site にまとめたかった。
• Hugo の theme を修正してレイアウトを調整するのが大変だったので、いい感じレスポンシブにしてくれる、スマホで見てもレイアウトが崩れない Hugo theme を使いたくなった。
  • これまでは、minimal な theme をベースに自分で修正して使っていたが、限界がきた。

後者のレイアウトの問題は、theme を変えれば済む話とも言えますが、前者の問題を解決するためには、theme 変更に加えて複数のsiteを統合する必要がありました。

アップデートに関してやったこと

基本方針

• Static site generator として Hugo を使う。速い。
• Hugo theme には https://github.com/wowchemy/starter-hugo-academic を使う。デザインがシンプルで好み、かつカスタマイズが柔軟にできそうだったので。

具体的な手順

• starter-hugo-academic をベースに、全体のレイアウトを作る。僕の場合、Home (トップページ) に Profile, Posts, Projects, Talks の4つのコンテンツを配置しました。このうち、Profile には、CV²のリンクを貼るようにしました。
  • Publications コンテンツを作ることも考えましたが、Google Scholarで良くない？と思って作っていません。
• ブログ のコンテンツを Posts に移行する。一覧はこちら
  • https://wowchemy.com/docs/content/front-matter/ にも書かれている通り、Hugo academic ならではの front matter がありますが、基本的には markdown + 必要なstatic filesをコピーするだけで移行はできました。
  • Hugo academic に summary を表示する機能があったので、すべてのブログ記事に summary を設定しました。
  • Tableのレイアウトが崩れる問題があったので、微妙にcssを修正しました。
• デモページ のコンテンツを Projects に移行する。一覧はこちら
  • blogを移行するのとまったく同じように移行できました
  • 論文に記載したデモページのURLが404にならないように、URLが変わらないようにする、あるいは リダイレクトを設定しました。Hugoだと、aliases というパラメータを front matter に書くことでリダイレクトを実現できます。
  • これまでの取り組みを整理するいい機会だと思って、共著論文のデモページもコンテンツに追加しました。
• Talks のコンテンツをおまけで新しく追加しました。LINE DEV DAYでの過去の発表とか

雑感

良かったこと

• ウェブサイトはいい感じになった。プロフィールの追加ができたことはもちろん、モバイル端末で見てもレイアウトが崩れなくなったのは地味に嬉しい
• ブログとデモサイトを一つの Hugo site として管理することで、相互のコンテンツを行き来しやすくなった。具体的には、記事の終わりに、Related というセクションに関連するブログ記事やデモページのリンクが表示されるようになった。また、ページのヘッダーから、相互のコンテンツを行き来することもできる。
• 管理するリポジトリの数が4から2に減った。
  • 旧: blog, r9y9.github.io, demos-src, demos
  • 新: website, r9y9.github.io

悪かったこと

• https://github.com/wowchemy/starter-hugo-academic はカスタマイズの自由度は高い一方で、適切に設定するのが難しかった。ドキュメントは豊富だが量が多く、全部読んで使いこなすのは大変に感じた。
• 大変だった・・・もうしばらくウェブサイトを大きく更新したくないなと思いました。

おわりです。ただの備忘録ですが、ここまで読んで頂きありがとうございました。