当サイトは以前まで、自分でプログラムを書いてCMSを構築していました。しかしバックエンドを含めたCMSを独自開発するのに限界を感じ、機能も静的なもので事足りることから、サイトCMSをHugoへ全面的に移行しました。

この記事ではHugoだからこそ実現できることや、ついでに対応したPWA(Progressive Web Apps)についてまとめています。

Hugoだからこそ実現できたこと

ここで紹介することは、Hugoというより静的サイトジェネレーターの特徴を述べることとなってしまいますが…。

とにかくサイト表示速度が速い

Webでは表示速度が速いことが正義とされています。静的サイトなのでサーバー側の余計な処理が発生せず、とにかく表示速度が速いです。リンクをクリックしてから次のページが表示されるまでのインターバルが短いので、よりストレスなくサイト閲覧が可能になりました。

バックエンド開発が必要ない

自分でCMSを構築してみると痛感するのですが、バックエンド開発にはなかなか時間と労力を要します。コンテンツをデータベースへ登録したり画像等メディアファイルをアップロードする機能を開発するのは案外大変です。

Hugoはバックエンド開発に捧げる時間と労力を省略してくれます。これにより、サイトの見た目やインタラクションの部分のみに時間をさけるようになりますHugoのテーマも沢山公開されていますので、見た目にすら時間をかけずコンテンツ制作に没頭することも可能です。

コンテンツをMarkdownで一元管理可能

Webアプリ上のCMSでは、データベースを用いてコンテンツを管理することが一般的です。

Hugoでは、コンテンツの本文はMarkdownで書きます。コンテンツ内に画像等を挿入するのもディレクトリに格納するだけです。このように、非常にシンプルにコンテンツを制作できます。Markdownで書けることに幸せを感じる人も多いのでは?

ついでにPWA対応しました

MaRRoN デスクトップPWA

PWAとは、デバイスネイティブアプリのように動作するWebアプリです。お使いのデバイスにWebアプリをインストールして使うようなイメージです。

当サイトもPWAに対応し、デバイスにインストールして閲覧できるようになりました。これにより、WebブラウザのもつURL等を表すバーがなくなり、スッキリとしたウィンドウでご覧いただくことが可能です。

MaRRoN モバイルPWA

自分のサイトが独立したウィンドウで動くのはなんとも言えない感動がありますね(笑)

システム移行を終えて

Hugoでサイトを作ることに慣れてきたので、どこかのタイミングでHugoテーマを作って公開でもしたいなと思っています。サイト開発者が「このデザインいいね!」って思えるようなテーマを作りたいところです。

PWA対応は、簡単な作業のみでできました。まだオフラインで動作するようにしていないので、別の機会で対応しようと思います。

参考文献

この記事の 最終更新:2021.1.30