1. ホーム
  2. Web制作
  3. Hugoを使ったWebサイトの制作

Hugoを使ったWebサイトの制作

Web制作
hugo-logo.svg

Go言語製のSSG、“Hugo"でWebサイトをリニューアルしました！

WordPressからHugoへ

これまで、Jizo GamesのWebサイトではWordPressを導入していました。

WordPressに不満があったわけではありませんが、Go言語の勉強を始めたこともあり自然とHugoに足が向かいました。

ゲームを作り始めたときはPythonのゲームエンジン・Pygameを使っていました。そして、WordPressをカスタマイズするにはPHPが必要です。文系の大学を卒業し、独学でプログラミングを学んでいる私にとっては、二つの言語を使うのはなかなか大変です。

「EbitengineとHugo、どっちもGo言語製じゃん！」

ゲーム・Webサイトを作る言語を統一できると思い、ふわっと入門しました。

Hugoとは

Hugoは、Go言語製のSSG（静的サイトジェネレーター）です。

SSGは、マークダウンファイルをもとにHTMLファイルを生成し、それをアップロードします。WordPressのようにブラウザからログインして記事を更新！みたいなことはできなくなりましたが、なかなか頻繁に更新できていなかったので、これはこれでいいかなと思っています。

逆に、WordPressの管理画面のようなものがないので、しばらく更新していなくても不正ログインの恐怖におびえる必要はありません。

HugoとWordPress

WordPressからHugoへ移行するにあたって、私が感じた違いやそれぞれのメリット・デメリットをまとめてみたいと思います。

情報量の違い

まず第一に、WordPressとHugoではインターネット上の情報量が圧倒的に違います。

WordPressは、もはや説明不要なくらい有名なCMSです。全世界の半分近くのWebサイトがWordPressで作られているくらいです。その分プラグインなども豊富で、ブログサイトだけでなくさまざまなWebサイトを構築できます。「あんな機能がほしいなぁ」と思って検索すれば、先人たちの知恵がすぐに出てきます（日本語で！）。

一方Hugoの場合は、日本語だけではなく英語の記事やドキュメントを読んでいく必要が出てきます。とはいえ、昨今はAIの発達により翻訳については困りません。なんなら、直接AIに聞いてしまえばだいたいのことは答えてくれます。

AIが学習するコードの量も全然違うでしょう。きっと、深いことをやろうとしてくるとWordPressとHugoではAIが出力するコードの質も変わってくる可能性もありますね（私はあんまり実感しませんでした）。

注意点として、Hugoはv0.146.0というバージョンから、テンプレートシステムが新しくなっています（参考：New template system in Hugo v0.146.0）。

AIに聞く場合は、バージョンの指定を忘れないようにしましょう。そうしないと、古いテンプレートの情報が含まれた回答が返ってくることもありますので。

デフォルト機能の違い

標準で搭載されている機能も、だいぶ違います。

WordPressでは、ちょっと思いつくぐらいの機能であれば標準で搭載されています。そして、カスタマイズも容易です。

Hugoでは、基本的にサーバーにアップロードするのはHTML・CSS・JavaScriptファイルになります。なので、サーバー側での処理が必要な処理についても自分で実装する必要があります。記事へのコメントや、アクセス数を集計して「人気の記事」を出力するなどですね。

また、例えばHugoで目次の出力は以下のようにします。

{{ .TableOfContents }}

出力されるHTMLは以下のとおりです。

<nav id="TableOfContents">
  <ul>
    <li><a href="#section1">Section 1</a>
      <ul>
        <li><a href="#section1-1">Section 1-1</a></li>
        <li><a href="#section1-2">Section 1-2</a></li>
      </ul>
    </li>
    <li><a href="#section2">Section 2</a></li>
  </ul>
</nav>

さて、この出力されるHTMLを少し変えたいとき、管理画面からちょちょいとはできません。このように、標準機能の数やカスタマイズの容易さという点では、WordPressに軍配が上がります。

テーマの数と初心者へのハードル

HugoもWordPressも、「テーマ」を使用してサイトのレイアウトを簡単に変更できます。

WordPressでは、有料・無料でたくさんのテーマがありますよね。導入するだけで見た目は完璧、記事を書くだけ！のようなテーマもたくさんあります。初心者でも、コードを一切見ることなくオシャレなサイトを構築できます。このあたりが、WordPressのシェア獲得に一役買ってそうですよね。

Hugoにも、テーマがたくさんあります（参考:Hugo Themes）。ただ、サイトの設定やコンテンツの作成には、エディタを開いたりコマンドを入力したりする必要があります。

そういった点で、管理画面でコードを見ずに編集できるWordPressよりは、初心者へのハードルは高めかもしれません。また、記事を書くためにはマークダウンの知識も（そこまで詳しい必要はないとはいえ）必要になります。

まとめ

HugoもWordPressも、それぞれにメリット・デメリットがありますね。

例えるなら、WordPressはフルコース料理、Hugoはごはんだけ持って必要なおかずをつけ足していくようなイメージでしょうか。

WordPressには必要なものがすべてそろっているといえば聞こえはいいですが、近くのコンビニに行くのに2tトラックは必要ないですよね。自転車で十分です。

Webサイトは全世界の人が見ることができ、中には悪意を持った人もいるでしょう。セキュリティや運用のコストと、Webサイトの性質を天秤にかけ、自分のサイトにあったCMSを選ぶのが重要です。