Hugo

作成日: 2017/03/04 (更新日: 2018/11/17)

Hugo の使い方

Hugoは、Go言語で作られた静的サイト生成ツールです。

Markdown 形式のページファイルをもとに、サイトを生成することができる
静的な HTML を生成するツールなので、WordPress などの CMS よりも安全なサイトが作成できる
exe 1つで動作するため、インストールが簡単
サイトの生成速度が速い

という特長があります。

hugo

このページでは、バージョン 0.21 時点での Hugo の基本的な使い方を説明します。

Hugoのインストール (Windows)

公式のチュートリアルに従う場合、下記の手順でインストールを行います。 (フォルダの場所はどこでもよいですが、はじめは従っておいたほうが問題が少ないと思います)

https://github.com/spf13/hugo/releases からWindowsのzipをダウンロードします。
OS が 64bit の場合、「hugo_X.XX_Windows-64bit.zip」です。(X.XX の部分はバージョン番号です)
C:\Hugo フォルダを作成します。
C:\Hugo\bin フォルダを作成します。このフォルダはHugoの実行ファイルを配置する場所です。
C:\Hugo\Sites フォルダを作成します。このフォルダはHugoで生成するサイトのフォルダを配置する場所です。
1のファイルをすべて C:\Hugo\bin に配置し、hugo_X.XX_windows_xxx.exe となっているファイルを hugo.exe に変更します。
C:\Hugo\bin にパスを通します。

できあがると、フォルダの構成は下記のようになっていると思います。

C:\Hugo
├─bin
│      hugo.exe
│      LICENSE.md
│      README.md
│      
└─Sites

また、コマンドプロンプトで「hugo version」というコマンドを実行すると、バージョンが表示されます。(されない場合はおそらく6がうまくいっていません)

サイトの作成

サイトの作成は、コマンドプロンプトで下記のように行います。

cd c:\Hugo\Sites
hugo new site 【フォルダ名】

実行すると、下記のようなメッセージが表示されます。

Congratulations! Your new Hugo site is created in C:\Hugo\Sites\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".

Visit https://gohugo.io/ for quickstart guide and full documentation.

(意訳)

おめでとうございます！新しい Hugo サイトが C:\Hugo\Sites\test に作成されました。

もう少しのステップですぐに使えます。

1. 同名のフォルダ内にテーマをダウンロードします。
   https://themes.gohugo.io/ からテーマを選ぶか、
   "hugo new theme <テーマ名> コマンドで作成してください。
2. いくつかコンテンツを追加したいと思うかもしれません。
   "hugo new <セクション名>\<ファイル名>.<フォーマット>" でファイルを追加することができます。
3. 組み込みのライブサーバーを "hugo server" によって開始します。

クイックスタートガイドと完全なドキュメントは https://gohugo.io/ を確認してください。

また、下記のような構成のフォルダが作成されます。

サイトフォルダ
│  config.toml
│  
├─archetypes
├─content
├─data
├─layouts
├─static
└─themes

サイトの設定ファイル

Hugoでは、 config.toml というファイルがサイトの設定ファイルになっています。

languageCode = "en-us"
title = "My New Hugo Site"
baseURL = "http://example.org/"

項目	意味
languageCode	このサイトの言語 (日本語の場合 `"ja"`)
title	このサイトのタイトル
baseURL	このサイトのURL

下記のような設定も追加できます。

項目	意味
theme	使用するテーマ名 (`hugo-zen` など)
preserveTaxonomyNames	trueの場合、カテゴリーやタグの名前を書いたままの表記にする (trueにしない場合は、「CSS」→「Css」(URL上は「css」)のように、文字が自動変換されます)

※ Configuring Hugo に、サイト設定項目の一覧があります。

テーマ(後述)で必要な設定も、この設定ファイルに記載していきます。

ページの追加

ページの追加は下記のコマンドで行います。

hugo new 【ファイル名】

【ファイル名】の部分は、「test.md」や、「post/20170101.md」などです。実行すると、下記のような内容を持つファイルが生成されます。

+++
title = "test"
draft = true
date = "2017-03-04T21:00:32+09:00"

+++

+++ で囲まれている部分は投稿情報を表す部分です (「Front Matter」と呼ばれています)

項目	意味
title	この投稿のタイトル
draft	この投稿が下書きかどうか (trueの場合、下書きを生成するオプション()をつけないとページ生成されない)
date	この投稿の日付

本文は +++ の下から書いていきます。

テーマ

Hugoで作るサイトの外観はテーマによって決まります。

テーマは https://themes.gohugo.io/ から気に入ったものを使用することができます。

(gitを使用してテーマを配置する例)

cd themes
git clone https://github.com/leopku/hugo-theme-next.git next

落石浩一郎さんが作成された Hugo Zen のようなシンプルなテーマを使用すると、カスタマイズがしやすく便利です。

cd themes
git clone https://github.com/rakuishi/hugo-zen

サイトの確認

サイトフォルダ内で下記のコマンドを実行すると、http://localhost:1313/ のアドレスでサイトの確認が行なえます。

hugo server

主なオプション

オプション	意味
-D (--buildDrafts)	下書きも含めて確認できるようにする
-t 【テーマ名】(--theme=【テーマ名】)	使用するテーマを指定する。「サイトの設定ファイル」で theme を設定していない場合は、テーマを指定しないとページが表示されません。

