静的サイトジェネレータ Hugo でWebサイトを構築した理由

Posted by Yu Kiyokawa on Thu, Jan 5, 2023

静的サイトジェネレーターを使用している理由

ズバリ,運用・管理が楽だから.
他にもWordpressのようなCMSにあるリッチな機能を必要としなかったからなど理由はあるが, 一言で言ってしまえば運用・管理の楽さにある.

静的サイトジェネレーターとは?

静的サイトジェネレーターは, 個々のHTMLページをコーディングする作業を自動化し,完全に静的なHTML Webサイトを生成をサポートするツールのこと.

静的Webサイトとは, 毎回同じように読み込まれるWebサイトのこと. 静的なWebページは単純なHTMLファイルのため高速に読み込むことができる.

動的Webサイトとは, ユーザーの場所や時間, 動作など, 入力されたデータに基づいて異なる内容が読み込まれるWebサイトのこと. 動的なWebページは描画処理を行うためのJavaScriptコードをブラウザ内で実行する必要がある.

このサイトを作成するのに使ったHugoは静的サイトジェネレータのうちの一つ.
Hugoの特徴は, データベースを使用せずコンテンツをすべてファイルで管理, 記事はHTMLもしくはMarkdown形式で記述すればよく, 個別ページやインデックスページのHTMLファイルなどが簡単に作れることである. Hugoは, 多くのWebサイトのテーマが公開されており, WordpressなどのCMSを使ったサイトと遜色ないサイトを構築できる. 他にも, SEO対策やコメント機能等の機能を迅速に行うための既製のテンプレートが豊富であり, 拡張性が高くさまざまなサイト構築に利用可能.

静的サイトジェネレーターのメリット・デメリット

私がHugoでWebサイトを構築するのを選択した細かい理由を表にしてみた. 静的サイト/動的サイトというよりは, 大衆から認知されているWordPressと表現する.

静的サイト(Hugo)動的サイト(WordPress)
運用コスト高いやすい
表示スピード速い遅い
セキュリティ高い低い
学習コスト普通普通
記事執筆簡単簡単
バージョン管理難しい簡単

運用面
静的サイトは,全員に同じページを表示. WordPressは,ユーザーに応じて表示するページを変更できる.
Webサイトの運用で, ユーザーごとに表示したい内容を変えたいという運用はそもそも考えていない.
静的サイトなので運用コストもWebサーバー用意するだけ.

表示スピード
静的サイトはあらかじめ表示されるページが作成されているので表示が早い. 一方, 動的サイトはアクセスされた時やユーザーのアクションのタイミングでページが作成されるため表示が遅くなる.
表示スピードは, 阿部寛のHPを見習って, 早ければ早いほどよい.
平成初期のWebサイトのように数行ずつ表示されるのを待つのを懐かしみたいなら別だが, ずっと表示を待つのは誰もがストレスだろう.

セキュリティ
静的サイトは一度公開されてパプリックになると, データベースやサーバーとの通信が発生しない. そのためサイバー攻撃の入り口がほぼ無く, 高いセキュリティ性がある.
人が訪れないこのサイトが悪用されるなんて考えられないので, セキュリティは全然気にしないってのが本音だが. WordPressのページがハックされてスパムメールの送信に自分のサイトが使用されたり, 悪質なサイトへリダイレクトされたり, ウィルスを埋め込まれたりされる可能性があるのが嫌. WordPressを扱っていたときにセキュリティアップデートしなかったらGoogleから怒られてサイトが観覧できなくなったことがある. そしてセキュリティアップデートがとても面倒.

学習コスト
学習コストは, WordPressもHugoもそんなに変わらない. 若干Hugoの方が楽だった.(個人の感想です)
WordPressは, 色々とやろうとすると結局phpをガシガシしなきゃならなくて, 学習コストは両者とも変わらない. サイトの立ち上げ速度はWordPressよりHugoの方が早くできたので, 若干Hugoに軍配が上がる.

記事執筆の手軽さ
記事執筆なんてわざわざWebブラウザから編集できなくてもいいし, WordPressの記事編集が独特すぎて慣れない. Hugoは書き慣れているマークダウン形式なので楽にできる. あとGitHubでCI/CD組んでいるので, GitHub上で編集すればいいので実質Webブラウザで記事執筆可能.

バージョン管理
WordPressでバージョン管理をしようとするとプラグイン等を導入しないと出来なかった気がする. Hugoはそもそもファイル管理なのでGitHubにバージョン管理を任せられる.
細かい点だと, WordPressはユーザーの管理できるが, Hugoは静的サイトなので出来ない. (現状ユーザー管理をしたいと思わない)
最近は, Hugoのテーマが充実してきているので, WordPressにできてHugoに出来なかった, コメント機能, 問い合わせ機能, サイト内検索はできるようになってきた.

これらの理由から静的サイトジェネレータHugoを使いWebサイト構築することにした.