静的サイトジェネレーターHugo導入Tips。　②html化とデプロイ(firebase無償ホスティングを中心に)

静的サイトジェネレーターHugo導入Tipsシリーズ　その2。
作業環境は[前回](http://qiita.com/kmry2045/items/ea860ebfb1214aacaf43)と同様にwindows10 (with bash)。個人的な興味から,firebaseの無償ホスティングを中心に記す。
*※　bashを使っているため,以下はmacでもlinuxでも同様の操作となる。*

#[1] html化 
Hugoを単体で使う場合,<b>markdown形式の下書き</b>にテーマを適用しローカルPCにhtml出力することがゴールになる。出力されたhtmlの扱い方は,サイトの運営方針によって定める。複数人でサイトを管理する場合,第一義的に管理対象となるコンテンツは<b>markdown形式の下書き(以下,元コンテンツ)</b>となる。


## コマンド実行例
hugoコマンドのみ。-tオプションで適用テーマを指定する。ディフォルトの出力先は/public(初回のコマンド実行時にフォルダは自動作成される)。出力先を指定する時は-dオプションを用いる。

```
c:\Hugo\sites>hugo -t hugo-future-imperfect
0 of 3 drafts rendered
0 future content
5 pages created
7 paginator pages created
3 categories created
0 tags created
in 173 ms　※1秒以内にhtmlが出力されている。

c:\Hugo\sites>cd public

c:\Hugo\sites\public>ls -l　※テーマ適用後のhtml一覧。
total 100
----rwx---+ 1 geeks geeks 10375 Apr 11 15:23 404.html
d---rwx---+ 1 geeks geeks     0 Apr 11 15:23 about
d---rwx---+ 1 geeks geeks     0 Apr 11 15:23 blog
d---rwx---+ 1 geeks geeks     0 Apr 11 15:23 categories
d---rwx---+ 1 geeks geeks     0 Apr 11 12:52 css
d---rwx---+ 1 geeks geeks     0 Apr 11 12:52 fonts
d---rwx---+ 1 geeks geeks     0 Apr 11 12:52 img
----rwx---+ 1 geeks geeks 16710 Apr 11 15:23 index.html
----rwx---+ 1 geeks geeks 33525 Apr 11 15:23 index.xml
d---rwx---+ 1 geeks geeks     0 Apr 11 12:52 js
d---rwx---+ 1 geeks geeks     0 Apr 11 15:23 page
----rwx---+ 1 geeks geeks   896 Apr 11 15:23 sitemap.xml
```

#[2] コンテンツ管理とデプロイ

## 2-1 コンテンツ管理　

管理方法は,プログラマ主体の場合にはgitで,デザイナーも参加する場合には,dropboxを用いて管理と言った風に定めていく。要するに,テキストファイルの管理なので, 普段通り管理すれば良いのだが。
HTML周りは,デザイナーの方との共同作業が多いだろうから,dropboxでの管理はひとまず無難と思われる。

## 2-2 デプロイ

### ① 簡易な公開 : githubページを活用

gitコマンドで静的にサイトをアップし,githubページでプレビューというフロー。githubページの作り方は,他のツールを使った場合と同様(Organizationを設定し,Organization名でxxxx.github.ioというページを作る[xxxxはサイト名])。

コミット作業は,sites\publicフォルダで行う。
今回は,
Organization名 : ringostarin
ページ : site1
の場合 :

```bash
c:\Hugo\sites\public>git init
Initialized empty Git repository in /cygdrive/c/Hugo/sites/public/.git/
c:\Hugo\sites\public>git add -A
c:\Hugo\sites\public>git commit -m "staring'1"
c:\Hugo\sites\public>git remote add origin https://github.com/ringostarin/site1.git

c:\Hugo\sites\public>git push -u origin master
Username for 'https://github.com':　（以下略）
```
と言った風の作業で,githubへとpublicフォルダの中身がpushされる。
その上で,githubpages専用のブランチgh-pagesを用意すると,数分後にgithubpagesに公開される。
... なぜかCSSが適用されていない。が,今回はgithubpagesの活用予定はないので,木にしないことにする。

※　Hugoサイトのgithubpagesへの公開は,以下に簡潔にまとめてくれている。
http://blog.shotarok.com/post/2015-12-15_my-first-post/

### ② MBaaSへの公開 : firebase(個人的おすすめ)
モバイル/IoT向けのリアルタイム性の高いデータベースサービスを提供するFirebase(Google傘下)は,無償ホスティングサービスも提供している。現状は簡易なホスティングサービスだけと思われるが,昨年秋に静的Webホスティングとして有名うなDivshotを吸収しており,今後のホスティングサービスの拡充が期待できる。
参考　http://toka-xel.hatenablog.com/entry/2015/10/14/112149

以下に,Firebase無償ホスティングへの作業記録を載せる。

#### 1) nodejsベースのコマンドラインツール導入

- (非nodejsユーザー向け作業)　node/npm環境を最新にする。すなわち,nodejsの最新版をダウンロードし,npmも最新に。windowsの場合,以下に従うのが吉:[windows環境でnpmアップデート](http://qiita.com/alalwww/items/8da8edb068682ee501e9)
- npmmで,firebase-toolsツールを導入(インストール後,コマンドラインはいったん再起動)

> npm install -g firebase-tools

#### 2) Firebaseにサインアップし,firebaseツールを用いる。

- [firebaseサイト](https://www.firebase.com/)で,firebase loginでSIGN Upする(Googleアカウントでのサインアップを推奨)。
- firebaseツールとアカウントを紐付ける。 以下のコマンドを入れた後,指示に従うことで,firebaseツールとアカウントが紐付けられる。

> firebase login

#### 3) HTMLコンテンツのアップロード
 
- firebase Appをサイトで作成(無償版では一つのみ)。付与されるIDをメモ（今回は:scorching-inferno-3735.firebaseapp.com） 
- hugoのsitesフォルダに移動し firebase init/deployによりpublicフォルダの内容をデプロイする　*＃firebaseコマンドはディフォルトでは直下のpublicフォルダを扱う。*
 
```
 >firebase init -f scorching-inferno-3735
 >firebase deploy

=== Deploying to 'scorching-inferno-3735'...

i  deploying hosting
i  preparing public directory for upload...
+  77 files uploaded successfully

+  Deploy complete!

``` 
※デプロイ結果は以下に公開している（サイトの中身はまだほとんど作ってない）。　#なお,独自ドメインはfirebase有償版で使用できる(有償版は月5ドル～)。
https://scorching-inferno-3735.firebaseapp.com/

MS Edgeでの表示画面:

![deploy.PNG](https://qiita-image-store.s3.amazonaws.com/0/16455/c8800171-0cc7-607f-921c-c77636544827.png)

firebaseは,JSから簡単にアクセスできるバックエンドのデータベースも提供している(むしろデータベース提供が本業)。そのため,Firebaseホスティングを前提の場合,Hugoベースのwebアプリを作ることも容易と思われる。ちょっと良いかも(近いうちにアプリ化を試してみたい。)

#付記
## hugoのコマンド一覧
https://gohugo.io/commands/
## hugoサイトの多言語化について
https://gohugo.io/tutorials/create-a-multilingual-site/
## firebase関係の記事(2016年のもの)
http://gihyo.jp/dev/serial/01/firebase
https://thinkit.co.jp/article/9451