はじめに
Hugo と GitHub-pages でポートフォリオを公開しようとしてハマったので、備忘録をかねて投稿します。
Hugo 初使用ということもあり、かなりアホなところでハマりましたが、
似たような部分でひっかかる人のためになればと思います。
前提条件
- Hugo 0.55.6 を使用
- academic テーマを使用
- GitHub-pages 上で 公開
-
docsディレクトリ内に静的ファイルを出力
ハマった部分
- Hugo は Hugo と Hugo extended がある
- academic テーマの GitHub レポジトリのどれを使うか
- Hugo の設定ファイル（academic テーマに限る？）
Hugo は Hugo と Hugo extended がある
後述のacademic テーマを使ってポートフォリオ作るぞ！とした最初にぶつかったのがこれです。
思わず「通常版だとできないんかーい！」と言いました。
もっとも、extended 版をダウンロードしてパスを通した場所に置けば終わりなので、実時間としては数分で解決しました。
academic テーマの GitHub レポジトリのどれを使うか
academic テーマにの GitHub 上のレポジトリには、少なくとも以下の二つが存在します。
- テーマそのものである hugo-academic
- テーマを実際に使用したサイト構築キックスターター academic-kickstart
これらを混同してしまうと、ディレクトリ階層構造がグチャグチャになり、頭の中もグチャグチャです。
最初に複数の情報源を参考にした際、ある情報源では欠けている情報を別の情報源で補完しようとした結果、見事にひっかかりました。
ちゃんと公式の説明を読めば一発です。実際、私も公式情報を見ることですぐに解決できました。「おとなしく公式情報見ろ」の典型例ですね。
「動けばいいんだよ」勢は「動けばいいけど動かないんだぜ」勢になりかねないので、
「まず公式見ろ」を心がけます。
公式ドキュメントが読まれない こんな世の中じゃ ポイズン(Qiita)
Hugo の設定ファイル（academic テーマに限る？）
症状
ルートディレクトリに置いた config.toml中の baseURL が何故か静的ファイルに反映されず、うんうん唸っていました。
baseURL = "(URL)"
これが上手くいかないと、CSSやJavaScriptが上手く読み込めないので、まともにページが表示されません。
バグ取り過程
バグ取り過程です。結論だけ知りたい方は、跳ばしてください。
- 他の設定項目は反映されているのか
静的ファイル出力先の設定は反映されていました。つまり、同ファイル中の以下の設定は反映されています。
# Publish directory
publishDir = "docs"
このことから、設定ファイルそのものは正しく読み込まれていることが分かりました。
- hugo コマンドで直接baseURLを指定すると改善するか
改善しました。以下のようにbaseURLを指定すると、CSSやJavaScriptのパスが正しくなりました。
hugo -b (URL)
このことから、別の設定ファイルによって一部の設定が上書きされていると予想しました。
原因
academic-kickstart にある config/_default/config.toml が原因でした。
この設定ファイル中の
baseURL = "/"
によって、baseURLが上書きされていました。
ただ、config/_default/内の設定ファイル群を移動もしくは削除すると、以下のようにalertがないと言われました。
Error: Error building site: "content/home/publications.md:69:1": failed to extract shortcode: template for shortcode "alert" not found
解決策
結局、一番手っ取り早い方法として、config/_default/の中にある各種設定ファイルに、config.tomlの中の設定を映しました。
本来であればもっと賢い方法があると思うので、そちらを確認次第、情報を更新します。
参考にしたサイト
主に参考にしたサイトです。情報提供感謝です。