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

序:サイト立ち上げの道具としてのHugo

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

第一回は,インストールからサイトの初期作成まで(以下,テーマhugo-future-imperfectを適用した直後のHugoサイト画面)。

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

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

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

Hugoの初期導入

[1]インストール作業(Windows wih bash編)

Go製のHugoは,バイナリインストールが基本となる。
公式にOS別のインストール方法ページができている

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

1-1 インストール先フォルダの用意

インストールページに従い,インストール先はc:\Hugo\binとする。

mkdir -p c:\Hugo\bin

1-2 バイナリの入手

リリースページ下部のDownloadsから自分の環境にあったファイルをダウンロード。自分の場合は"hugo_0.15_windows_amd64.zip"

1-3 作業フォルダへのバイナリの移動とリネーム

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

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の活用方法