はてなブログにはテーマという概念があって、ブログのデザインをガッと変更できる。
テーマははてなブログオフィシャルのテーマやテーマストアにあるものをインストールしてきても良いけど、自分で作ることもできる。ちょっと見た目を変えたいブログができたので、一個テーマを作ってみた。誰かに使ってもらいたいということはないので、テーマストアでは公開してない。
上記自作テーマはHatena-Blog-Theme-Boilerplateというのをベースにしている。このボイラープレートはどうやってテーマを作っていけば良いとか、どこにスタイルをあてたらよいとか、ブログに実際に反映するには、とかがさっとわかるようになっている。そして、デザインテスト用のブログを一つ作っておけば手元のviteでHMRした結果がさっと確認できてめちゃめちゃ体験が良い。
というのが前節で、ここからが本題。
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
これで、ローカルで開発した自分用のブログのテーマを本番に反映するには、GitHubにpushするだけで良くなって便利。
一方微妙ポイントもいくつかある。
以上をまあいいかと思える人は自己責任で真似しても良いです。
実は既出の技だったとか、もっと良いテクがあるとかを知っている人がいたらぜひ教えてください