この記事で登場するサービス・技術

はじめに

今まで色々ブログを作って、更新わすれたり、誤って消したりする度に、新しい方法で再公開してきたのですが、今回Firebase + hugo + gitlabが個人的に神ってたので、書き残します。

ちなみに今までのブログ

  • Wordpress on Sakura VPS
  • はてなブログ
  • Wordpress with staticpress on Mac + S3
  • docker-compose + conoha

色々あるのに、記事は毎回ロストしてる。 そろそろデータを永続的に残さないと…

手順

さて、ここから本題の手順

前提

既にHugoが存在している事を前提としています。

├── archetypes
│   └── default.md
├── config.toml
├── content
│   └── post
├── public
│   ├── categories
│   ├── css
│   ├── fonts
│   ├── images
│   ├── index.html
│   ├── index.xml
│   ├── js
│   ├── post
│   ├── scss
│   ├── sitemap.xml
│   └── tags
├── static
│   └── images
└── themes
    ├── hugo-uno
    └── theme-hugo-foundation6

ディレクトリ構成はこのような感じです。

Firebaseの登録

それではまずFirebaseを使うために、セットアップをします。

1. Firebaseでプロジェクトを追加

プロジェクト作成

2. Hostingを使う

Hostingを使う

Deployしてみる

Firebase公式手順 を参考に、Hugoのカレントディレクトリでデプロイしてみます。

$ npm install -g firebase-tools
$ firebase login
$ firebase init

firebase.json ファイルを準備

{
  "hosting": {
    "public": "public"
  }
}

そして、ビルドアンドデプロイ

# Hugoを静的ファイルとして書き出す
$ hugo
# デプロイだー
$ firebase deploy

https://console.firebase.google.com/u/0/project/<<PROJECT ID>>/hosting/main

Firebaseのコンソールをみてみる

これで手動でデプロイする準備はできました。 あとは、Gitlab CIからデプロイするだけ

Gitlab CIからDeployしてみる

Gitlabだけではなく、CIツールからDeployする為には、firebaseAPIを実行する為のTokenを取得する必要があります。 Tokenの取得は以下の手順で出来ます。

$ firebase login:ci

出力されるTokenをコピー

$ cat .gitlab-ci.yml
variables:
    GIT_SUBMODULE_STRATEGY: recursive
    GIT_SSL_NO_VERIFY: "true"

stages:
    - deploy

deploy:
    stage: deploy
    image: nohitme/hugo-firebase
    script:
        # build site
        - cd ${CI_PROJECT_DIR}
        - hugo
        # upload
        - firebase deploy --token ${FIREBASE_TOKEN}
    only:
        - master

GitlabCIの環境変数を追加

https://gitlab.com/<USER NAME>/<PROJECT NAME>/settings/ci_cd

GitlabCI ENV

ここに、

Name Value
FIREBASE_TOKEN firebase login:ciの結果

これでOK あとはmasterにpushしたら、CIが実行されます。

https://gitlab.com/<USER NAME>/<PROJECT NAME>/pipelines

GitlabCI Pipline

これで、全て完了です!!

最後に

これまで無料で、Privateでとなると Bitbucket, WeakerCIを選んでいたですが、Gitlabだけになると1ツールに完結するので、シンプルになります。 更にFirebaseを使うことでSSL化、Hostingもある程度まで無料になるので、S3とかで数百円払って居たのが、無料に抑える事ができるようになりました。

便利なよのなかだぁ