HugoとFirebase Hostingで作るデザイナーズブログ

このブログは Recruit Engineers Advent Calendar 2017 第22日目のブログポストである。

リクルートライフスタイルデザイナーズブログを立ち上げた。今回はその紹介と、どのような構成で、どのようなワークフローを設計したかを紹介したい。

はじまり

とあるUXデザイナーが「デザイナーも知見を発信できるようにブログを書きたい」と私に相談を持ちかけた。よくよく話を聞いてみると、メンバーが執筆し、ブログ編集者とマネージャがレビューを行い、広報がレビューを行った後に、記事をデプロイしたい、というようなワークフローでブログを運営したいということであった。また、予算はできるだけ抑え気味で、しかしHTTPSで配信したい。しかしメンバーはデザイナーのため、多少のことならできるが、できればほとんど人の手がかからない用にしたい、と。
なんとも課題が盛り沢山だが、やはり、課題が盛り沢山のほうが燃える。

選定

WYSIWYGもあることだし、Wordpressでも使っておけばいいんじゃないか、と思っていたが、更に深く話を聞くと、手順書があればそれの通りのことはできるし、開発者向けのツールを使うことも特に厭わないとのことだった。これは幸いと、Markdownで書けるHugoを提案した。また、例えば「AWSに置きたい!」などの強い要望も特に無いため、Firebase Hostingを用いて静的サイトをホスティングすることにした。

Hugoとは

Hugo とは、Go言語で書かれた静的サイト生成ツールである。他のツールと比べ生成速度が早いとされ、また、Mac用だけでなく、Windows用やLinux用のバイナリも用意されている。Markdownで記事を書くと、デザインテーマに従って静的ファイルが生成される。業務の合間にブログを書くようなので、1記事を仕上げるためにHTMLをつらつらと書きたくないだろう。
Hugoのデモをしてみせると、概ね好反応であった。また、テーマファイルは自分たちで作るという。さすがデザイナーだ。私はフロントエンドの開発は好まない。デザインを見たり考えたりするのは好きなのだが、どうしてもそれをコードに起こすのが苦手だ。コーディングができるデザイナーには頭が下がる。Markdownで記事を書いた後は hugo コマンドで静的ファイル群が生成される。 また、便利なのが、Hugo自体が自動リロード機能付きの、ローカル確認用のWebサーバになるという点だ。hugo server -D のようにHugoを起動しておくと、ファイルの追加、変更などのイベントをトリガにし、自動的に静的ファイルを再生成し、ブラウザリロードを自動で行う。

Firebase Hostingとは

Firebase Hostingとは、Firebaseの一製品であり、端的に言えば、無料プランでも独自ドメインが使え、証明書を自動で用意してくれる、HTTPSで静的サイトをホスティングしてくれるサービスだ。また、そのデプロイ方法がユニークで、 npm を用いて導入することができるFirebase用のCLIツールを導入することにより、静的ファイルを用意したら firebase deploy のコマンド一行で一連のデプロイ作業が完了される。

$ firebase deploy

=== Deploying to '(project-name)'...

i  deploying hosting
i  hosting: preparing public directory for upload...

i  Progress: [....................................................................................................]

✔  hosting: 29 files uploaded successfully

✔  Deploy complete!

Project Console: ***
Hosting URL: ***
Finished: SUCCESS

ところで、デプロイしたサイトにアクセスし、Response Headerを見てみよう。

accept-ranges:bytes
cache-control:max-age=3600
content-encoding:gzip
content-length:2009
content-type:text/html; charset=utf-8
date:Thu, 21 Dec 2017 19:27:45 GMT
etag:"3ec56b8022d38c7def4b0f174e84340c"
last-modified:Thu, 21 Dec 2017 12:52:50 GMT
server:nginx
status:200
strict-transport-security:max-age=31556926
vary:Accept-Encoding
via:1.1 varnish
x-cache:HIT
x-cache-hits:1
x-served-by:cache-hnd18723-HND
x-timer:S1513884465.030245,VS0,VE0

