Hexo ブログを bitbucket, circleci, firebase で無料自動化公開する

ブログを本格的に始めようと思い、何がいいのか調べていた。 最初 jekyll を触ってみるが、高々 category をよろしく表示させるだけでも何か上手くいかなかったので、 hexo をためす。

階層化カテゴリ、タグ機能、 responsive な画面、がデフォルトで備わっている hexo に行き着き、それを firebase にデプロイすることでひとまず以下が達成された。

  • すべて無料
  • ソースコードは公開しない
  • deploy パイプラインの自動化

このブログは今それでデプロイされているが、その際に行った手順をまとめておく。

手順

bitbucket リポジトリ用意

hexo 関係

hexo セットアップ

1
2
3
4
5
6
7
8
# hexo インストール
npm i -g hexo-cli
# hexo プロジェクト作る
hexo init blog

# ライブラリインストール
cd blog
yarn install

hexo 確認

1
2
3
4
5
# public フォルダにサイトをビルドする
hexo generate

hexo server
# => localhost:4000 でそのブログを見れるようになる

hexo 編集

_config.yml がプロジェクト直下にある。そこで、以下を編集

  • title : おすきなタイトル
  • author : 自身の名前
  • url : firebase にデプロイしたら url が作られるので、それを入れる。

firebase

以下の感じでよしなにやる

  1. https://console.firebase.google.com からプロジェクトを作っておく。
  2. firebase-tools を install する: npm i -g firebase-tools
  3. プロジェクト直下で firebase init 適当にやっても、最後に firebase.json が以下の形になっていればよい。

    1
    2
    3
    4
    5
    {
    "hosting": {
    "public": "public"
    }
    }
  4. firebase deploy でデプロイされましたよー、みたいに出ればオッケー

circleci

端的に言うと、以下を行う。

  1. bitbucket と連携して以下の .circleci/config.yml を書く
  2. circleci の画面からポチポチして、 bitbucket のアカウントと連携させる
    • 注意点として、 github アカウントと bitbucket アカウントは連携すると別 organization 扱いになる。これに気付いてないとちょっとハマる。
  3. yard add -D firebase-tools を行い、ローカルの node_modules の中に firebase-tools が入るようにする
  4. firebase login:ci を行い、そのトークンを、 circleci の設定から environment variable として設定する。
    • 以下の設定だと FIREBASE_DEPLOY_TOKEN から受け取っている。
    • まぁ、プライベートリポジトリなので直コミットでもいいような気も少しする。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#

defaults: &defaults
docker:
- image: circleci/node:10.9.0
working_directory: ~/repo

version: 2
jobs:
build:
<<: *defaults
steps:
- checkout
- restore_cache:
keys:
- v1-dependencies-{{ checksum "package.json" }}
# fallback to using the latest cache if no exact match is found
- v1-dependencies-
- run: yarn install
- save_cache:
paths:
- node_modules
key: v1-dependencies-{{ checksum "package.json" }}
- run: yarn run build
- persist_to_workspace:
root: .
paths: [ '*' ]

deploy:
<<: *defaults
steps:
- attach_workspace:
at: .
- run: node_modules/.bin/firebase deploy --token="$FIREBASE_DEPLOY_TOKEN"

workflows:
version: 2
build-and-deploy:
jobs:
- build
- deploy:
requires:
- build
filters:
branches:
only:
- master

感想

push するだけで blog が更新、静的ホスティング PaaS に載っているのでカスタマイズの自由度もかなり高い。 プライベートリポジトリベースなので、いらんこと気にせず成果物のデプロイだけに集中すればいい。 firebase ベースなので、必要があれば web アプリに進化させることもできる。

ブログはもうこの構成一択なのではなかろうか。