Quick Start | Hugo
インストール
brew install hugo
バージョン確認
hugo version
新規サイト作成
hugo new site プロジェクトディレクトリ名
テーマ追加
- 自作したテーマでももちろん良いが、ゼロからの構築は大変
- Hugo 公式も推奨しているテーマ
ananke をインストールし、それをカスタマイズしていく方が楽
cd ディレクトリ名
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \"ananke\" >> config.toml
config.toml
config.toml は、Hugo サイトの各種設定を記述するファイル
Archetypes を設定する
Archetypes | Hugo
フロントマターを設定する
Front Matter | Hugo
- カテゴリー・タグ・月別アーカイブなどを作成する場合は、タクソノミーも設定する
Taxonomies | Hugo
assets ディレクトリに各種ファイル用のディレクトリを作成
- css, js, （グローバルで管理する）画像などを格納するための各種ディレクトリを用意する
テーマ/assets ディレクトリ配下に作成する
Sass
root/themes/ananke/assets/scss/main.scss
画像
root/themes/ananke/assets/img/common/logo.svg
試しにコンテンツを追加する
- Hugo は、
content フォルダにある Markdown ファイルをコンバートする hugo new コマンドで、基本となるフォーマットを記述した Markdown ファイルを生成してくれる
hugo new ファイル名.md
- 階層を設けたい場合は、ディレクトリを含めたパスを指定すればよい
hugo new ディレクトリ名/ファイル名.md
ローカルサーバー起動
hugo server
- サーバーを起動することで、以下の URL からアクセスできる
- ただし、デフォルトのままだと、複数のプロジェクトサイトを同時進行する際にポート番号が重複する可能性がある
- また、便利に実行環境を用意できるオプションなどもあるため、多少のカスタマイズを行っていた方がよい
HTML ファイル生成
- 以下のコマンドで
public ディレクトリ配下に HTML ファイルなどが一式生成される
hugo
hugo --minify
ファイルパスがおかしい問題
- デフォルトのままだと、リンクや画像、css などは相対パス表記で出力される
とりあえず当面のしのぎ
config.toml に以下を記述することで、生成されるパスが相対パス → 絶対パスになる
canonifyurls = true
- なお、この設定はローカルサーバーでの表記には影響しない
- （
http://localhost:1313/style.min.css といった表記となる）
