はてなブログの自作テーマのCSSをGitHub Pagesでホスティングして本番反映を楽にするテク

はてなブログにはテーマという概念があって、ブログのデザインをガッと変更できる。

テーマははてなブログオフィシャルのテーマやテーマストアにあるものをインストールしてきても良いけど、自分で作ることもできる。ちょっと見た目を変えたいブログができたので、一個テーマを作ってみた。誰かに使ってもらいたいということはないので、テーマストアでは公開してない。

github.com

上記自作テーマはHatena-Blog-Theme-Boilerplateというのをベースにしている。このボイラープレートはどうやってテーマを作っていけば良いとか、どこにスタイルをあてたらよいとか、ブログに実際に反映するには、とかがさっとわかるようになっている。そして、デザインテスト用のブログを一つ作っておけば手元のviteでHMRした結果がさっと確認できてめちゃめちゃ体験が良い。

github.com

というのが前節で、ここからが本題。

Hatena-Blog-Theme-Boilerplateでめちゃめちゃインクリメンタルに開発できるのは嬉しいけど、実際にブログに反映するところだけが面倒。普通にやるとnpm run buildしてできたbuild/boilerplate.css をクリップボードにコピーして、ブラウザで自分のブログの管理画面を開いて、デザイン設定画面でCSSを設定して……とするか、自作のテーマをテーマストアに登録しているなら、テーマを更新して……ということをする必要がある。

本当はなにかAPIがあってblogsyncみたいな感じでコマンド一発でできてほしいけど、いまところはてなブログはそういうAPIを提供していなさそうなので別の方法を考えた。

作戦はこう

GitHub Actionsで npm run build するようにして、成果物のCSSをGitHub Pagesでホスティングする
自分のブログのデザイン設定に @import "https://*.github.io/.../boilerplate.css"; とかいて、成果物のCSSをインポートする

ということで、Hatena-Blog-Theme-Boilerplateをテンプレートとして作ったリポジトリで以下のようなGitHub Actionsを走らせている。

name: build theme css and upload
on:
  push:
    branches:
    - master
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false
  
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        cache: 'npm'
    - name: build
      run: |
        npm ci
        npm run build
    - uses: actions/configure-pages@v3
    - uses: actions/upload-pages-artifact@v2
      with:
        path: ./build

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/deploy-pages@v2