⛳
個人のはてなブログ運用にHatenaBlog Workflows Boilerplateを導入する

M-Yamashita
2024/11/17に公開
GitHub Actions
はてなブログ
tech
 はじめにこんにちは、M-Yamashitaです。
今回の記事は、個人のはてなブログ運用にHatenaBlog Workflows Boilerplateを導入する手順についてです。

以前はGitHub Actionsとblogsyncを活用した記事の作成と投稿自動化を自作していましたが、制限事項のため時折不便さを感じていました。この不便さが今回のHatenaBlog Workflows Boilerplateで解消されたため、導入手順について記載します。

 前提個人のGitHubアカウントのFreeプランを使用

 伝えたいこと以前の投稿自動化の構成、および制限事項
HatenaBlog Workflows Boilerplateの導入手順
投稿の実例

 以前の構成GitHub Actionsとblogsyncを活用した記事の作成と投稿自動化を作っていました。詳しくはこちらを参照してください。

https://zenn.dev/m_yamashii/articles/post-blog-using-github-actions
上記記事にあるように投稿はできるものの、GitHub側のコードを編集せずにはてなブログ側のみで編集するとリポジトリにあるブログと整合性が取れない点が気になっていました。また画像については、現在のつくりではGitHub上のプライベートリポジトリにある画像をはてなブログにアップできませんでした。

 HatenaBlog Workflows Boilerplateの導入
 HatenaBlog Workflows Boilerplateについてそんななか、昨年はてなブログの公式お知らせにて、GitHub上ではてなブログ運営を可能にするテンプレートリポジトリが公開されました。
https://staff.hatenablog.com/entry/2023/09/21/182000
さらに今年の春、そのテンプレートリポジトリに画像アップロード機能が追加となっています。
https://staff.hatenablog.com/entry/2024/04/09/150204
画像アップロードまでできるようになったため、以前の独自構成の制限事項を解消できると考えました。そのため、はてなブログ公式のテンプレートリポジトリ使用への移行を決めました。

 導入設定テンプレートリポジトリには導入手順が丁寧に記載されているため、基本的にその手順通りに進めていけば問題ありません。

ただ、私が個人用のGitHub Freeプランを使ってprivateのリポジトリではてなブログを管理するため、いくつかの制限事項がありました。ここではその制限事項とその対応について記載します。

 個人ブログに導入時の制限事項次に挙げる制限事項は、個人のGitHubアカウントのFreeプランを使用している場合に発生する制限となります。

主に2つの制限事項があります。
GitHubのbranch protection、allow auto mergeの設定不可

create draftアクションによるPull Requestのdraft版作成不可

 制限事項1: GitHubのbranch protection、allow auto mergeの設定不可1つ目の制限は、branch protectionやallow auto mergeが設定できないことです。まずはbranch protectionの設定についてです。テンプレートリポジトリのREADMEの手順を見てみます。

GitHub リポジトリの設定 「Branches」 のAdd branch protection ruleボタンから、ルールを作成する

Branch name pattern に main を指定する

手順どおりにルールを作ると、GitHub上に以下のような表示が出力されます。
この表示について、GitHubの公式ドキュメントを読んでみると以下のような記載があります。
https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/managing-protected-branches/managing-a-branch-protection-rule
Protected branches are available in public repositories with GitHub Free and GitHub Free for organizations. Protected branches are also available in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server.
つまり、個人のGitHub Freeプランではprivateリポジトリでbranch protection ruleを設定することができません。
ここが未設定の場合mainブランチに対する保護がありませんが、個人ブログ運営でありこのリポジトリで関わっているのは私だけなので、ここをスキップしても運用に問題はないと判断しました。そのためここはスキップしました。
また、以下のallow auto merge設定の手順も同様にスキップしました。

GiHub リポジトリの設定 「General」 の Pull Requests 項の Allow auto merge にチェックを入れる

ここをスキップすると、テンプレートリポジトリで用意されているはてブログの同期GitHubアクション(pull from hatenablog等)により自動生成されるPull Requestが、自動でマージされなくなります。そのため自動生成Pull Requestを手動でマージする必要がありますが、これも個人ブログ運営であるため問題ないと判断しました。

 制限事項2: create draftアクションによるPull Requestのdraft版作成不可2つ目の制限は、Pull Requestのdraft版作成ができないことです。この制限が実際に現れるのは、以下にあるような記事作成を行う手順の場合となります。
ブログオーナーのアカウントで投稿する場合

Actions から create draft を選択し、Titleに記事タイトルを設定、Branch: mainに対して実行する

作成した下書きを含むプルリクエストが作成される
実際にこの方法で記事を作成しようとGitHub Actionsを実行すると、以下のようなエラーが出力されました。
Create or update the pull request

Attempting creation of pull request

Error: Draft pull requests are not supported in this repository.
エラーの通り、このリポジトリではdraft版の記事作成ができないという制限があります。
実際にこのエラーが出力されるまでのGitHub Actionsのワークフローをコードリーディングしてみます。まずはcreate draftアクションのワークフローを見てみます。
jobs:
  create-draft:
    uses: hatena/hatenablog-workflows/.github/workflows/create-draft.yaml@v1
    with:
      title: ${{ github.event.inputs.title }}
      draft: true
      BLOG_DOMAIN: ${{ vars.BLOG_DOMAIN }}
    secrets:
      OWNER_API_KEY: ${{ secrets.OWNER_API_KEY }}
https://github.com/hatena/Hatena-Blog-Workflows-Boilerplate/blob/main/.github/workflows/create-draft.yaml
このワークフローを見ると、draft: trueのパラメータを持ってhatenablog-workflowsリポジトリのcreate-draft.yamlを実行していることがわかります。そのため、次はそのリポジトリのcreate-draft.yamlを見てみます。
name: "[Reusable workflows] create draft and pull from hatenablog"