「Hugo - Using Hugo (英語)」に、オプションの一覧があります。
ファイルの変更を監視して再読込する「-w (--watch)」というオプションは、オプションをつけなくても標準で有効化されています。

サイトの生成

サイトフォルダ内で下記のコマンドを実行すると、サイトフォルダ/public フォルダにHTMLなど必要なファイルがすべて生成されます。

hugo

「サイトの設定ファイル」で theme を設定していない場合は、hugo server と同じくテーマを指定しないとページが表示されません。

hugo -t hugo-zen

生成されたファイルは、サーバにFTPでアップロードしたり、WinSCPでミラーリングアップロードを行ったり、Github Pagesで公開したりと、自由に活用できます。

参考: すべてのオプション (hugo help の意訳)

hugo はメインのコマンドで、Hugo サイトを生成するのに使用します。

Hugo は速くフレキシブルな静的サイト生成ツールです。Go で spf13 とその友人によって愛をこめて開発されています。

完全なドキュメントは http://gohugo.io/ で利用可能です。

使い方:
  hugo [フラグ]
  hugo [コマンド]

利用可能なコマンド:
  benchmark   何回もサイト生成を行って Hugo のベンチマークを行います。
  config      サイト設定の出力を行います。
  convert     コンテンツを別の形式に変換します。
  env         Hugoのバージョンと環境情報を出力します。
  gen         いくつかの有用な生成ツールのコレクションです。
  help        コマンドについてのヘルプです。
  import      他からサイトをインポートします。
  list        さまざまなコンテンツの種類を一覧表示します。
  new         サイトのコンテンツを新しく作成します。
  server      高機能のWebサーバー
  undraft     コンテンツの draft ステータスを 'True' から 'False' に変更します。
  version     Hugo のバージョン番号を出力します。

フラグ:
  -b, --baseURL string             ホスト名 (とパス) をルートにします。例: http://spf13.com/
  -D, --buildDrafts                draft として設定されているコンテンツを含めます。
  -E, --buildExpired               期限切れのコンテンツを含めます。
  -F, --buildFuture                publishdate が未来の投稿を含めます。
      --cacheDir string            指定されたファイルシステムパスをキャッシュディレクトリにします。デフォルト: $TMPDIR/hugo_cache/
      --canonifyURLs               true の場合、すべての相対URLは baseURL を用いて正規化されます。
      --cleanDestinationDir        static ディレクトリに無いファイルを生成先フォルダから削除します。
      --config string              設定ファイル (デフォルトは path/config.yaml|json|toml)
  -c, --contentDir string          指定されたファイルシステムパスを content ディレクトリにします。
  -d, --destination string         指定されたファイルシステムパスをファイルの書き込み先にします。
      --disable404                 404 ページを表示しません。
      --disableKinds stringSlice   異なるページの種類を無効にします。(home, RSS 等)
      --disableRSS                 RSS ファイルを生成しません。
      --disableSitemap             サイトマップファイルを生成しません。
      --enableGitInfo              Git リビジョン、日付、作成者情報をページに追加します。
      --forceSyncStatic            静的ファイルが変更された時、すべてのファイルをコピーします。
  -h, --help                       hugoのヘルプ
      --i18n-warnings              翻訳されていない箇所を出力します。
      --ignoreCache                キャッシュディレクトリを無視します。
  -l, --layoutDir string           指定されたファイルシステムパスを layout ディレクトリにします。
      --log                        ログを有効化します。
      --logFile string             ログファイルパス (設定されている場合、自動的にログを有効にします)
      --noChmod                    ファイルのパーミッションを同期しません。
      --noTimes                    ファイルの更新日時を同期しません。
      --pluralizeListTitles        inflect を使用して、一覧のタイトルを複数形にします。(デフォルトは true です)
      --preserveTaxonomyNames      タクソノミー名を書いたとおりの状態にします。("Gérard Depardieu" vs "gerard-depardieu")
      --quiet                      静かなモードで生成します。
      --renderToMemory             メモリにレンダリングします。(ベンチマークテストにのみ便利です)
  -s, --source string              指定されたファイルシステムパスを相対パスからのファイルの読み込み元にします。
      --stepAnalysis               プログラムのステップごとにメモリ、タイミングを表示します。
  -t, --theme string               指定されたテーマを使用します。(/themes/テーマ名/ に配置)
      --uglyURLs                   true の場合、/filename/ の代わりに /filename.html を使用します。
  -v, --verbose                    冗長な出力
      --verboseLog                 冗長なログ
  -w, --watch                      変更のためファイルシステムを監視し、必要な場合再生成します。

追加のヘルプ:
  hugo check     いくつかの検証チェックを含みます。

コマンドの詳細を知るためには、"hugo [command] --help" を使用してください。

更新履歴

2017/05/26 下記を行いました。
- 「サイトの作成」の意訳、「参考：すべてのオプション (hugo help の意訳)」を追加しました。
- 「サイトの確認」「サイトの生成」のコマンドを短くしました。
- 全体の文章を調整しました。
2017/05/22 「サイトの設定ファイル」の config.toml の説明、「サイトの生成」の補足を追加しました。
2017/03/04 初版