Hugo + Firebase Hosting でブログ(静的サイト)を構築してみた

# Dec 19, 2019

はじめに

HugoとFirebase Hostingを使って静的サイトを構築した手順をまとめました。
実際にこのブログも同じ手順で構築しています。

アウトプットをする場所をちゃんと作ろうと思い立ち色々検討した結果、
私がやったことない方法でかつあまり手間がかからなそうだったのでこの方法を選択しました。
選定基準を列挙するとこんな感じです。

今まで自分がやったことない方法
手間かからない
お金かからない(できるだけ安く)
markdown使える
構成が簡単(CMS使いたくない)
ある程度自由に遊べる(雰囲気や気分の話)

ちなみにホスティングサービスとしてはNetlifyも実際使って検討しましたが、自分にはFirebase Hostingのほうが合っているという結論になりました。

そのあたりも最後に軽く触れます。

書かれていること

Hugoのインストール、使い方
Firebase Hostingの使い方
はまったところ

書かないこと

ドメインの設定方法
- こちらも簡単に設定できるので細かい設定はお使いのレジストラと合わせて検索すると詳細な手順が出てくると思います。
- ちなみにSSL証明書のプロビジョニングも自動でやってくれます。すごい。。

前提

macOS Mojave
git,github,homebrew,npmが使える

Hugoでblogサイトを作る

基本的に公式サイトが丁寧でわかりやすいです(身も蓋もない。。)。
一番時間かかるのはサイトテーマを選ぶところ。

https://gohugo.io/getting-started/quick-start/

※バージョンによって手順が更新される可能性が高いため、
正確には以下公式情報を参照するようにしてください。
あくまでここでは私が行った手順を公開します。

1. hugoのインストール

$ brew install hugo

# 確認
$ hugo version

2. サイトを作る

strange-caseというテーマを使用しました。
一番時間かかるのはサイトテーマを選ぶところ(2回目)。

$ hugo new site [your-site-name]

$ cd $_

$ git init

# ここらへんで適当にgithubにレポジトリ作って登録

$ git submodule add https://github.com/ExchangeRate-API/strange-case.git themes/strange-case
$ echo 'theme = "strange-case"' >> config.toml

3. 記事を作って確認する

# コンテンツを作成
$ hugo new posts/hello-world.md

# ローカルで確認
$ hugo server -D

newしてできたファイルはmarkdownで適当に。

ここまでやってブラウザで実際にサイトが見えればOK。
見栄えなどは各テーマのマニュアルを参考に調整する必要があります。

Firebase Hostingでサイトを公開する

こちらも公式サイトが丁寧でわかりやすいです。

https://firebase.google.com/docs/hosting/quickstart

以下私が行った手順です。

1. Firebase CLIのインストール

$ npm install -g firebase-tools

2. loginをする

Firebaseのアカウントでloginをします。

$ firebase login
# 確認
$ firebase --version

3. firebase プロジェクトを作る

プロジェクトはfirebaseのコンソールから作りました。画面ポチポチだけなので詳細省略。

以下localで作っておいたHugoのblogサイトと連携していきます。

プロジェクトの初期化

$ firebase init

すると以下色々質問されます。

作成projectはhostingを選択し、以降の質問は以下を選択しました。

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: [your-project]
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No

4. FirebaseにHugoで作ったサイトをデプロイする

ここまででサイトを公開する準備ができました。
ということで公開するのですが、以下を実行するだけです。

$ hugo && firebase deploy

5. サイトが公開されていることを確認する

ブラウザでfirebaseの管理画面に入るとドメインが表示されているので、そのリンクをクリックするとサイトが表示されました。
最初はちょっと時間かかるかも。
それでもかんたんすごい。

ハマったところ

やっていく中でハマったところを簡単に。

Hugoで選択したテーマで日付の書式などがハードコーディングされていて設定が効かなかった
- 今後改造するか(それ自体は手間ではない)、別のテーマを選ぼうかなーと
Hugoで作成した記事が公開すると表示されない
- 記事ごとにあるdraftパラメータをfalseにしないといけないです。
- マニュアルにちゃんと書いてあります（よく読め的な。。）。

でも結局一番時間かかったのはサイトテーマ選びでした(3回目)。

さいごに

こんな感じで、というか、思ったよりも簡単に静的サイトの構築、公開ができました。 Netlifyも手軽でおすすめです。
最初からgithubと連携できるので、git pushしたらデプロイしてくれます。ただ、私にはもうちょっと色々自分のほうでガチャガチャできる方が好みだということで
今回はFirebase Hostingを設定しました。

次の展望としてはCircle CIと合わせてデプロイ自動化したりして遊んでみる予定です。

以上、最後まで読んでいただきありがとうございました。ではでは。

hiy0ki blog