on:
  workflow_call:
    inputs:
      title:
        required: true
        type: string
      draft:
        default: true
        type: boolean
      BLOG_DOMAIN:
        required: true
        type: string
    secrets:
      OWNER_API_KEY:
        required: true

# 中略

      - name: pull draft by title
        uses: hatena/hatenablog-workflows/.github/actions/create-draft-pull-request@v1
        with:
          title: ${{ inputs.title }}
          draft: ${{ inputs.draft }}
          BLOG_DOMAIN: ${{ steps.set-domain.outputs.BLOG_DOMAIN }}
          ENTRY_PATH: ${{ steps.post-draft.outputs.ENTRY_PATH }}
https://github.com/hatena/hatenablog-workflows/blob/main/.github/workflows/create-draft.yaml
このyamlの最後にpull draft by titleがあります。ここでactionsディレクトリにあるcreate-draft-pull-requestを実行していますので、そこを見てみます。
    - name: create draft pull request
      uses: peter-evans/create-pull-request@v7
      env:
        OWNER_NAME: ${{ steps.set-owner.outputs.OWNER_NAME }}
        ENTRY_ID: ${{ steps.set-entry-variables.outputs.ENTRY_ID }}
        PREVIEW_URL: ${{ steps.set-entry-variables.outputs.PREVIEW_URL }}
      with:
        title: ${{ github.event.inputs.title }}
        branch: draft-entry-${{ env.ENTRY_ID }}
        body: |
          ## ${{ github.event.inputs.title }}

          - 編集ページのURL: https://blog.hatena.ne.jp/${{ env.OWNER_NAME }}/${{ inputs.BLOG_DOMAIN }}/edit?entry=${{ env.ENTRY_ID }}
          - プレビューへのURL: ${{ env.PREVIEW_URL == 'null' && 'なし' || env.PREVIEW_URL }}
        delete-branch: true
        draft: ${{ inputs.draft == 'true' }}
https://github.com/hatena/hatenablog-workflows/blob/main/.github/actions/create-draft-pull-request/action.yaml
ここでPull Request作成をするために、peter-evans/create-pull-requestアクションを使用しています。
https://github.com/marketplace/actions/create-pull-request
このアクションのドキュメントを見てみると、draftのパラメータがあり、これがtrueの場合draft版のPull Requestを作成するとあります。
よって、個人ブログでcreate draftアクションを実行する際には、draft版ではなく通常のPull Request作成とするためにdraft: falseを指定する必要があります。そのため、私のリポジトリでは以下のようにその指定を入れることで解決しました。
jobs:
  create-draft:
    uses: hatena/hatenablog-workflows/.github/workflows/create-draft.yaml@v1
    with:
      title: ${{ github.event.inputs.title }}
      draft: false
      BLOG_DOMAIN: ${{ vars.BLOG_DOMAIN }}
    secrets:
      OWNER_API_KEY: ${{ secrets.OWNER_API_KEY }}

 実例それでは実際に画像を含んだブログを作ってみます。まずはGitHub Actionsにてcreate draftアクションを実行します。
GitHub Actionsが成功するとブログ用のPull Requestが作成されます。このPull Requestのdescriptionには、ブログの編集ページのURLとプレビューへのURLが記載されています。
このブランチにてテキスト追加と画像アップロードを試します。画像アップロードについては、作成する記事から辿れるパスであればどこに画像を配置しても問題ありません。今回はimagesディレクトリを作成し、そこに画像を置いて参照する形にしました。

なお、画像にはtitleの指定も可能となっており、シングルクォートもしくはダブルクォートで囲むことでtitleを指定できます。
!titleにシングルクォート、ダブルクォートが使える理由について説明します。

前述の![](/images/text_images_in_blog.png)を記載してコミットすると、upload-imagesワークフローを持つGitHub Actionsが実行されます。
このジョブのなかで、画像アップロードに関するコードをまとめたpythonコードをダウンロードしているようです。
      - name: Download the script
        run: |
          curl -fsSL -o /tmp/fotolife-client.py https://raw.githubusercontent.com/hatena/hatenablog-workflows/v1/fotolife-client.py
          chmod +x /tmp/fotolife-client.py
このpythonコードには次のような処理が含まれており、画像アップロード前に画像アップロードの構文解析を行なっているようです。
def replace_to_fotolife_syntax(match: re.Match) -> str:
    """
    Markdownの画像記法で参照されている画像をFotolifeにアップロードしつつ、Fotolife記法に置き換える
    """
    alt = match.group("alt")
    path = match.group("path")
    title = match.group("quot") or match.group("squot")
    # 中略

def main():
    # 中略
    pattern = re.compile(r"""!\[(?P<alt>[^\]]*)\]\((?P<path>[^\)]*?)\s*("(?P<quot>[^"]*)"\s*)?('(?P<squot>[^']*)'\s*)?\)""")
    res = pattern.sub(replace_to_fotolife_syntax, buf)
このコードから、シングルクォーテーションもしくはダブルクォーテーションをつけていればtitleとして認識されることがわかります。
この変更をコミットすると、botにより画像がはてなブログにアップされ、ファイル内の画像参照も自動で変更されます。そのため、この時点でGitHubに置いていた画像を削除しても問題ないようです。
最後に、ブログ内のDraft: trueをDraft: falseに変更し、Pull Requestをマージすることではてなブログに記事が投稿されます。

 さいごにこの記事では、個人のはてなブログ運用にHatenaBlog Workflows Boilerplateを導入する手順について記載しました。

ちょっとした制限はあったものの、個人ブログ運営であれば問題ない範囲でした。今後はこの自動投稿を使って効率的にブログを投稿していきます。