研究室のWebサイトをリメイクさせて頂きました

[リンク]

• https://kajilab.net/

[使用技術・サービス]

• Hugo
• GitHub
  • GitHub Action
• さくらのレンタルサーバ
• CloudFlare

梶研究室のWebサイトについて

リメイク以前はWebサイトの管理にWordPressを使用していましたが、メンテナンスができていない、ロード時間が遅いという問題がありました。 そこで、新たにHugoを使用した環境に乗り換えこの問題を解決しました。 Hugoとは静的サイトジェネレータの一種で、MarkDownで書いた記事をあらかじめ定義したデザインで吐き出してくれるものです。 WordPressと異なりデータベースへの問い合わせが必要ないため，読み込み速度の高速化が望めます。

今回のリメイクでは、GitHub Action の導入とCDN(CloudFlare)の導入も行いました。 GitHub Actionの導入によって、変更をプッシュするだけで自動でコンパイルとデプロイが行えるようになり、新しい記事の執筆から公開までの手間が少なくなりました。 また、CDN(CloudFlare)の導入では、更なる読み込み速度の高速化が実現できました。

リメイクした効果

リメイク前とリメイク後の読み込み速度を比較したところ、リメイク後は2〜3秒ほど高速になりました。 また、CDNを導入し、リソース読み込みの最適化を行なった結果、約0.5秒でロードが完了するようになりました。

• リメイク前のロード時間：5.7秒
• リメイク後(CDN導入前)のロード時間：2.2秒
• リメイク後(CDN導入後)のロード時間：0.5秒

リメイク前

リメイク後

リメイク後(CDN有り)