note.

学んだことのメモ

Hugo始めました

Posted on
hugo

Hugoについて

Go言語の静的サイトジェネレータです。md形式でblogを作れて簡単です。

Theme選び

出始め当時はテーマが少ないなんて記事も多かったですが、今では結構選択肢が多いようです。私はシンプルが好みなので、Picklesを使うことにしました。

Deploy方法

AWS, Firebaseなど色々用意されています。次を参考にGitHub Pagesが無料なので使うことします。

  1. 公式
  2. Hugoで1からテーマを作ってGitHub Pagesにデプロイする

参考URLを読むとデプロイ方法は次の通りとわかり１の手法にすることにしました。理由はHugoの設定関連をprivate repositoryにして隠すことができること、単純にわかりやすいからです。

  1. blog用のrepositoryの master branchから配信
  2. blog用のrepositoryの gh-pages branchから配信
  3. blog用のrepositoryの master branchの /dir から配信

ただいくつかの点でハマったので補足情報をメモします。例えば sample さんのGITHUBアカウントだと、repositoryを二つ作ります。

  • Hugoの設定ファイルを管理するrepository e.g. sample/blog
  • GitHub Pages配信repository e.g. sample/sample.github.io

ポイントは sample/blog/ に生成される /public を、sample/sample.github.io のsubmoduleとすることです。

こんな感じ。

 tree -L 1
sample/blog // Hugo用のrepository
├── Makefile
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── public // submoduleでsample/sample.github.ioのrepositoryを参照
├── resources
├── static
└── themes

これによって sample/blog の有する .git/ ではgit remoteに sample/blog を参照し、sample/blog/public の有する .git ではgit remoteに sample/sample.github.io を参照する仕組みができる。

運用について

整理すると必要な作業は３つありそうです。

  1. /content 配下にblog記事を書く
  2. Hugoの設定関連を、sample/blog にPush
  3. /public の静的ファイルを、sample/sample.github.io にPush

簡便にするためにMakefileも利用します。

  1. $ hugo new posts/example.md で対応するこ
  2. $ make update で sample/blog にPush
  3. $ make publish で sample/sample.github.io にPush

3のポイントは /public ディレクトリでの作業が必要なので;でcdした状態を維持することです。

update:
	@git add .
	@git commit -m "Update Settings"
	@git push origin master

publish:
	@hugo
	@cd public; git add .; git commit -m "publish"; git push origin

トラブルシューティング

GitHub PagesでThemeが読み込めない？

hugo serve では、問題なくpicklesのthemeが適用されていましたが、GitHub Pagesだと読み込んでくれませんでした。

原因は config.toml にて、baseURL = "http://sourjp.github.io/" となっていたことです。GitHub Pagesではhttps対応なのにhttpにしたことで、Hugoが読み込む各種cssファイルなどのリンクはhttpになってしまい、エラーを返していました。

なので、baseURL = "http://sourjp.github.io/" とすることで解決です。

Picklesでpageのリストが取得できない？

.md ファイルを content/posts/ 以外におくと認識してくれないようでハマりました。pickles の制限かと思いますが時間あるときに調べたいと思います。

まとめ

最初は手間取理ましたが環境ができたらとっても快適です。ちょっとこだわりをもつと大変そうですが、まずはシンプルに運用しつつ、学んだことをblogとして書いていこうと思います。