github の hugo を clone して docker build すれば docker の環境は出来るので、書くまでもないと言えば書くまでもない。

2022 April に再構築しようと思って自分の記事を見てる。

TL;DR

正式版と Draft 版の二つの Hugo サーバを立ち上げ、Draft でうまくいったら git をつかって、正式版から pull して反映するという環境を作りたい。

そのために hugo + git の docker 環境 + ホスト側に同じバージョンの hugo が必要になった。go の環境はあまり関係なかった、、、

まずは出来た Docker のイメージを使う

sinby/hugo-git:0.97.3-extended で公開しているので

% sudo docker run --rm -v =0/site:/site 0.97.3-extended new site .

こんな感じでまずは site を構築する。=0 は tcsh の機能なので、bash 使っている人とかは $(pwd) とかに置き換えることになるでしょう。(2022 に入って bash 派に転校しました)

ところで、いったいこれはなにをしているのか？

/site を構築したのだ

docker 内の /site に hugo の source が設定されている（というかカレントディレクトリが /site になるみたい）。参考までに書くと hugo でこのディレクトリを変えるには --source string で変更する。

/site は docker の中にあるのでアクセスできないと一切何もできない。なので、-v で docker のホストの site ディレクトリを /site にするように設定している。

sinby/hugo-git:0.97.3-extended は docker 内の hugo を起動するので引数に new site . を指定する。これは docker 内に login して

( cd /site ; hugo new site . )

としたのと同じだ。run で --rm 指定しているのでコマンドの実行が終了すると（つまり hugo コマンドが終了すると）docker 自身もコンテナとして終了し、そしてイメージを消去する。

これ(--rm ね)をつけないと山のように終了したイメージの残骸が docker が管理するディスク上のどっかに蓄積していくことになる。

hugo 実行しただけじゃん

ってことはこれ hugo 実行しただけじゃん。例えば version 。

% sudo docker run --rm -v =0/site:/site sinby/hugo-git:0.80.0 version

これ docker 起動して hugo version 実行して　docker 終了して、イメージを消すというかなり簡単なことを大げさに実行する。だとしたら、手元に hugo 0.80.0 があれば

% hugo new site site

とと下のほぼ等価。まぁ最新の hugo をインストールするのにちょっとこつがいるんだけどね(後述)。

つづけて hugo をサーバーとして起動

% sudo docker run --rm -v =0/site:/site -p 1313:1313 sinby/hugo-git:0.97.3-extended  server -D --watch  --bind 0.0.0.0

-D と --watch で draft も表示させつつつデバッグ用として起動。これで Docker のホストからは 1313 で hugo をみることができる。が、まだ何も設定してないので、エラー表示されるでしょう。

docker の中に入って設定をする

いや～これおかしいけどね。docker ps であらかじめ調べておいた Container ID で exec で中に入る。login みたいなもんだね。

手順は https://gohugo.io/getting-started/quick-start/　とほぼ同じ

sudo docker exec -it　<ContainerID> /bin/ash
/site #
/site # git init
/site # git clone https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
/site # echo 'theme = "ananke"' >> config.toml

ついでにちょっとコンテンツも追加

/site # hugo new posts/0212-0.md
/site/content/posts/0212-0.md created

折角 /site がホストに出ているのに、docker の中に入って作業するのおかしいけど、とりあえず、ここまででいろいろできるということで。あと、config.toml の中の baseURL も変更しておきましょう。

baseURL = "http://192.168.0.XXX:1313/"

あれ？うまくいかないな、立ち上げの時に -b で指定するとうまくいく。う～ん。まぁいいや。これで回避。

% sudo docker run --rm -v =0/site:/site -p 1313:1313 sinby/hugo-git:0.80.0 server -D --watch  --bind 0.0.0.0 -b 192.168.0.XXX:1313

ブラウザーで動作確認出来たらここで最初のミッション完了。

ドラフトなサーバとして仕上げる

折角、Docker のホストから /site が見えているのに、わざわざ exec で docker 内に入った理由は site のすべてのファイルのオーナが root だからです。さっきつくった posts/0212-0.md も vim で編集するのに sudo が必要になったりして、大変回りくどくなります。

そこで、ホスト側で編集できるように chown してしまいます( とには適切な名称を入れてください)。そして draft なサーバとして再度立ち上げます。そのためディレクトリ名を site から draft に変更します。ポートも 31313 にします(--appendPort=false とするみたい。~~なんか直感的には逆なんだけど~~ URL にかいてある port を無視するという意味みたいね)

