Hugo の履歴(No.8)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• Hugo へ行く。
  • 1 (2020-05-05 (火) 23:56:45)
  • 2 (2020-05-07 (木) 01:06:23)
  • 3 (2020-05-08 (金) 00:02:11)
  • 4 (2020-05-12 (火) 23:08:24)
  • 5 (2020-05-14 (木) 00:22:25)
  • 6 (2020-06-08 (月) 23:47:01)
  • 7 (2020-06-10 (水) 23:54:36)
  • 8 (2020-06-12 (金) 03:38:02)
  • 9 (2020-06-14 (日) 02:15:01)
  • 10 (2021-10-07 (木) 01:42:48)
  • 11 (2021-10-10 (日) 05:24:02)
  • 12 (2021-10-25 (月) 22:30:20)
  • 13 (2021-11-18 (木) 00:57:23)
  • 14 (2021-11-22 (月) 20:06:50)
  • 15 (2021-11-26 (金) 23:58:19)
  • 16 (2022-04-12 (火) 00:28:15)
  • 17 (2022-05-15 (日) 02:42:44)
  • 18 (2022-05-27 (金) 02:31:13)
  • 19 (2022-06-01 (水) 02:17:32)
  • 20 (2022-08-12 (金) 23:52:51)

---

&tag(Hugo);

目次†[edit]

関連ページ†[edit]

• ./テーマ作成
• ./hugo-icarus-theme

参考情報†[edit]

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

インストール†[edit]

• MacPortsの場合以下の方法でインストール

  sudo port install hugo

基本的な使用方法†[edit]

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

  hugo new site demo

• テーマの追加。

  cd demo
  git init
  git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
  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†[edit]

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

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

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

カテゴリ†[edit]

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

コンテンツ管理†[edit]

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

テーマ†[edit]

おすすめテーマ†[edit]

• Clean White: ブログ移行日記(その1) - Hugoとテーマ-@johtaniの日記 3rd | @johtani's blog 3rd edition
• Bilberry Hugo Theme: ブログをHugoに移行しました | 研究開発日誌
• Icarus / Tranquilpeak / Robust: Hugoのオススメ３テーマを相互に切り替え可能な環境を作ってみてわかったこと · GizWoo
• Mainroad: 静的サイトジェネレーターのHugoでブログはじめました - Yabuzaki blog

テーマのカスタマイズ†[edit]

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

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

• たとえばフロントマターで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の使用†[edit]

参考情報†[edit]

• Hugoのテーマ、Robustを採用・カスタマイズ - なるほどわからん
• HUGO のテーマ Robust のカスタマイズ - zzzmisa's blog
• Alice in the Machine - wiki
• blog/using-hugo.md at master · kaitoy/blog

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

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

• scssを扱うためにはextended版が必要？

  sudo port install hugo +extended

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

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

found no layout file for "HTML" for kind "page"†[edit]

• 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"