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

参考