Hugo

Tag: Hugo

目次†

関連ページ†

• ./テーマ作成
• ./hugo-icarus-theme
• ./hugo_theme_robust
• ./ananke
• ./WordPressからの移行
• ./NetlifyとGitHub
• ./サイトマップ作成

参考情報†

• 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の場合カテゴリはタグと同じような感じ。セクションを使った方がわかりやすい。
• 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

• typeってなに？
• デフォルトで最初のフォルダ？contents/posts/aa.mdの場合postsがtype似に設定されるらしい。

シンタックスハイライト†

• Syntax Highlighting | Hugo
• hugo 0.60以降ではデフォルトでシンタックスハイライトが使える。テーマ独自機能(hugo_theme_robustなど)を使わずこちらを使った方がよさげ。
• 例えばgo言語のシンタックスハイライトを有効にする場合。

  ```go
  // ... code
  ```
  

• 単なるpreも以下のように呼び出した方がスタイルが揃う。

  ```
  pre
  ```
  

• config.tomlの設定。必要ならば値を書き換えることもできる。

  [markup]
    [markup.highlight]
        codeFences = true
        guessSyntax = false
        hl_Lines = ""
        lineNoStart = 1
        lineNos = false
        lineNumbersInTable = true
        noClasses = true
        style = "monokai"
        tabWidth = 4
  

テーマ†

おすすめテーマ†

• Clean White: ブログ移行日記(その1) - Hugoとテーマ-@johtaniの日記 3rd | @johtani's blog 3rd edition
• Bilberry Hugo Theme: ブログをHugoに移行しました | 研究開発日誌
• Icarus / Tranquilpeak / Robust: Hugoのオススメ３テーマを相互に切り替え可能な環境を作ってみてわかったこと · GizWoo
• Mainroad: 静的サイトジェネレーターのHugoでブログはじめました - Yabuzaki blog
• Hugo Future Imperfect
  • Hugoの公式にある興味のあるテーマを紹介 - EisKern Tech Blog
  • List - SIerがいろいろ試してみるブログ
• Liva Hugo | Hugo Themes
• Bootstrap Blog Theme | Hugo Themes
• Docsy
  • Googleが作成したテーマ。

テーマのカスタマイズ†

• 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の使用†

参考情報†

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

エディタ†

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が正解)。

Contents

AND OR

メニュー

• about
• blog
• blog(はてな)

配布物

• FaEdit
  • ヘルプ
  • BugTrack
• WikiHelpMaker
  • ヘルプ
  • BugTrack

ゲーム

• 時のオカリナ3DS
• ドラゴンズドグマ
• スプラトゥーン2
• DQB2
• ジョイコン

ショートカット

• 用語集A-Z
• 用語集ア-ワ

今日の20件

最新の20件