色々と技術的な調査をしていてモチベーションが続かずに尻すぼみになってしまうことが多く、適当なところにはき出す場所があればと思っていたのだが、Github Pagesに静的サイト生成ツールでブログみたいなものが作れると言うことを知ったので作成してみた。

ツール選定

この週末ネット上で調べてみたが、Go言語で書かれたHugoというものが生成速度が速くてよいと言うことでこれを選択。休眠状態だがMovable Typeで構築したブログを持っているのでHTMLの生成速度が大事なのは身にしみている。

お手本探し

以下のサイトがわかりやすく解説していたのでこちらを頼りに作業開始。

こちらのサイトはとても丁寧に書かれており、全体として非常に助かったのだが、いくつかはまりポイントもあった。

発生した問題と回避策

数時間戦っていたのでもはや記憶が曖昧だがとりあえずまとめておく。

Hugoの仕様変更？

他のサイトもそうだが、ここ最近でHugoの仕様が変わったのか、default.mdファイルの書式が変わっているらしく、そのままではエラーが出てしまう。

かなり多くのサイトが以下のような記述をしているがこれではエラーになる。

+++
xxx = ""
+++

以下のようにyaml?的な記述にしないと通らない。

---
xxx: ""
---

テーマが適用できない

Hugo Themes | Hugo Phlat Theme

参考サイトで使用しているものだが、個別ページに記述内容が生成されない問題が解決できず。ただ、今考えるとプレビュー方法が間違っていただけかも？

Hugo Themes | Hugo Bootstrap Premium

設定方法が違っているのか上手くいかず。テーマページに調べに行ったが設定項目がたくさんあって怖じ気づいてしまった。

Hugo Themes | Beg

こちらは今回設定したものだが、以下のようなエラーが発生。

ERROR 2017/11/19 18:13:37 Unable to find archetypes directory for theme "hugo_theme_beg" at "/Users/xxxxx/Desktop/hugo/orimajp.github.io/themes/hugo_theme_beg/archetypes"

以下のように同様の問題が発生した人もいるようだが、とりあえずHugo Phlat Themeのdefault.mdをコピーしてエラーは回避。

サイトテーマを Beg に変更 - いなた屋

ただ、上記ページではテーマのdefault.mdと作業フォルダの/archetypes/default.mdの設定がマージされるように書かれているが、うまくいないので作業フォルダのdefault.mdに全ての設定を書いてしまった。

今考えるとテーマフォルダのdefault.mdが古い文法になっているので無視されたのかも知れないが、とりあえず放置。

とりあえずの設定

現時点での設定は以下の通り。

/archetype/default.md

---
slug: ""
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true
author: "orimajp"
tags: ["",""]
categories: ["",]
---

text

/config.toml

色々コメントアウトしまくりで汚いがそのまま載せる。

DefaultContentLanguage = "ja"             # ビルド時のデフォルト言語指定
languageCode = "ja-JP"                    # 公開するページの言語指定
hascjklanguage = true

baseurl = "https://orimajp.github.io/"    # 公開時のベースとなるURL
title = "orimajp Tech Site"               # サイトのメインタイトル
#theme = "hugo-phlat-theme"                # サイトで使用するテーマ名
theme = "hugo_theme_beg"                # サイトで使用するテーマ名
#theme = "hugo-bootstrap-premium"                # サイトで使用するテーマ名

[permalinks]
#  post = "/:year/:month/:title/"           # post タイプページのパーマネントリンク構成
  post = "/:year/:month/:slug/"           # post タイプページのパーマネントリンク構成
  page = "/:slug/"                        # page タイプページのパーマネントリンク構成

[taxonomies]
  tag = "tags"                            # タググループ名
  category = "categories"                 # カテゴリグループ名

[params]
  dateformat = "2006-01-02"
  keywords = ["programming", "developer"] # 生成ページに keywords 指定がないときのデフォルト値 (meta keywords)
  description = "my tech notes"           # 生成ページに description 指定がないときのデフォルト値 (meta description)

#[[menu.header]]
#  name = "Home"
#  weight = 1
#  url = "/"

#[[menu.header]]
#  name = "About"
#  weight = 2
#  url = "/about/"

基本設定は参考サイトにある設定をコピーしたものだが、現状Aboutページなどを作っていないのでヘッダ部分はコメントアウトしている。

エントリ作成時

ファイル生成

こちらは通常通り。

hugo new post/xxxxxx.md

注意点として、プレビューサーバは新しく作成したファイルを上手く扱えない場合がある(個別ページを開いたらNot Foundになったような？)みたいなので、ファイルを作成したら上げ直した方がいい気がする。

ファイル編集

slugにファイル名記載
title変更
tags、categories編集
本文編集

ちなみにslugを書かないとtitleがファイル名になる。日本語のURLはエンコードされる関係上、読みにくくかつ長ったらしくなるので個人的に避けたい。

最初、HugoでGithub Pagesに書いている人たちがどうやってファイル名を指定しているのか分からなかった。

履歴管理

参考サイトではpublic配下をサブリポジトリにして、それ以外のファイル類とは別の、しかし同じgithubのリポジトリに管理していた。

自分としては、書きかけのファイルがリポジトリに公開されるのは不味いこともあるかとおもったので、public配下はgithub管理、それ以外はBitbucketのプライベートリポジトリに置くという変則的な運用とすることにした。

public以外は管理しないという方法もあるが、複数端末で書くことを考えているため却下。

publicディレクトリ配下

全ファイルをgithubのorimajp.github.ioリポジトリにプッシュ。

上記以外

publicとthemesディレクトリを.gitignoreに指定してBitbucketのプライベートリポジトリにプッシュ。

テーマファイルはgit cloneすればいいという割り切りから、themesディレクトリもgit管理とはしない。

余談

静的生成のブログツールでは、如何に体感ビルド時間を短くするかという工夫が大事なので、寝かせてあるブログサイトでは以下のようなことをしていた。

FastCGIやPSGI(Movable TypeはPerl製なので)対応アプリケーションサーバを使ってスクリプトの実行速度を上げる
生成ページをPHPにした上で、サイドメニューなどのパーツ類をPHPインクルードで読み込む(どちらかというと更新対象外ページのサイドメニューが古いままになることを防ぐのが目的)
インデックスページと個別ページ以外をバッチビルドにする(cronでビルドスクリプトを呼ぶ形式)
ブログツールのキャッシュ機能を使う(上手く使わないと更新されなくてはまる)