Hugo30分クッキング

2017.02.08

なにこれ

30分でHugoを使って執筆活動が出来るようになります

Hugoとは

Go言語で書かれたナウでヤングな静的サイトジェネレーター

前提

  • LinuxもしくはMacOS
  • Hugo Static Site Generator v0.19-DEV
  • Golangがインストールされている
  • メモ時点では1.6.2でも1.7でも動いたのでバージョンはあまり気にしなくていいかも
  • 個人的な好みで$GOPATHはこういう環境変数にしてる
export GOPATH=$HOME/go/third-party:$HOME/go/my-project
export PATH=$PATH:$HOME/go/third-party/bin:$HOME/go/my-project/bin

Hugoインストール

ちょっと古くなった日本人の解説記事とかが腐ってたので公式ドキュメント読むのが良いと思う
Hugo – Installing Hugo
個人的にオススメの導入方法は最下部のgo getを使ったやつ

ハロワ

  • とりあえずデプロイ
  • hugo newコマンドを使う
  • 想定として/var/www/hogehoge.com/publicが公開ディレクトリになる
$ hugo new site /var/www/hogehoge.com

一行目にCongratulations! Your new Hugo site is created~~~と出たら成功。失敗する時は/var/www/hogehoge.comにゴミが残ってるかもしれない

以降のコマンドは/var/www/hogehoge.com以下で打つ

index.htmlを作る

静的サイトジェネレーターはデプロイ段階でBladeとかjspのようなテンプレートエンジンとして振る舞うので、このあたりはお約束の流れになる

$ vim layouts/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Hello, Work!</title>
</head>
<body>
  働け
</body>
</html>

$ hugo

index.htmlを書いてhugoを打つと配下にpublicフォルダが生成される
hugo serverだとサーバーが立つのでローカルホストでプレビューすることができる

public/以下にデプロイされることがわかったのでindex.htmlを書き換えて記事のフィードを作る

記事を書く

$ hugo new post/hello-work.md

これでcontent/post/hello-work.md以下にmdのテンプレートファイルが出来る

+++
date = "2017-02-08T11:21:40+09:00"
title = "hello work"
draft = true

+++

draft = trueだと下書き判定されてビルド対象から外れるので、該当行を削除して最下段に本文を追記する

+++
date = "2017-02-08T11:21:40+09:00"
title = "hello work"
+++
ここが本文として判定されます

contentの属性についてはここ

フィードを作る

$ mkdir layouts/_default
$ vim layouts/_default/list.html
$ vim layouts/_default/single.html
$ vim layouts/index.html

layouts/ディレクトリ以下には対応したテンプレートを記述する
themeフォルダの内容を上書きする形になるのでテーマを使う時は一旦layout以下を空にすること

<li>
  <a href="{{ .Permalink }}">
    <span>{{ .Date.Format "Feb 08, 2017" }}</span>{{ .Title }}
  </a>
</li>

<article>
    {{ .Content }}
</article>

<body>
 {{ range (.Paginator 10).Pages }}
   {{ .Render "list" }}
 {{ end }}
</body>

最後にリンクが効くようconfigを書き換える

$ vim config.toml

baseURL = "http://hogehoge.com/"

ここまで終わったら改めてhugoを打ってビルドする
階層はこういう風になる

├── layouts
│   ├── _default
│   │   ├── list.html
│   │   └── single.html
│   └── index.html
├── public
│   ├── index.html
│   ├── index.xml
│   ├── page
│   │   └── 1
│   │       └── index.html
│   ├── post
│   │   ├── hello-work
│   │   │   └── index.html
│   │   ├── index.html
│   │   └── index.xml
│   └── sitemap.xml

フルスクラッチでデザインをする場合はこのままlayoutsフォルダのままテンプレートをいじって整形するだけ
完成済みのテーマを使う場合はlayoutsフォルダが優先的に読まれる（オーバーライドされるように振る舞う）のでハマらないようにしましょう