2025-06-30 (edited: 2025-07-01)

研究紹介サイトのリニューアル

Programming
Vue.js
Nuxt
Website

はじめに

大学教員となり,大学の研究者総覧researchmapを中心に研究業績をまとめることになったので,業績更新の一元化とウェブサイトの棲み分けをすべきと考えて研究紹介サイトをリニューアルした。

従来は,Hugoという静的サイトジェネレータを使って研究プロフィールサイトを作成していた。Markdownで記事を書けば,それが自動でHTMLに変換されるので,レンタルサーバもデータベースもいらない。
(GitHub Pagesにホストさせればいいので,WordPressのようにサーバコストもかからない。)

しかしGo言語ベースなので勝手が分からず,(私が)カスタマイズできないのと,Vue.jsプログラミングを勉強したいので,新しく開発することにした。



技術スタック

今回もGitHub PagesにWebページをホストさせる。

  • Vue.js 3: Webアプリケーションを構築するJavaScriptフレームワーク。
  • Nuxt 3: 静的サイト生成を実現するVue.jsと連携するフレームワーク。これで,ブログ記事などは全てMarkdownで作成する。
  • Vuetify 3: Vue.jsのためのCSSフレームワーク。CSSでデザインするセンスも技術もないため,これでマテリアルデザインを実装する。

また,国内外の研究紹介を想定して多言語対応もしたい。
そこで,Vue i18nを使って英語と日本語のページに対応させた。



GitHubにWebサイトをホストさせる

このサイトはGitHub Pagesにホストさせる形で公開している。
GitHub Actions(GitHub側でビルドとデプロイをやってくれる)を設定すれば,更新したソースコードをGitHubにプッシュしたタイミングで自動で更新できる。
(詳細は,公式ドキュメント参照:https://nuxt.com/deploy/github-pages)



実現したこと・所感

まずは,研究プロジェクトを紹介する「Featured」ページと
個人ブログを掲載する「Blog」ページを作成した。

はじめChatGPTに作らせてみたが,Nuxtまわりの出力についてあまり精度がよろしくない。
おそらくNuxt2の情報とごちゃまぜになってしまい,ChatGPTに頼るほどに泥沼にはまる。

現段階では急がば回れということで,
公式ドキュメント:https://content.nuxt.com/docs/getting-started
を読んで進めるのがよい。



おわりに

研究業績等は,外部のサービスでまとめることにしたので,
今回の研究紹介サイトは最小限かつ十分な構成だと思う。

このブログページでは,プログラミングなど技術周りで試してみたことを
メモがわりに記録するのがメインになると思う。