HUGOを使ってサイトを立ち上げる方法


##HUGOについて

サイトジェネレーターの`HUGO`を使ってみたので、紹介します。一応、テンプレートをダウンロードしてきて、設定をビルドし、HTMLをサーバーにアップロード。ブラウザから WAN 経由でアクセスするところまでをやります。

[HUGO](http://gohugo.io/)の特徴としては、一つに、とてもシンプルだということ。具体的には、各々の動作が独立しており、サイトジェネレーターとしての本来的な役割を果たします。これは、`golang`で書かれたツールの特徴的なものだという印象を受けますね。

golang で書かれたツールというのは、基本的に、必要最小限のシンプルなことを実行するだけ、ということが多く、余計な機能など付いていないという印象を私は持っています。

今回紹介する HUGO も基本的には同じで、例えば、同系統のツールである`Octopress`や`Middleman`は、デプロイから何からやるまでのコマンドが用意されていますが、 HUGO は、　設定をビルドして、 CSS, HTML を吐き出すだけという感じです。

したがって、サーバーとの連携は自分で alias なり、 script を叩く、若しくは、 HUGO にコマンドを追加する必要が出てくる感じです。

HUGO のお勧めなところは、他の golang 製のツールと同じように、非常に高速であること。 Octopress のビルドの遅さ (Ruby) にイライラすることは多いのですが、 HUGO に関しては、その心配は、最小限に抑えられるでしょう。

##インストール

Mac の場合のインストール方法です。他も Readme に書いてある感じです。

####Mac の場合
```shell:
# install
$ brew install hugo
```

####Go の場合

```shell:
$ git clone https://github.com/spf13/hugo

$ cd hugo

$ go get
```


##使い方

```shell:
# template
$ hugo new site my_site

$ cd my_site

# preview
$ hugo server

# build
$ hugo
```

ビルドすると、`public`フォルダに置かれます。これを Web サーバーにアップロードすると、サイトページがみれます。

##テーマを使う

```shell:
# all download
$ git clone --recursive https://github.com/spf13/hugoThemes.git themes
```

私の場合は、以下のテーマを個別にダウンロードしました。
`my_site`配下で以下のコマンドを行います。

```shell:
$ cd theme

$ git clone https://github.com/roperzh/tinyce-hugo-theme

$ cd ../

$ cat << EOF > config.yaml
---
contentdir: "content"
layoutdir: "layouts"
publishdir: "public"
indexes:
  category: "categories"
baseurl: "http://syui.github.io/hugo-air"
title: "Hugo Blog Template for GitHub Pages"

# https://github.com/spf13/hugo/issues/230
#subdomain: "hugo-air"
#permalinks:
# post: "subdomain/:year/:month/:title/"
EOF

$ mkdir -p theme

$ cp -r layout/{_default,partials} theme/

$ mkdir -p content/posts

$ cat << EOF > !$/newest.md
---
title: "Just another sample post"
date: "2014-03-29"
description: "This should be a more useful description"
categories: 
    - "hugo"
    - "fun"
    - "test"
---
EOF

$ hugo server
```

##GitHub Pages

上のテーマを GitHub pages にアップロードして、アクセスできるようにしてみたいと思います。

参考:

http://gohugo.io/tutorials/github-pages-blogl/

しかし、プロジェクトページにアップロードすると、当然ながらURLが複雑になりますが、どうやらその問題は個別に対応するしかないようです。複雑になるというのは、例えば、`http://tummychow.github.io/myreponame`のような感じになります。

https://github.com/spf13/hugo/issues/230


私の場合は、調べてる時間もなかったので、直書きで対応しました。`http://syui.github.io`の部分がそうですね。例えば、baseurlにホームのURL, subdomainにリポジトリ名を設定しておいて、`{{ .SiteUrl }}{{ .SubDomain }}`みたいな感じでもいけるかもしれませんけど。

```html:
<div class="post-content">
  <h1 class="post-title">
    <a href="http://syui.github.io{{ .RelPermalink }}">{{ .Title }}</a>
  </h1>

  <span class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</span>

  <p>{{ .Description }}</p>
</div>
```

後は、デプロイ処理の処理ですが、これはコマンドが用意されてないみたいなので、自分で実行します。

まず、ビルドしてできたディレクトリに移動します。

```shell:
$ cd public
```

リポジトリの作成と必要なブランチの作成です。以下の書き方だと、ディレクトリ名がリポジトリ名になる感じです。なんか、GitHub API使ってる感じっぽいですが、パスワードとか聞かれるかもです。



```shell:gh-pages-push.sh
#!/bin/bash
echo -n username:
read userr
repo=`echo $PWD:t`
repo_j={\"name\":\"$repo\"}
url="https://github.com/"$userr/$repo.git

curl -u $userr https://api.github.com/user/repos -d $repo_j

rm -rf .git

git init

echo $url

git remote add origin $url

git commit --allow-empty -m "noun"

git push -u origin master

git checkout -b gh-pages

git commit --allow-empty -m "noun"

git push -u origin gh-pages
```

ユーザー名がパソコンと同じ場合、`$USER`で良いですので、`read userr`を置き換えてもいいです。`user=$USER`

これで、`gh-pages`に空pushできます。もちろん、空でなくてもいきなり追加してもよいですが、その場合は修正します。

```shell:gh-pages-push.sh
- git commit --allow-empty -m "noun"
+ git add A
+ git commit -m "test"
+ git push
```

最後に、pushして、pagesにアップロードします。

```shell:
$ git add A

$ git commit -m "update `date`"

$ git push
```

また、ビルドとアップロードを同時に行うスクリプトとか用意しておくと便利です。更新毎に以下のようなコマンドを走らせることになるからです。

```shell:
$ hugo

$ cd public

$ git add A

$ git commit -m "update `date`"

$ git push
```