takutakahashi.dev

挫折しがちな Tech Blog を支えるワークフロー

今まで何度か Tech Blog を作ってきたのですが,ことごとく運用に失敗しています.
今までの失敗を踏まえ,要件を定め,その要件を満たすワークフローを整備しました.
結果,いい感じになったので紹介します.

要件

定めた要件は以下のとおりです.

  1. 静的サイトジェネレータ + GitOps
  2. SaaS & 無料
  3. スマートフォンで記事作成 → 配信まで行える

以下に,要件を満たす要素を紹介します.

1. 静的サイトジェネレータ + GitOps

Wordpress やはてなブログなどのブログエンジンは,ポータビリティ性がちょっと低めなのがネックです.
web サーバさえあればとりあえず配信できる静的サイトジェネレータを利用します.
Generate が速いと聞いて, hugo を選択しました. ソースコードは GitHub で管理して,master を起点とした GitOps を組むことにしました.
すべてが自動で動く世界って素晴らしいのでがんばることにします.

2. SaaS & 無料

自宅サーバによるホスティングは監視が大変なので,SaaS を利用します.
更にランニングコストがかからないとよいなと思って探しました.
この時点で選択肢が Github Pages か Netlify になりました.
GitHub のリポジトリ構成とブログは分離したかった(1ユーザーに1つの Root Pages が利用可能)ため,Netlify を選択しました.

3. スマートフォンで記事作成から配信までを完結できる

こんな記事書きたいなーと思ったタイミングで雑にドラフトを作成したいんですが,
CLI を実行する必要があるため,基本的に静的サイトジェネレータとスマートフォンの相性はあまり良くありません.
Netlify は CI/CD を提供してくれているのですが,
こいつの責務は, 静的ファイルの作成です.
記事の本体である markdown ファイルは,別口で作成・管理する必要があります. そこで, md ファイルのハンドリングは CircleCI にやってもらうことにしました.

新規ブランチを切り,リポジトリにプッシュすれば,記事が新規作成できるようにしました。
これで記事作成をスマホで完結できます。

.circleci/config.yaml は以下の通り.

version: 2
jobs:
  build:
    branches:
      ignore:
        - master
    docker:
      - image: alpine/git

    steps:
      - checkout
      - run:
          name: git add
          command: |
            ls content/posts/$CIRCLE_BRANCH.md && exit 0
            apk add hugo
            hugo new posts/$CIRCLE_BRANCH.md
            git config --global user.email "taku.takahashi120@gmail.com"
            git config --global user.name "Takuya TAKAHASHI"
            git add content/posts/$CIRCLE_BRANCH.md
            git commit -m "[ci skip][build] add $CIRCLE_BRANCH.md"
            git push origin $CIRCLE_BRANCH

“新規ブランチがプッシュされたらそのブランチ名で hugo new してブランチにプッシュする” というだけです.
これで,md ファイルの新規作成を完全に CircleCI におまかせできます.

iOS で利用できる git client は結構いろいろ種類があります.
Clone というアプリを利用することにしました. プッシュ機能は有料ですが,使い勝手がいいのでありがたく課金させていただきました.

結果

環境は整ったので,後は継続するだけ...