> sudo chown -R <user>:<group> site
> mv site draft
> sudo docker run --rm -v =0/draft:/site -p 31313:1313 0.97.3-extended  server -D --bind 0.0.0.0 -b 192.168.0.XXX:31313 --appendPort=false
Start building sites …

ホスト側で編集

これでホスト側で編集できるはずです。お！できました。

ホストに同じバージョンの hugo をいれる

ここが難しかった。

実は、この方法は hugo の Dockefile をホストで実行しているだけです。

まずは最新の go を導入

apt とかで入れると古めの go が入るので、とりあえず apt でいれた golang も remove して、本家から tar.gz をとってきて /usr/local に解凍。/usr/local/go/bin を path についかしておきます。これで go コマンドが実行可能になりました。

> go version
go version go1.18.1 linux/amd64

[2022] ついでに 1.15.8 から 1.18.1 にバージョンアップ!!

$ ls -l /usr/local
...
lrwxrwxrwx  1 root root    9  4月 22 13:53 go -> go-1.18.1/
drwxr-xr-x 10 root root 4096  2月  5  2021 go-1.15.8/
drwxr-xr-x 10 root root 4096  4月 13 00:42 go-1.18.1/
...

参考までに書くとこの /usr/local/go の環境(SDK?) が GOROOT になるようです。（ここでは必要がなかったので特に環境変数は設定していません）

mage のインストール

hugo の build に mage が必要です。~~そこで mage を get します。~~ install になったようです。ここではクリーンに作りたいので GOPATH を ~/Hugo/go に設定しておきます。

> setenv GOPATH ~/Hugo/go
> go get github.com/magefile/mage

[2022 bash版]

$ go install github.com/magefile/mage@latest
go: downloading github.com/magefile/mage v1.13.0

これで ~/Hugo/go/bin に mage というコマンドが追加されました。path に追加しておきましょう。

hugo の build(2021古い情報)

get は deprecated なので installを使います(後述)ここでは歴史的経緯を残す意味で削りません。

ソースを持ってくるのに go get を使うと途中でいくつかエラーになります。なぜだかはわかりません。依存関係がおかしな具合になっているように見えます。

~~そこで、Docker ファイルにあるように clone してコピーします。そして mage でビルド・インストールします。~~

> cd ~/Hugo/go/src/github.com
> mkdir gohugoio
> cd gohugoio
> git clone https://github.com/gohugoio/hugo.git
> cd hugo
> mage hugo
> mage install

~~うまくいけば hugo が ~/Hugo/go/bin にインストールされます。~~

> ~/Hugo/go/bin/hugo version
Hugo Static Site Generator v0.80.0-792EF0F4 linux/amd64 BuildDate: 2021-02-12T12:35:21+0900

hugo の build どうする？[2022版]

get は deprecated になったのでどうすればいいの？

https://github.com/gohugoio/hugo
をみると

mkdir $HOME/src
cd $HOME/src
git clone https://github.com/gohugoio/hugo.git
cd hugo
go install

らしいので、おもむろに release-0.97.3 で install

$ cd hugo
$ git checkout -b release-0.97.3 
$ go install
go: downloading github.com/alecthomas/chroma v0.10.0
go: downloading github.com/bep/overlayfs v0.6.0
go: downloading github.com/fsnotify/fsnotify v1.5.1
go: downloading github.com/spf13/afero v1.8.2
go: downloading github.com/spf13/cobra v1.4.0
go: downloading golang.org/x/sync v0.0.0-20210220032951-036812b2e83c
go: downloading golang.org/x/sys v0.0.0-20220209214540-3681064d5158
...途中略
go: downloading github.com/go-openapi/swag v0.19.5
go: downloading github.com/mailru/easyjson v0.0.0-20190626092158-b2ccc519800e

うまくいけば hugo が ~/Hugo/go/bin にインストールされます。あれ？なぜか v0.98.0-DEV。なぞ。

$~/Hugo/go/bin/hugo version
hugo v0.98.0-DEV-41cc4e4ba3bd849cee7dcb691504ebebbfce680f linux/amd64 BuildDate=2022-04-18T18:01:38Z
sunra:hugo$ git branch
  master
* release-0.97.3
  v0.80.0

ホスト側でコンテンツを登録して編集

できるかな～

> cd draft
> hugo new posts/0212-1.md
> vim content/posts/0212-1.md

お～できた。

とりあえず draft で git commit しておきます。

> git add archetypes/ config.toml  content/
> git commit

ドラフトじゃないサーバを立ち上げる

