Windows で Hugo を使う

ブログを GithubPages + 静的サイトジェネレータ Hugo に移行しました。Hugo を Windows で使うための手順と、つまづいたところを書き残します。

目次

インストール

今回は公式の方法でインストールします。
パッケージマネージャを使う方法もあるようです。

前置き

以下を前提として進めていきます。

  • コマンドプロンプトの開き方を知っていること
  • OS: Windows 64-bit
  • インストール先: C:\Hugo\bin

フォルダの作成

  1. エクスプローラを開く
  2. C:\Hugo フォルダを作る
  3. C:\Hugo\bin フォルダを作る

実行ファイルを手に入れる

  1. https://github.com/spf13/hugo/releases を開く
  2. Windows用のファイルを探す(現在のバージョンなら hugo_0.13_windows_amd64.zip
  3. ファイルを C:\Hugo\bin フォルダに保存する
  4. 保存したzipファイルを解凍
  5. exeファイルが出てくる(現在のバージョンなら hugo_0.13_windows_amd64.exe
  6. exeファイルの名前を hugo.exe に変更
  7. hugo.exe が C:\Hugo\bin に入っていることを確認(もし別のフォルダに入っていたら C:\Hugo\bin に移動する)

実行ファイルの動作確認

  1. コマンドプロンプトを開く
  2. C:\Hugo\bin\hugo help と入力してエンターキーを押す

A Fast and Flexible Static Site Generator built with love by spf13 and friends in Go.

Complete documentation is available at http://gohugo.io

こんな感じのメッセージが表示されたら成功、インストール完了です
うまくいかないときは hugo.exe へのパスを確認してください。

環境変数の設定

C:\Hugo\bin\hugo helphugo help のような形で実行できるよう、環境変数の設定C:\Hugo\bin へのパスを追加しておきます。
設定しない場合は hugo コマンドを打つときは頭に C:\Hugo\bin\ を付けるようにしてください。

作業用ディレクトリの作成

Hugoを動かすためのディレクトリを作ります。
場所はどこでも構いませんが、今回は C:\Hugo\Sites とします。
コマンドプロンプトを開いて以下を実行していきます。

ディレクトリに移動

cd C:\Hugo\

ディレクトリを生成

hugo new site Sites  

上記を実行すると、Hugoがディレクトリを生成します。
生成されたディレクトリの構成は以下のようになっています。中にはまだ何も入っていません。

Sites
├── archetypes/
├── content/
├── layouts/
├── lstatic/
├── config.toml

作業用ディレクトリに移動

cd Sites

今後の作業はすべてこのディレクトリで行っていきます。

テーマのインストール

コンテンツを表示するためのテーマ(HTMLテンプレート)をインストールします。
hugoThemes に一覧があります。

今回は Hugo Zen を使います。

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

上記を実行すると themes ディレクトリ内に hugo-zen テーマが入ります。
gitコマンドが使えない場合はファイルをダウンロードして themes ディレクトリに入れてください。

記事の作成

new でプレビュー用の記事を作成します。

hugo new about.md  

content/ ディレクトリ内に about.md が生成されました。
内容はこのようになっています。

+++
date = “2015-01-08T08:36:54-07:00”
draft = true
title = “about”

+++

”+++” の下にマークダウン形式で内容を書いて保存します。

+++
date = “2015-01-08T08:36:54-07:00”
draft = true
title = “about”

+++

## 見出し

内容

なお、

hugo new post/first.md

のようにすると content/post/ ディレクトリ内に first.md が生成されます。

サイト生成とプレビュー

hugo serverpublic/ ディレクトリにサイトを生成し、プレビューを表示します。

hugo server -t hugo-zen -D -w

-t テーマ名 // テーマ適用
-D // 下書きを表示
-w // ライブリロード

上記を実行すると http://localhost:1313/ でプレビューを見ることができます。

サイトの公開について

public/ ディレクトリに生成されたサイトをアップロードします。

WerckerでGitHub Pagesへ自動デプロイ

わたしは上記と同じように設定して urtt.github.io で公開しています。

つまづいたところと解決法

Unable to locate Config file. Perhaps you need to create a new site. とかなんとか

作業用ディレクトリの作成で設定した作業用ディレクトリに移動

hugo server でエラーが出る

テーマが壊れているかもしれないので、別のテーマを使用してみる

hugo server でページが真っ白

  • -t(テーマ適用) フラグをつける(または config.toml でテーマを指定しておく)
  • themes/ ディレクトリにテーマが入っているか確認
  • テーマ名を間違えていないか確認

作成したはずの記事が表示されない

-D (下書きを表示)フラグをつけてみる

Hugo server -D

staticフォルダに入れたファイルがstaticフォルダに出力されない

staticフォルダ自体は出力されない
static/css のようにしたければ、static/static/css とする

参考リンク