232
236

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-01-17

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

参考:

しかし、プロジェクトページにアップロードすると、当然ながら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
232
236
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
232
236

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?