どうやらvarnishにキャッシュを積んでいるようだ。
そこで、おもむろに Fastly-Debug: 1 をRequest Headerに追加し、再度リクエストしてみると、

Server: nginx
Content-Type: text/html; charset=utf-8
Surrogate-Key: rlsdesignblog
Surrogate-Control: max-age=31556926
Cache-Control: max-age=3600
Strict-Transport-Security: max-age=31556926
ETag: "3ec56b8022d38c7def4b0f174e84340c"
Last-Modified: Thu, 21 Dec 2017 12:52:50 GMT
Content-Length: 6449
Accept-Ranges: bytes
Date: Thu, 21 Dec 2017 19:30:45 GMT
Via: 1.1 varnish
Connection: keep-alive
Fastly-Debug-Path: (D cache-hnd18750-HND 1513884645) (F cache-hnd18735-HND 1513884645)
Fastly-Debug-TTL: (M cache-hnd18750-HND - - 0) 
Fastly-Debug-Digest: c86760511b0e9b5b99c3b3c0df3eae9d996eaa3d3c973217653236aefe5b6ffe
X-Served-By: cache-hnd18750-HND
X-Cache: MISS
X-Cache-Hits: 0
X-Timer: S1513884645.077461,VS0,VE222
Vary: Accept-Encoding, Accept-Encoding

どうやらFirebase HostingのCDNは、不思議な事にFastlyのようだ。 Google Cloud PlatformにはCloud CDNというサービスが有るはずなのだが。

ワークフロー

典型的な、GitHubを用いた(今回はGitHub Enterpriseだが)CD環境である。Mergeをトリガにし、JenkinsでHugoを用いて静的ファイルの生成を行い、firebase deploy を行う。また、検品環境や開発環境はなく、各自ローカルでセットアップしたHugo環境でレイアウトの確認を行うようにした。運用していくうちに検品環境が必要になってくる可能性もあるが、現状はこれで運用している。

レビューフロー

レビューフローに至ってはもっと簡単だ。メンバーが書いた記事をマネージャがレビューし、広報がレビュー…まてよ、広報はGitHubを使えるのか?
と心配していたが、1時間のレクチャーを行ったら、積極的にレビューを行って頂けた。むしろ、マネージャがレビューしていないのに、広報からレビューが飛んできた。非常にありがたい限りである。もちろん、マネージャのレビュー後に再度レビューをしていただいたが、2回目だったからか、これまた早くレビューを行って頂けた。なお、レビューにはGitHubの Review 機能を用いている。一つ疑問があるのだが、 Issue and Pull Request templates が存在するのは知っているのだが、既定のReviewerを設定することはできないのだろうか。できるようになって欲しいものである。

細かくレビューをしていただく。アイコンがまだ設定されていないのが微笑ましい。

細かくレビューをしていただく。アイコンがまだ設定されていないのが微笑ましい。

デプロイフロー

さて、すべての準備が整った。これからデプロイである。HugoとFirebase Hostingを使っている限り、デプロイはとてつもなくシンプルである。スクリプトもたった二行しかない。

hugo
firebase deploy --token "(token)"

なお、 firebase deploy コマンドは、予めトークンを降り出しておくと、そのトークンを指定するだけで、 firebase login などを事前に行わずにデプロイすることが可能だ。とてもCD向きである。 とある事情があってやっつけJenkinsを使っているが、とりあえず動いている。なぜやっつけなのかも今後紹介できればと思っている。 デプロイの開始を当たり前のようにSlackで通知し、デプロイ完了も通知をし、確認してもらう。

微笑むJenkinsおじさん。いつもそうあってほしいものだ。

微笑むJenkinsおじさん。いつもそうあってほしいものだ。

まとめ

HugoとFirebase Hostingを用いた、非エンジニアが運用を行うブログを構築した。これを応用すると、簡単なウェブサイトは一通り作成することができ、ほぼ無料で運用することが可能である。素晴らしい組み合わせだと思うので、自分のドメイン名でブログを立ち上げたい、なにかのランディングページを作成したい、という方はぜひやってみてほしい。