Navigation :

Hugo使い方

Hugoは静的Webページ変換ツールの1つ. 他にもJekyllやHexoなどが有名.
基本的にはMarkdownで記事を書き, Hugoを起動して変換してもらって所定の静的なWebページを作る. スタイルなどを調整してやればBlogみたいなWebページもできる.

Blogとwikiについて

ブログはHugoを用いてGitHub Pages上で公開している. BlogはAlice in the Machine - Blogにある.
wikiも同様にしてGitHub Pages上で公開している. wikiはAlice in the Machine - wikiにある.

Hugoインストール

Install Hugoを参考にすれば良い. Ubuntuのバイナリインストールでいいなら

snap install hugo

で完了.

Hugo初期設定

既にレポジトリがある場合やる必要はないが, 新たにWebページを作成するなら必要.

Hugo new site hoge

で hoge ディレクトリに新たなHugoのワークスペースができる. あとは hoge ディレクトリに移動して以下をやっておく.

git init .
git remote add origin https://github.com/<user-name>/hoge.git
git add *
git commit -m "Init Hugo."
git push -u origin master

こうすれば後は普通に記事制作するだけで済む.

テーマ

Hugoは自分の思うテーマを選んでやらないと, 思ったようなWebページはできない. テーマは Hugo Themes|CompleteList に一覧になっている. 導入したいテーマが見つかったら

git submodule add https://github.com/hoge/poyo.git themes/piyo

で導入する. あとはそのテーマに合わせてフロントマターや config.toml を編集する.
config.toml でテーマを設定するには

theme = "piyo"

とするだけでよい. 他にもテーマ依存の設定などもしていく.

config.toml

サイトについての情報などは基本的に config.toml で設定する.
例えば以下のようにする.

baseURL = "hoge"
languageCode = "ja-JP"
title = "poyo"
theme = "piyo"
publishDir = "docs"
disqusShortname = "foo"
copyright = "Copyleft; 2017-2017, BrownieAlice. All rights reversed."

GitHub Pages

Github Pagesを用いてWebサイトを公開するなら少し設定を変更する必要がある.

GiuHub側

リポジトリのページを開いて Settings -> GutHub Pages -> Source -> master branch /docs folder と設定して保存する.
するとmasterブランチの docs フォルダ以下がWebページだとみなしてWebサイトにしてくれる.

Hugo側

config.toml を少しいじる.

publishDir = "docs"

こうすると docs フォルダ以下にHTMLなどが生成されるようになる.

環境構築

Blog

すでに中身はgit上で公開しているので

cd ~/Document
git clone https://github.com/BrownieAlice/blog.git
cd blog
git submodule update --init

でよい. あとは ~/Document/blog 上で作業する.

wiki

Blogと同様.

cd ~/Document
git clone https://github.com/BrownieAlice/wiki.git
cd wiki
git submodule update --init

で, あとは ~/Document/wiki 上で作業する.

記事の制作

以下が一連の動作.

hugo new post/hoge.md
hugo server -D -w
hugo undraft content/post/hoge.md
hugo
git add *
git commit -m "new post hoge"
git push origin master

hugo server でローカルにサーバーを立ち上げてブラウザ上で確認できるようになる. Blogなら http://localhost:1313/blog がそのリンク先.
そして下書き記事を正式な記事にしてコンパイルし変更をコミットする.

カテゴリー

カテゴリとしてpoとpopoを追加する場合, 記事のフロントマターを以下のように設定する.

---
title: "hoge"
date: piyo
categories :
 - "po"
 - "popo"
---