Hugo
(ヒューゴ)と読みます。要は、SSG(Static Site Generator)
こと静的サイトジェネレーターです。 Markdown 形式で追加/編集ができるため、とても手軽で簡単に、かつ無料で使えます。
公式の Quick Start を意訳しているだけです
まずは完成形から
ステップ1:Hugo をインストールする
brew install hugo
ステップ2:新しいサイトを作成する
今回はhugoQuickstart
という名前のディレクトリを作成します。
hugo new site hugoQuickstart
ステップ3:テーマを追加する
テーマはこちらの『Ananke Gohugo Theme』を使用します。
そのほかのテーマは 『themes.gohugo.io』から探すことができます。
cd hugoQuickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
次のコマンドでテーマをサイト構成に追加します。
echo theme = \"ananke\" >> config.toml
ステップ4:コンテンツを追加する
hugo new posts/my-first-post.md
作成したコンテンツを開いてみます。draft: true
にしておくと公開ページから除外できます。
$ cat content/posts/my-first-post.md
---
title: 'My First Post'
date: 2021-04-01T12:00:00+09:00
draft: true
---
ステップ5:Hugoサーバーを起動する
hugo server -D
http://localhost:1313/ にアクセスしてください。
コマンドを叩いてきただけですが、一瞬で Webサイト が構築できました。
ステップ6:テーマをカスタマイズする
細かい設定はconfig.toml
でできますが、割愛します。テーマごとに設定内容が異なるため、構成オプションについては、追加したテーマサイトを参照しましょう。テーマサイト
ステップ7:静的ページを作成する
最後に次のコマンドを叩くことで静的ページが作成されます。作成したページは ./public/
に出力されます。こちらをお好きなところにアップロードするだけで公開完了です。自動デプロイをする場合は、このあたりを確認してみると良いでしょう。
-D
オプションはドラフト版も public フォルダに出力します。
hugoコマンドオプション
hugo -D
github pages に反映されない場合
[Settings]-[Pages]
のSourceでブランチ指定が外れている場合があるため、設定し直してあげる必要がある。