Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

HUGOについて

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

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

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

今回紹介する HUGO も基本的には同じで、例えば、同系統のツールであるOctopressMiddlemanは、デプロイから何からやるまでのコマンドが用意されていますが、 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 にアップロードして、アクセスできるようにしてみたいと思います。

参考:

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 }}みたいな感じでもいけるかもしれませんけど。

<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
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away