WordPress構築の経験はありますが、ある時、DBサーバなどを構築せず、ブログ並みにリッチな見た目のサイトが簡単に作れるツールはないかと探し、見つけたのものが「静的サイトジェネレータ(Static Site Generator)」でした。
HUGO選定の理由は、この手のツールでメジャーであり、高速な動作に定評があり、インストーラが必要なく導入が容易だから、です。
この間がっつりHUGOに触る機会があり、そこで感じたメリット・デメリットを書こうと思います。
静的サイトジェネレータを実際に利用する時のイメージを掴んで貰うため、最後に、簡単にサイト構築・記事作成の流れも概説しています。
静的サイトジェネレータとは？
ググれば分かりますが、簡単にまとめます。
- ページは静的ファイルで構成 (要するにHTMLファイルだけ)
- 動的ページの生成処理が無く読込が高速 （PHPなどCGIが不要）
- セキュリティ上のリスクを低減できる
- HTMLファイル直書きより効率が良い
対極にあるのがWordPressのような動的にページを生成するCMSですね。
次に、メリットとデメリットです。
メリット１： ページ読込が高速
WordPressはPHPで動的にページを生成する処理が必要である上、MySQLも必要です。
CPUの面でも、メモリの面でも、サーバのリソースを食います。
静的サイトジェネレータは静的HTMLを出力して、そのHTMLファイルを公開するだけなので、その分リソースを消費しません。
サーバの負荷が軽減され、ブラウザがページを表示するまでの時間が短縮可能です。
どれくらい早いかと言うと、体感で明らかに感じる程の早さです。
HUGOのサイト自体がHUGOで作られていますので、アクセスして確認してみて下さい。
メリット２：セキュリティ上のリスク低減
静的ページのみで構成されるという性質上、セキュリティのリスクが減ります。具体的には、以下の2点。
セキュリティのリスク①：プラグインの脆弱性
WordPressの「プラグイン」は機能追加を容易にする便利な機能ではありますが、このプラグインがセキュリティ上の脆弱性になることが多々あります。
そのためにWordPressの導入を敬遠するケースもある程です。
本体の脆弱性も当然問題になりますが、プラグインに問題があるとWordPressで構築されたサイト全体が影響を受けてしまいます。
しかも、プラグインはそれぞれ別々の開発者が作成・公開しているものなので、WindowsやmacOSのように特定の企業が全てチェックしているわけでもありません。
そのため、脆弱性が作りこまれる余地が全体として増加することになります。
どれくらい脆弱性が多いのかを、具体的にお見せしましょう。
下はJVNの脆弱性対策情報データベースで、ソフトウェアの脆弱性についての情報を公開しているデータベースです。
2019年10月に公表されたWordPressのプラグインに関する脆弱性は1カ月だけで14件もあります。
1カ月だけで14件、発生している状態です。
これは、プラグイン自体が多いとは言え、これは少ない数値ではありません。
WordPressは便利な反面、セキュリティ上のリスクも抱えるものであることを理解して下さい。
ですが、静的サイトジェネレータは、WordPressのこの種の脆弱性のリスクがありません。
回避できるリスク２：悪意あるコードの実行
PHPなど動的Webページ生成では、その仕組み上、悪意のあるコードが実行されるリスクを有することになります。
脆弱性への対処はコーディングで行う必要があり、専門的知識が必要です。
（詳しくはクロスサイトスクリプティング（XSS）などで検索してみて下さい。もしくは以下を参照）
PHPだけではなくJavaScriptもXSSのリスクになり得ますので、静的サイトジェネレータも完璧とは言えませんが、ですが、PHPがない分リスクは減らせます。
以上が静的サイトジェネレータ導入で回避できる、セキュリティ上のリスクです。
これは大きなメリットだと言えるでしょう。
HUGOのメリット
ここからは、静的サイトジェネレータというより、HUGOのメリットです。
サイト構築が高速で待たされない
静的サイトジェネレータの中でも、静的ファイル出力の速度が速いことで有名です。
待たされずに済むところは、良いところですね。
静的サイトジェネレータの中では人気上位
Gatsby.JSなど他にもありますが、静的サイトジェネレータの中ではHUGOは人気です。
開発も活発な印象。
サイトマップ自動作成にも対応
SEO対策的にサイトマップ作成は有効とされてるようです。
（Googleの公式見解では必ずしもサイトマップが必要ではないようですが）
HUGOはデフォルトでサイトマップ(sitemapxml)を作成してくれますので、SEOを意識したツールににあっています。
ただ、現状、静的サイトジェネレータにもWordPressなどCMSと比較したデメリットがあるのも事実です。
そのデメリットについて解説しましょう。
デメリット１：サイト作成にコーディングが必要で手間がかかる
これは大きなデメリットです…。
WordPressだと、Microsoft WordのようにGUI操作でレイアウト・背景色を簡単に作成できますし、ネットから簡単にテーマを入手可能で、テーマの適用もボタン操作だけで簡単にできます。
正直、記事を執筆・プレビューを見る・投稿するといった日常的な作業をしたり、サイト構造の修正・レイアウト修正が簡単にできるという面では、WordPressには圧倒的に軍配が上がります。
Hugoも公式サイトからサイトのテンプレートが入手可能です。
ただ、WordPressと同じ…とまでは言えません（コマンドラインでの操作になれている人には楽でしょうが）。
また、カスタマイズをするにはサイト構造をコーディングする必要があります。
しかも公式ドキュメントは英語ですし、日本語の情報源はまだまだ足りません。
サイト作成の流れをごく簡単に解説すると、
まず、ページを各部品に分け、それぞれのHTMLファイルとして作り、投稿記事を出す部分には、{{ range where .Pages “Section” “artitile” }}と定義したり、タイトルを出す部分には{{ .TItle }}と入れたり、要するにコーディングしないといけません。
コーディングの文法や関数、書き方を習得としないといけません。
WordPressやはてなブログのようにアカウントを作ればすぐにできる、というものではありません。
ですが、htmlを全部自分で作るよりは絶対に楽ではあります。
Hugoのインストールとテーマの適用をローカルのPC環境で行うやり方は以下の記事で説明しています。
よければ、ご覧ください。
デメリット２：エディタがなく執筆に手間がかかる
WordPressだと、デフォルトの状態で、GUIで記事が書けます。
HugoはMarkDown形式で記事を書きますが、表現がHTMLより簡素で、できることが少ないです。
例えば、ブロック要素は書けませんしCLASSやID属性も指定できません。
リンクを新規ウインドウで出力するのさえ、HTMLで書かないといけません。
結局、見た目の良いものを作ろうとすると、HTMLで書くことになります。
なので、執筆環境や利便性という点ではWordPressには絶対に敵わないでしょう。
デメリット３：日本語の情報源が少ない
WordPressは解説本があるし、ネットでの日本語の情報源も豊富ですが、静的サイトジェネレータの日本語の情報源はまだ少ないと思います。
HUGOも公式ドキュメントは英語だけ。
でも英語が読めさえすれば、心強いです。
事例
HUGOで作られたサイト
Let’s Encrypt
無料で使えるサーバー証明書(ドメイン認証型)を提供しています。ciscoやfacebookなどそうそうたる企業がスポンサーについています。
1Password
パスワード管理ツールで有名。
Bootstrap
レスポンシブ対応のフレームワークとして有名なやつ。
Jekyllで作られたサイト
HUGOとは別の静的サイトジェネレータのツールですが、Showcaseを見る限り、Jekyllはアメリカの公的機関でも使用されているようです。
Ruby on Rails
Rubyのフレームワークですね。
HUGOで、どうやってサイトを作るの？
HUGOの場合、大きな流れは、こんな感じ。
- サイト構造(Layout)をコーディング
- 投稿(記事ファイル)をテキストエディタで作成
- 実行ファイルで静的サイトを出力
きっちり説明すると大変なので、イメージを掴んでもらうため、ざっくり説明します。
サイト構造(Layout)をコーディング
HUGOではLayoutと呼びます。
トップページ、個別の投稿記事の表示レイアウト、全ページ共通に出力するheadタグの部分、部品化したメニューの部分、などをコーディングします。
公式HPでテーマ(Theme)が用意されているので、それを使うと楽です。
（ただ、日本人向けしないものが多いかもしれません）
なお、テーマは所定のフォルダに配置するだけでOK。
投稿(記事ファイル)をテキストエディタで作成
サイト構造を定義したら、個別の投稿記事を作成していきます。
投稿記事はテキストファイルで作成し、所定のフォルダに配置します。
残念ながらGUIで作成できる気の利いたエディタはなく、簡易なマークアップ言語であるMarkdown形式で記述するか、HTMLで記述します。
上にも書きましたが、MarkDownは表現が簡素なのでHTMLで書いた方が見た目の良いものが書けるでしょう。
WordPressに比べれば面倒ですが、個別の記事を管理できる点は効率的です。
自力で全部HTMLを書くよりは、はるかに楽です。
実行ファイルで静的サイトを出力する
hugo.exeを実行すると、所定のフォルダ(Public)に静的ファイル一式が出力されます。
あとは、この静的ファイル一式をWebサーバーのドキュメントルートや、GitHubなど、所定の置き場所に配置するだけです。
記事やページを整理・管理できるので、その点は静的サイトジェネレータを使うほうが楽ですね。
Hugoのインストール、テーマ適用、ローカルPCでのテスト環境実行は以下の記事で解説していますので、よければ、どうぞ。
以上です。
