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

HUGOについて

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

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

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

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

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

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

インストール

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

Mac の場合

# install
$ brew install hugo

Go の場合

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

$ cd hugo

$ go get

使い方

# template
$ hugo new site my_site

$ cd my_site

# preview
$ hugo server

# build
$ hugo

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

テーマを使う

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

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

$ 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 にアップロードして、アクセスできるようにしてみたいと思います。

参考:

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

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

<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>

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

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

$ cd public

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

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できます。もちろん、空でなくてもいきなり追加してもよいですが、その場合は修正します。

gh-pages-push.sh

- git commit --allow-empty -m "noun"
+ git add A
+ git commit -m "test"
+ git push

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

$ git add A

$ git commit -m "update `date`"

$ git push

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

$ hugo

$ cd public

$ git add A

$ git commit -m "update `date`"

$ git push