Help us understand the problem. What is going on with this article?

HTMLを直でいじってた人がHugoを使ってみた感想

More than 3 years have passed since last update.

書いてる人の属性

  • 趣味でいくつかHPを作って運営している
  • 同人音楽サークルのHPとか
  • ブログとか頻繁に更新する要素はあまりない
    → あってもリリース情報とかライブ情報くらい
  • とはいえ、似たような記述を何度も書くのは疲れる
  • コンソールとかコマンドプロンプトに苦手意識はないタイプ

もっと更新が楽にならないか??

オーソドックスにWorpressとかでも良いんだけど、アクセス数も少ないし、CMSの管理もちょっと面倒。

静的サイトジェネレーター

そんな感じでちょっと調べたら「静的サイトジェネレーター」っていうものが大分便利そうだった。
Hugo以外だとMiddlemanとかJekyllが有名みたい?

だいぶアバウトな理解だけど、パーツごとに分けたHTMLやMarkdownをビルド(Hugoの場合「hugo」コマンド)することで、本番用のサイトができあがるって感じ。

Hugoを選んだ理由

正直直感・・・なんだけど、調べた感じ一番シンプルそうだった。
「HTML直より楽したい」っていう割と不純な動機だったので、利用するのに学習コストかかりすぎるのは嫌だった。
Hugoは公式ドキュメントもしっかりしてるから安心。
https://gohugo.io/

何が良いの?

  • 公開ファイルはしょせんただの静的なHTMLなのでアクセスが早い。裏でPHPとかのプログラムが動いてない。
  • ブログをMarkdownで書ける
  • 開発時のローカルサーバーがファイルの更新を検知してくれて便利
hoge.bat
hugo server -w

ルートフォルダで上のコードを実行するとローカルサーバー(localhost:1313)が立ち上がる。
-w がファイル更新検知オプション。

  • HTMLの構造を把握するのが楽
index.html
<!DOCTYPE html>
<html lang="ja">

  {{ partial "head.html" . }}

  <body>

    <div id="all">

        <header>

          {{ partial "nav.html" . }}

        </header>

        {{ partial "contents1.html" . }}

        {{ partial "contents2.html" . }}

        {{ partial "footer.html" . }}

    </div>
    <!-- /#all -->

    {{ partial "scripts.html" . }}

  </body>
</html>

こんな感じで要素を意味ごとに分けて開発できるので、ごちゃごちゃになったHTMLに惑わされることが少ない。Server Side Includesでナビゲーションバーだけ別ファイルにしたりするのと似た感覚。
・・・偉そうに書いたけど、上の構造を一から全部作ったわけでなく、公式にかっこいいテーマが紹介されてるのでそれを使えば簡単。
Hugo Themes Site

HTML直書きとくらべてどこがいいの?

上記の繰り返しになっちゃうけど、HTML直書きだと規模が大きくなるにつれて構造を把握するのが難しくなったりする。
Hugoを使えばコンテンツごとにパーツをわけて記述できるので、「あれいまここなんなんだっけ」ということが少なくなる。
また、新規にページを足したいときも既存のHTML構造を気にする必要がない。
→そもそもブログ記事とかリリース情報の追加くらいだったらHTMLを足す必要すらない。

どんな人におすすめ?

  • HPが大きくなるに連れて構造が汚くなるのが嫌って人
  • 「Wordpressおそすぎ・・・」って人
  • 一人、もしくは少人数で運営している人
    →簡単とはいえ公開にビルドって手順を踏まなきゃいけないから、コマンド入力とか慣れてない人と一緒に使うのは大変。 様々なスキルレベルの人がいる場合は素直にCMSを使ったほうがハッピーそう

ということでHugoを使ってHPを作成したときに感じたことでした。
超便利なので、みんなもこの素晴らしさを体感して欲しい・・・

arsagapartners
最高品質を最速で。 業務未経験でも最速最高の成長を!
https://www.arsaga.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away