[2016年春版]　静的サイトジェネレーターHugo導入Tips　①インストールとサイトの初期作成

#  序:サイト立ち上げの道具としてのHugo
Qiitaを使いはじめたばかりの1年ちょい前,イベント系サイト立ち上げの必要があって,Hugoを使ってみたので[作業記録(＋なぜHugoかetc.)](http://qiita.com/kmry2045/items/01f68550880dcc6d01fe)を残しておいた。この1年で,Hugoはだいぶこなれてきて,普段使いできるものとなっているもよう。
今回,割合と息の長いサイトを立ち上げることになったので,前の記録を復習しつつ,Hugoを"使い続ける"ためのメモ書きを記録しすることとした。

第一回は,インストールからサイトの初期作成まで(以下,テーマhugo-future-imperfectを適用した直後のHugoサイト画面)。
![hogoテストページ.PNG](https://qiita-image-store.s3.amazonaws.com/0/16455/1fc6e5e2-20a6-cc8b-b56d-62a9593cb92e.png)


*※　前回はlinux機で作業だったが,今回はwindows10での作業とする - ただ,お試しで[Bash on Windows 10を使い始めてみた](http://qiita.com/kmry2045/items/15697e734b32da2c8b51)ばかりなので,適宜シェルで作業を進める。面倒そうなInsider Previewとかに参加したくない人は,[こちら](http://qiita.com/kmry2045/items/b160c94b8cd8972261ce)を参考に,Cygwin(babun)を導入したりしておくとシェルでの作業がはかどる。*

## 参考　"何故Hugoを選んだのか"についてのリンク集

- [動的CMSとの比較でhugoを選んだ（会社サイト自体をHugoで構築）]
(http://esolia.pro/ja/why-did-esolia-choose-hugo/)
- [Jekyllに見切りをつけてhugoを選んだ(+インストール方法等)](http://tbd.kaitoy.xyz/2015/08/28/using-hugo/)

# Hugoの初期導入

## [1]インストール作業(Windows wih bash編)
Go製のHugoは,バイナリインストールが基本となる。
公式に[OS別のインストール方法ページ](https://gohugo.io/overview/installing/)ができている

*※　以下にwindowsへのインストール例あり(2015年5月時点)。シェルコマンドを使わない人はこちらに従った方が導入がスムーズに行くはず:
http://ureta.net/2015/05/hugo-on-windows/*

### 1-1 インストール先フォルダの用意
インストールページに従い,インストール先はc:\Hugo\binとする。
>mkdir -p c:\Hugo\bin

### 1-2 バイナリの入手
[リリースページ](https://github.com/spf13/hugo/releases)下部のDownloadsから自分の環境にあったファイルをダウンロード。自分の場合は"hugo_0.15_windows_amd64.zip"

### 1-3 作業フォルダへのバイナリの移動とリネーム
圧縮ファイルの中身からexeを取り出し,インストール先フォルダc:\Hugo\binに移動しhugo.exeにリネームする。

```sh
c:\Hugo\bin>mv hugo_0.15_windows_amd64.exe hugo.exe
c:\Hugo\bin>ls
hugo.exe
```

### 1-4 作業フォルダにPATHを切る
シェルでの設定方法がよくわからないので :
Cortataに"環境変数"と入力 => PATHに,c:\Hugo\binを追加する。

※　コマンドラインはここでいったん再起動

## [2]ローカル作業フォルダにてサイトを作成
### 2-1 作業フォルダsitesを作成しサイトを初期生成(new site)

```
C:\Users\geeks>cd c:\Hugo
c:\Hugo>mkdir sites
c:\Hugo>hugo new site sites

c:\Hugo>tree
フォルダー パスの一覧:  ボリューム Windows7_OS
ボリューム シリアル番号は 00000285 AA06:BFF6 です
C:.
├─bin
└─sites
    ├─archetypes
    ├─content
    ├─data
    ├─layouts
    └─static
```

 => sites以下のサイトが初期生成されている。

### 2-2 ページの作成

hugo newを用いる。
記事は,基本的にMarkdown形式で記述していく（以下はちょっと間違い気味の作業記録）。

```
c:\Hugo\sites>hugo new aboud.md
c:\Hugo\sites\content\aboud.md created

c:\Hugo\sites>cd content
c:\Hugo\sites\content>ls
aboud.md

c:\Hugo\sites\content>mv aboud.md about.md

c:\Hugo\sites\content>nano about.md
```

※bash on windowsはubuntuベースとのことで,ちょっとしたテキスト編集にnanoが使える(...が,現時点では日本語はうまく編集できなかった)。

```about.md
+++
date = "2016-04-11T13:02:12+09:00"
draft = true
title = "AboutUs"

+++

# 私達について　
Apple信者などの集まり。林檎は健康果実！
このサイトでは平日Macをいじくってコード書いてる輩が,週末に行うリンゴ圃場での作業記録を淡々と記します。
```

### 2-3 サイトのテーマのダウンロードと適用(任意)
Hugoの魅力の一つが,多くのコミッターより追加されているサイトのテーマの充実。今回はhugo-future-imperfectを試させてもらう。

ダウンロードしたテーマはsites/themes以下に配置する（以下はちょっと間違い気味の作業記録）。

```
c:\Hugo\sites>git clone https://github.com/jpescador/hugo-future-imperfect
c:\Hugo\sites>mkdir themes
c:\Hugo\sites>mv hugo-future-imperfect themes
```

hugo-future-imperfectのreadmeを読み,必要な初期設定を行う(本テーマの場合,まずは,themes\hugo-future-imperfect\exampleSite以下をsites直下にコピーとのこと。)。

その上で,config.tomlを編集していく。

```
baseurl = "http://hugo.spf13.com/"
languageCode = "JP"
title = "Ringo Star Imperfect"
theme = "hugo-future-imperfect"
preserveTaxonomyNames = true
paginate = 3
disqusShortname = "shortname"
googleAnalytics = ""

[params]
    # Sets the meta tag description, usually reserved for the main page
    description          = "元テーマはHTML5 UP theme. Powered by Hugo"
    # This will appear on the top left of the navigation bar
    navbarTitle          = "林檎は健康果実。"
    # Social media buttons that appear on the sidebar
    socialAppearAtTop    = true
    socialAppearAtBottom = true
    # set this to the section name if section is not post
    viewMorePostLink     = "/blog/"

（以下,略）
```

その上で,試験的に入っているsites\content\blogを編集していく。hugo-future-imperfectを活用すると,そこそこちゃんとしたデザインで即座にブログが始められる模様。

### 2-4 サイトのプレビュー。
hugo server  を用いる。-tオプションでテーマを指定。

> c:\Hugo\sites>hugo server -t hugo-future-imperfect -D -w

実行画面は冒頭に掲げた通り。


# 今後の作業

- githubpageへのデプロイフローの確立。
- サイトメンテナンスの分業体制のあり方の検討
- JSの活用方法