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

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

[1] html化

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

コマンド実行例

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
の場合 :

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アップデート
• npmmで,firebase-toolsツールを導入(インストール後,コマンドラインはいったん再起動)

npm install -g firebase-tools

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

• firebaseサイトで,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での表示画面:

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

付記

hugoのコマンド一覧

hugoサイトの多言語化について

firebase関係の記事(2016年のもの)

http://gihyo.jp/dev/serial/01/firebase
https://thinkit.co.jp/article/9451