Hugo の履歴(No.16)

Tag: Hugo

目次†

↑

参考情報†

Goで作られた静的サイトジェネレーター。

↑

インストール†

MacPortsの場合以下の方法でインストール。テーマによってsassのエラーがでるのでextendedは必須。
```
sudo port install hugo +extended
```

↑

基本的な使用方法†

HUGOで静的サイトを作成してみた - Qiita
サイトの作成(demoというサイトが作られる)
```
hugo new site demo
```

テーマの追加。

cd demo
git init
# anankeの場合
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
# robustの場合
git submodule add https://github.com/dim0627/hugo_theme_robust.git themes/hugo_theme_robust
echo 'theme = "ananke"' >> config.toml

記事の追加。content/post下に記事が作成される。
```
hugo new post/my-first-post.md 
```
hugo server
```
hugo server -D
```
記事の公開。静的サイトジェネレータ「Hugo」〜公開方法〜 - SIS Lab。
hugoコマンドを実行するとpublicディレクトリの下にhtmlが書き出される。それをscpなりで公開する。

↑

Tips†

↑

Hugoの記法†

基本Markdownで書く。
Hugo v0.60以上だとhtml直書きは認識しないが、config.tomlに以下を追加することで認識する。
```
[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
```

↑

サブディレクトリで公開†

とりあえず以下のようにすれば良い？

baseurl="http://localhost/hugo"
RelativeURLs=true
CanonifyURLs=true

↑

カテゴリ†

Hugoのテーマを自作してみる階層化したカテゴリーの実装 - hansode Lab
Hugo のカテゴリー(categories) を階層化する | のい太ろぐ…記事「categories 」を使って階層化する方法。
フォルダ階層をメニューとして表示する。
- Content Sections | Hugo
- パンくずリストを表示するには - bnote

↑

コンテンツ管理†

ディレクトリを「001-about」(/about)「002-home」(/home)のように設定していけばセクションの順番をフォルダ名で管理できる…と思ったがセクションにslugは設定できないようだ。
対して記事に「url」を指定してパーマリンクを設定すると、ディレクトリ部分まで含めてすきなURLを設定できるが(例: /t/hoge.html)、「/t/」に対応したセクションが存在しないと記事一覧は取得できない。
結局about、homeのようなディレクトリを設定し、weightを設定するhugo公式ドキュメントサイトのような方式が一番素直なのか。？

↑

ツリー構造†

サイト内の全ページの一覧をセクションの階層構造に従って表示する | まくまくHugo/Goノート

↑

サイト変数†

Hugo Custom Page And Site Variable | Lua Software Code
config.tomlで独自トップレベル変数は定義できない(googleAnalyticsは使えるが、googleAdSenseは使えない。自分で定義しても無視される)。
自分のパラメーターはparamsに。
params内部の変数は小文字で定義。アクセスも.Site.Params.fooBarのように。
大文字小文字のあたりはややこしい。Avoid string variable escaping? - support - HUGO

↑

テーマ†

↑

テーマのカスタマイズ†

Hugoでテーマをカスタマイズする方法
layouts以下にテーマと同じファイルを階層構造で作成する。

↑

ページリソースをサムネイルとして使用したい。†

たとえばフロントマターでthumbnailをページリソースとして指定している場合、以下のようにテーマを改造する。

 {{ if .Params.thumbnail }}
   {{ $image := .Resources.GetMatch .Params.thumbnail }}
 <div class="thumb" style="background-image: url('{{ $image.RelPermalink }}');"></div>
  {{ else }}
 <div class="thumb"></div>
 {{ end }}

↑

hugo_theme_robustの使用†

↑

参考情報†

↑

エディタ†

↑

Visual Studio Code†

↑

hugofy†

サーバーの開始と終了だけ使う。
Command+Shift+Pでコマンドを選ぶ

''トラブルシューティング

「Default theme not set. Please set one」が発生。「Hugofy: Set Theme」を実行してテーマを設定すれば良いらしい。

↑

トラブルシューティング†

↑

scssが変換できないとかどうとかのエラー†

scssを扱うためにはextended版が必要？
```
sudo port install hugo +extended
```

↑

Error: add site dependencies: load resources: loading templates: walk: Readdir: decorate:†

hugo server -Dでエラー。
layoutフォルダ内にEmacsのロックファイルが残っていたのが原因。
ドットから始まるファイルがないか確認する。

↑

found no layout file for "HTML" for kind "page"†

hugo server -Dを実行すると以下の警告メッセージが表示される。
「 found no layout file for "HTML" for kind "page": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.」
原因はテーマを指定していないこと。
config.tomlで指定。
```
theme = "mytheme"
```

↑

public以下にファイルが書き出されない†

コンテンツがdraftになっていないか確認。
「hugo server -D」で確認していて「hugo」でコンパイルするとドラフトが表示されない。

↑

情報が反映されない？†

Hugo サーバーで記事の変更内容が反映されない場合 | まくまくHugo/Goノート
キャッシュが原因？
```
$ hugo server --ignoreCache
```
階層構造がおかしかったのもこれが原因か。

↑

新規追加したエントリーが表示されない†

Hugoは標準で未来の日付のエントリーが表示されないようになっている。
これを変更するには「buildFuture = true」をconfig.tomlに追加する必要あり。
Front Matterのdateで「2021-11-26T14:24:32+00:00」のようにタイムゾーンを間違えていると意図せず未来の日付になっている可能性がある(日本だと+90:00が正解)。

Hugo の履歴(No.16)

目次†

関連ページ†

参考情報†

インストール†

基本的な使用方法†

Tips†

Hugoの記法†

サブディレクトリで公開†

カテゴリ†

コンテンツ管理†

ツリー構造†

サイト変数†

テーマ†

おすすめテーマ†

テーマのカスタマイズ†

ページリソースをサムネイルとして使用したい。†

hugo_theme_robustの使用†

参考情報†

エディタ†

Visual Studio Code†

hugofy†

トラブルシューティング†

scssが変換できないとかどうとかのエラー†

Error: add site dependencies: load resources: loading templates: walk: Readdir: decorate:†

found no layout file for "HTML" for kind "page"†

public以下にファイルが書き出されない†

情報が反映されない？†

新規追加したエントリーが表示されない†