sudo docker run --rm -v =0/site:/site sinby/hugo-git:0.80.0 new site .
sudo docker run --rm -v =0/site:/site -v =0/draft:/draft -p 1313:1313 sinby/hugo-git:0.80.0 server --bind 0.0.0.0 --baseURL=192.168.0.X

いいかげん docker-compose で便利にしよう

version: '3'

services:
    server:
        image: sinby/hugo-git:0.80.0
        command: server --bind 0.0.0.0 --baseURL=192.168.0.X
        volumes:
            - "./site:/site"
            - "./draft:/draft"
        ports:
            - "1313:1313"

draft から clone

なんかうまくいかなかったのでかなり無理矢理。

/site # git clone /draft
/site # mv draft/.git .git
/site # git remote -v
origin  /draft (fetch)
origin  /draft (push)
/site # git fetch
/site # git log

commit b1fc9f11d960c5ae604e88e89ce976747288a085 (HEAD -> master, origin/master,
origin/HEAD)
Author: RS
Date:   Fri Feb 12 08:57:02 2021 +0000

    submodule をやめた

commit 2270efcb1a56bf68f864322797ee011ba303557b
Author: RS
Date:   Fri Feb 12 08:36:48 2021 +0000

    コンテンツ増えた。
/site # git reset --hard
/site # ls -R content
content:
posts

content/posts:
0212-0.md  0212-1.md

/site # git clone /draft/themes/ananke/ themes/ananke
/site # ls themes/
ananke

reset --hard がかなり無理矢理感がありますが、まぁわかってやっているので良しとしましょう。ananke も clone しておきます。

なんか、とちゅうごちゃごちゃになって、docker を再立ち上げとかしましたが、、、なんとか目的通りのことが出来ました。

一通り確認

1313 で正式版立ち上げ
31313 でdraft 版立ち上げ
draft の content を編集 => draft 版のサーバで変更がリアルタイムに確認できる。draft の行が入ったものも見ることができる。
content の編集と draft の行を削る。
git commit する。
1313 に git pull を exec => 正式版のサーバで変更がリアルタイムに確認できる。draft の行が入ったものは見ることができない。

sudo docker exec -it <containerID> git pull

最後の手順で sudo を必要とするけど、まぁいいんじゃないって感じ。

おまけ。hugo-fresh を使う [2022]

Bulma という CSS がよさそうです。bootstrap よりわかりやすくシンプルかな。hugo-fresh という theme で使われています。ananke はちょっと(私には)大げさだった。

おまけ。reveal も使う[2022]

スライドを使うなら reveal 。超便利。フォントの大きさも変えられる。hugo-fresh と共存できます。

theme = ["hugo-fresh-asagao", "reveal-hugo"]

おまけ。ananke をちょっと使いやすく？する

たぶん thema は ananke を拝借しながら、今後は独自に発展すると思われるので意図的に clone にしました(submodule にしなかった。submodule にすると clone 先で本家を参照するから)。

ananke 以外の themes が必要な時は適宜 docker を立ち上げればいいでしょう。例えばスライド用に slide.example.com で、 themes をスライドから拝借、docs.example.com で themes は docsy にするとか。

i18n を追加して

ソースの一番上(/draft とか) でi18n を追加して ja.toml も追加(en.toml からコピー)。そして Recent を最近のに read more を続きはこちらに変更

> mkdir i18n
y> diff i18n/ja.toml  themes/ananke/i18n/en.toml
8c8
< other = "最近の {{.Title }}"
---
> other = "Recent {{.Title }}"
11c11
< other = "続きはこちら"
---
> other = "read more"

config.toml に DefaultContentLanguage を追加

DefaultContentLanguage = "ja"

メニューも追加

config.toml にメニューも追加

[[menu.main]]
identifier = "posts"
name = "posts"
url = "/posts/"

なんとなくですが、WordPress の themes とはちがい、自分でどっかから themes を clone してそれを変えていた方がよさそう。複数の themes からその機能が欲しいときは自分でコピペする。そうすると、どんどん最初の themes とは違うものになっていくでしょう。

ということは themes にとらわれる（こだわる）のではなく clone して独自スタイルに成長させる(各自がテーマを持つ)という風になる気がしますよ。

感想

よくできているような、難しいような。hugo-fresh を読んででだいぶ理解が進みました。Hugo で range はできるけど foreach 的なことはできないみたいなので、結局、最後は lisp に戻るかも。デザイン上の良し悪しは結局ツールじゃなくて HTML5 CSS JS に集約されるから。それをうまく組み合わせることを助けてくれるツールがいいよね。

いまのところ WordPress にしても Hugo にしても助けてくれるというよりはその Theme を使え的なところがある。