書いてる人の属性
- 趣味でいくつかHPを作って運営している
- 同人音楽サークルのHPとか
- ブログとか頻繁に更新する要素はあまりない
→ あってもリリース情報とかライブ情報くらい - とはいえ、似たような記述を何度も書くのは疲れる
- コンソールとかコマンドプロンプトに苦手意識はないタイプ
もっと更新が楽にならないか？？
オーソドックスにWorpressとかでも良いんだけど、アクセス数も少ないし、CMSの管理もちょっと面倒。
静的サイトジェネレーター
そんな感じでちょっと調べたら「静的サイトジェネレーター」っていうものが大分便利そうだった。
Hugo以外だとMiddlemanとかJekyllが有名みたい？
だいぶアバウトな理解だけど、パーツごとに分けたHTMLやMarkdownをビルド（Hugoの場合「hugo」コマンド）することで、本番用のサイトができあがるって感じ。
Hugoを選んだ理由
正直直感・・・なんだけど、調べた感じ一番シンプルそうだった。
「HTML直より楽したい」っていう割と不純な動機だったので、利用するのに学習コストかかりすぎるのは嫌だった。
Hugoは公式ドキュメントもしっかりしてるから安心。
https://gohugo.io/
何が良いの？
- 公開ファイルはしょせんただの静的なHTMLなのでアクセスが早い。裏でPHPとかのプログラムが動いてない。
- ブログをMarkdownで書ける
- 開発時のローカルサーバーがファイルの更新を検知してくれて便利
hugo server -w
ルートフォルダで上のコードを実行するとローカルサーバー(localhost:1313)が立ち上がる。
-w がファイル更新検知オプション。
- 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を作成したときに感じたことでした。
超便利なので、みんなもこの素晴らしさを体感して欲しい・・・