サブディレクトリへのHugoサイトの構築方法

この記事では、Hugoブログをサブディレクトリ以下で構築する為の手順をメモしている。FTPなら簡単にできることだが、Hugo+GitHub+Netlifyでは、ただググるだけではハマッた。config.tomlにpublishDirを設定することによって可能になった。

TL,DR

このブログはHugoGitGitHubNetlifyをつかって構築している。

ふつうのホームページは、レンタルサーバを借りて、FTPでファイルをアップロードする。

たとえば

  • 自分のサーバースペース
    • 一番上の階層
      • index.html
      • about.html
      • contact.html
      • 二番目の階層
        • index.html
        • aaaaa.html
        • bbbbb.html
        • ccccc.html
  • Aのサーバースペース
  • Bのサーバースペース
  • Cのサーバースペース

というフォルダ構成で、ホームページをアップロードしたとする。そうすると、ccccc.htmlのURIは、http://自分.ドメイン/二番目の階層/ccccc.htmlとなる。

ところで、ググリ倒してみても、GitでGitHubにPushしたデータをNetlifyがHugoでdeployする近頃の方法(意味不明でしょう)では、http://自分.ドメイン/というURIでのブログは構築できても、http://自分.ドメイン/二番目の階層/以下に展開するような構成にはできないようで、ハマッた。

結果的には、うまいこと意図したとおりに表示させることができたので、どういう方法を試してみたのか、どの方法で成功したのかをメモする。

目標

  • http://自分.ドメイン/ブログ/というURIで、ブログを構築したい。
  • http://自分.ドメイン/のトップページにHugoは絡ませない。

先に結論

  • config.tomlにpublishDirを設定する。
  • publishDirで設定したフォルダをつくる。

試行錯誤

サブドメイン

http://ブログ.自分.ドメイン/というURIで、ブログを構築すれば、http://自分.ドメイン/のトップページとは別個にブログ記事を管理したい要求は簡単にクリアできる。

今回はhttp://自分.ドメイン/以下に記事を蓄積させたかったので却下した。

ブログというセクション

http://自分.ドメイン/をトップページとし、ブログというフォルダ(セクション)をつくって管理しようと思った。ただし、次の問題があり、却下した。

  • http://自分.ドメイン/がブログ自体のトップページになってしまう。
  • Hugoの設定上、一番上のセクションだけしかindex.htmlがつくられない。

たとえば、http://自分.ドメイン/ブログ/記事/2019/08/16/diary/という記事があったとする。http://自分.ドメイン/ブログ/にアクセスすると、ブログというセクションに含まれる記事のリストが表示されるが、http://自分.ドメイン/ブログ/記事/にアクセスしても404 Not foundとなってしまう。

Hugoの使用上これは仕方がないが、http://自分.ドメイン/ブログ/記事/という階層でもリスト表示させたい。

baceURLの設定

それでは、config.tomlにbaceURLという設定項目があるから、これにhttp://自分.ドメイン/ブログ/というのを加えたらどうか、と試してみた。

うまくいけば、http://自分.ドメイン/ブログ/以下にブログが構築されるはずだ。

意気揚々とhttp://自分.ドメイン/ブログ/記事/2019/08/16/diary/にアクセスしてみると、404 Not found。

ためしにhttp://自分.ドメイン/記事/2019/08/16/diary/でアクセスすると、きちんと表示される。ブログ記事内のリンクはhttp://自分.ドメイン/ブログ/記事/2019/08/16/diary/で設定されている。

baceURLというのは、生成される記事内のURLの基準となるものであって、それと実際のディレクトリ構成がきちんとつながっていなかったのが原因だとわかった。

RelativeURLsとCanonifyURLs

baceURLにサブディレクトリを設定したところ、内部リンクがうまくいかないという相談Issue when baseurl have subdirectory - support - Hugoを参考に、RelativeURLsとCanonifyURLsをtrueにしたが、あまり関係がなかった。

publishDirの設定

生成される記事の収納場所はpublishDirで設定される。

Netlifyでは、publish内のファイルを公開するようにしているから、”publish/ブログ”として設定し、ついでにpublishのrootに適当なindex.htmlを設置した。

これでhttp://自分.ドメイン/にアクセスすると、適当なindex.htmlが表示され、http://自分.ドメイン/ブログ/にアクセスすると、ブログのindex.htmlが表示されるようになった。

まとめ

HugoGitGitHubNetlifyという構成はFTPなどとはまるで違う考え方が必要になるようだが、ひとつひとつ試行錯誤をして、その記録を残していきたい。