Chapter 5

Hugo

Subsections of Hugo

Layout

ロゴ（左上隅）の変更

  1. layout/partials/logo.htmlを生成
  2. logoの設定を書き込む

ファビコンの変更

  1. faviconがSVG, PNGまたはICOの場合は、ローカルのstatic/imagesディレクトリにfavicon.svg, favicon.pngまたはfavicon.icoという名前で画像を保存
  2. layout/partials/にfavicon.htmlという名前で新しいファイルを生成し、次のように書き込む： 
    <link rel="icon" href="/images/favicon.png" type="image/png">

メニューのChapter番号を表示

  1. layout/partialsにmenu-pre.htmlファイルを生成し、次のように書き込む： 
    {{ if (eq .Params.archetype "chapter") }}<b style="display: inline-block; font-weight: 700; padding-left: .3rem; color: #007bff; text-align: left; width: 1.7rem;">{{ .Params.weight }}.</b> {{ end }}

参考文献

Config.tomlの設定

baseURL = '<URL>'
languageCode = 'ja-jp'
title = "Chiyo's blog"
theme = "hugo-theme-relearn"
publishDir = "docs"

[params]
  themeVariant = ["relearn-dark", "relearn-light", "green", "black", "blue", "learn"]
  ordersectionsby = "title"
  showVisitedLinks = true

[outputs]
  home = ["HTML", "RSS", "SEARCH", "SEARCHPAGE"] 
  section = ["HTML", "RSS", "PRINT"]

[Languages]
[Languages.en]
landingPageName = "<i class='fas fa-home'></i> Home"

[[menu.shortcuts]]
name = "<i class='fab fa-fw fa-github'></i> GitHub repo"
identifier = "ds"
url = "https://github.com/MoeMatsuda-ai/MoeMatsuda-ai.github.io"
weight = 50

[[menu.shortcuts]]
name = "<i class='fas fa-tags'></i> Tags"
url = "/tags"
weight = 70
  • baseURL: サイトのルートURL
  • publishDie: Webサイトで公開するリポジトリ以下のディレクトリ（githubではdocsを推奨）
  • ordersection: titleまたはweightを選択。titleの場合はtitle順、weightの場合はweightで設定された番号順にメニューを並べる
  • showVisitedLinks: 訪れたページにはメニューにチェックマークを付ける
  • menu.shortcuts: ショートカット（ここではGithub repoとtagsを設定）

hugo note

hugoでプロジェクトを作成

$ hugo new site <プロジェクト名>
Congratulations! Your new Hugo site is created in PATH/hugo/test.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

プロジェクトを作成すると次のようなファイルが作成される

$ tree <directory name>/ -L 1
<directory name>/
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── public
├── resources
├── static
└── themes

ページの設定はconfig.tomlから変更できる。

テーマは公式ページからダウンロードし使用する。 テーマの変更や言語設定などもconfig.tomlから行う。

$ cat web-blog/config.toml 
baseURL = 'https://...' # ページを公開するドメイン名
languageCode = 'en-us' # 日本語ならja-jp
title = "<blog name>"
theme = "kraiklyn" # ダウンロードしたテーマ

homeの作成

$ hugo new --kind home _index.md

章の作成

$ hugo new --kind chapter <chapter name>/_index.md

次のような内容が書かれた<chapter>/_index.mdが生成されるため、

+++
archetype = "chapter"
title = "{{ replace .Name "-" " " | title }}"
weight = X
+++

Lorem Ipsum.

Xの部分を数字に置き換える。メニューはその順番で表示される。

記事の作成

$ hugo new posts/test.md

このコマンドを実行するとcontents/posts/test.mdが作成される。

localで表示

また、次のコマンドを実行するとlocalhost:1313でプレビューが見れるようになる。

$ hugo server -D

webサイトの構築

次のコマンドを実行でpublicフォルダに静的ファイルが作成される。

$ hugo

thema

参考