docker + hugo + netlify で静的サイトを作った

2019-06-18

概要

静的サイトを作りたいのでつくった。

環境

静的サイトジェネレーター: hugo
ホスティングサイト: netlify
開発環境: windows10 + docker

hugo + netlity の構築方法はいくつすごくわかりやすい記事があった。ただそれをdockerを使ってやる記事はあまりなく苦労したので、そのメモ。ちなみにできたのがこのサイト😁

運用方針

hugo側でやる設定はdocker runとかで、それ以外のファイル修正はホスト側でやる感じ
毎回コンテナ起動＋オプションでhugoの設定 → 終了時にコンテナ削除
でもマウントしてるのでホスト側のファイルは更新されている

補足：やってみてわかったのだが、サイト作成のhugo new siteと記事作成のhugo new posts以外は全部ホスト側でできるっぽい。ホスト側(windows)に余計なもの入れたくなくdockerを使ったが、わざわざdocker使わなくてもよかったかも？けど気軽にやり直るし、イメージをdockerhubにおけるし、やっぱdocker素晴らしい。

使うhugoのdocker image

“hugo docker”でググるといくつか出てくるのでそれを使ったら良いと思う。ちなみに今回はdockerの練習も兼ねて自分でイメージを使った。https://hub.docker.com/r/japer/hugo

ubuntuベースで容量も大きいので、使うなら他の人のがええで😇

dockerでサイト作成

まずはサイトの初期作成

docker run --rm --name hugo -v %cd%:/home/ -it -p 1313:1313 japer/hugo hugo new site [site-name]

–name hugo
- コンテナ名、--rmでコンテナ終了時に削除するのでなんでもよい
-v %cd%:/home/
- ホストのカレントディレクトリ%cd%(windowsはこの表記)、とコンテナ側のhomeフォルダをリンク
- %cd% はlinux系だと$PWDと書かないと動かない。ややこしい。以降は全部%cd% と記述。
- コンテナ側の作業ディレクトリは毎回削除するのでなんでもよい
-p 1313:1313
- ホストとコンテナのポートをリンク。hugoは1313がデフォ？
japer/hugo
- イメージ名
hugo new site [site-name]
- [site-name]のサイトを新規作成

これによってコンテナのhomeフォルダに[site-name]フォルダ+その下にいろいろ設定ファイルができる。かつhomeとホストのカレントディレクトリがリンクしてるので、ホスト側にも[site-name]フォルダが作成される。

(先にgit initしてもいんだけど、サイトのフォルダに何か入っている状態でhugo new siteをすると、フォルダが空じゃないよ、となってエラーになる。なので先にサイトのフォルダを作っておく）

リポジトリ登録

[site-name]フォルダに移動

cd [site-name]

git init (とりあえず全部addでpush)

echo "first commit" >> README.md
git init

echo /public>> .gitignore
git add --all
git commit -m "first commit"
git remote add origin [url]
git push -u origin master

.gitignore に/publicファイル指定。netlifyでホスティングする予定のため

テーマファイルを適用

手順

テーマ一覧 https://themes.gohugo.io/ で好きなフォルダをthemesに入れる

重要なのはgitが二重管理にならないことなので

zip解凍でフォルダを直接入れる
git clone で入れて、.gitを削除
git submodule add を使う (http://vdeep.net/git-submodule)

などの対処を行うと👍

設定

config.tomlファイルを編集。以下を追加

theme = "[theme name]"

どんな名前か＋さらに追加でどんな記述をtomlに行わないといけないか、テーマによって結構違ったりするのでreadmeを読んでくとgood

新規記事作成

サイトのフォルダへ移動しておく

cd [site-name]

run をしたときに新規記事追加

docker run --rm --name hugo -v %cd%:/home/ -it -p 1313:1313 japer/hugo hugo new posts/filename.md

-v %cd%:/home/
- 今の作業場所[site-name] %cd%、とコンテナ側のhomeフォルダをリンク
- コンテナ側は直接home下に設定ファイルがいろいろ作成されるけど、フォルダの上下関係はあってるので問題ない
hugo new posts/filename.md
- hugo new posts/[filename]でpostsフォルダの中に名前をつけて新規記事の作成
- content/posts/以下に記事のファイルが作られる
- 名前はpostsじゃなくてもいいけど、再設定が必要？
- 違うディレクトリでhugo new をすると勝手にcontentが作られちゃうので注意

記事の編集

filename.md を編集。ファイル内の記述を

draft: false

としないと実際には反映されないので注意。build時に--buildDraftsを追加すれば下書きでも反映される。

(必要のない作業)

netlifyなのどのホスティングサイトと連携していれば、あとはgithubにコミットすることで自動的にビルドして反映してくれる。なので以下は必須ではないけど、ローカルでサイトを確認したいときに行う作業 * ビルドする(/publicにhtmlとか公開用のファイルが作られる) * サーバーを起動

build ([site-name]フォルダで実行)

docker run --rm --name hugo -v %cd%:/home/ -it -p 1313:1313 japer/hugo hugo

start server

docker run --rm --name hugo -v %cd%:/home/ -it -p 1313:1313 japer/hugo hugo server --bind=0.0.0.0 --buildDrafts

option * --bind=0.0.0.0でホストからでもアクセスできるようになる * --buildDrafts はドラフト記事も表示 http://localhost:1313/ にアクセスしれば確認できる。

Netlifyでホスティング

あとは作ったリポジトリをpushしてnetlifyと連携すればよい。他力本願だがこちらのサイトが非常にわかりすく参考になった。https://blog.mismithportfolio.com/web/hugo-netlify-build

詰まったこと

テーマがうまく反映されなかった

原因1：ブラウザ問題
- ローカルでの確認時、vivaldiだとレイアウトがくずれる😭 chrome推奨
原因2：キャッシュの問題
- さらにchromeでもテーマを変更するとくずれた。全部履歴を削除したら直った。おそらくキャッシュの問題
原因3：[params]の問題
- テーマによってはconfig.tomlで[params]以下にいろいろ記述する必要がある。ちゃんと読んでなかった😅
原因4：URLの問題
- config.toml で記述したbaseURLと、netlifyで設定したURLを一致させないと、いろいろバグる

1,2はローカルでの確認時に気をつける。 3,4はいつでも気をつける。

参考になったサイト

jguyomard/hugo-builder : docker + hugo の組み合わせ1。dockerfileとdocker runの設定に参考になった。

Using Hugo and Docker to Build Static Website Hosted on AWS S3 and Cloudfront : docker + hugo の組み合わせ２

How To Install and Use Docker on Ubuntu 18.04 : ubuntu + hugo . dockerfileの作成に参考になった

NetlifyでHugoで作った静的サイトをホスティングしてビルドを自動化する : dockerは使ってないが一番参考になた。

NetlifyでHugoのビルドを自動化する : 同じくnetlify+hugo+git

Github＋Hugoでブログを作る|github pagesの導入方法 : git+hugoの解説。gitの説明が丁寧

概要

環境