Webサイトをリニューアルしました

2020/01/13

新ロゴに…なるか?

河口研究室のWebサイトがリニューアルされました!(研究室見学に前後してすみません.でもきれいになりましたよ!)

新しいWebサイトは,Gatsbyを使った静的サイトとなっています. ハイパフォーマンス及び充実したモバイル対応を実現した河口研Webサイトをよろしくおねがいします.

新サイト

さて,リニューアルの裏側について紹介したいと思います.

以前のWebサイトはCMSを用いて内容を管理していましたが,管理において以下の問題がありました.

  • データ: 記事のデータがすべてサーバ内に保管されており,バックアップが貧弱
  • 更新: ウェブサイトの管理ページにログインしての記事更新が必要であり,研究内容やブログの更新が面倒
  • デザイン変更や多言語対応: あちらをいじるとこちらが壊れる的な謎の現象の発生

(実はモバイル表示でメニューが表示されないバグが発生していました)

  • パフォーマンス: CMSで必要になるMySQLと,Webサイトを動かすApacheがメモリを取り合っておりチューニングが必要

これらの問題を解決しつつ,よりクリーンで見やすいWebサイトの実現には以下の条件が必要だと考えられました.

  • データ・更新: git管理が可能なテキストメインでの管理
  • デザイン変更: ブロックの生成やスタイルの管理が容易
  • 多言語対応: 最初から多言語対応(日英)が可能なテンプレートが利用可能
  • パフォーマンス: データベース等を必要としない静的サイト

これらをクリアできる技術として,静的サイトジェネレータを利用することにしました. 有名所として,HugoJekyllがありましたが,チュートリアルが充実しており, 比較的コンポーネントを容易に記述できそうだったGatsbyを使うことにしました.

GatsbyはReactベースとなっており,npmに代表されるパッケージマネージャでプラグインも容易に利用できます. ページテンプレートはデフォルトで多言語に対応するiceberg-gatsby-multilang を元に,一部ページコンポーネントやビルドスクリプト,ディレクトリ構造に変更を加えて利用しています.

ブログ投稿や研究紹介等のページはMarkdownで記述されたファイルから生成されています. デザイン上の自由度は少々落ちてしまいましたが,記述が容易になりましたので,これまで以上にアクティブな更新ができることと思います!


CMS入りのWebサイトを構築した先輩のポストもどうぞ.

問題は作ってから保守・管理の引き継ぎになるわけですが,そこは頼もしい後輩,またはスタッフ陣が手を貸してくれることでしょう.

とのことでしたが,頼もしい後輩は作り直しを選択しました……