じゃあ、おうちで学べる

本能を呼び覚ますこのコードに、君は抗えるか

はてなブログの記事をGitHubに自動でPushする方法

ツールに感謝。コミュニティに感謝。

github.com

xではてなブログで更新する時にDiffが見れるととても助かるのだけど有料版だと可能とかありますか?みたいなこと聞いてたらwhywaita さんが教えてくれた!!!

この記事では、blogsyncを用いてはてなブログの記事をGitHubに自動的に同期する方法について説明します。GitHub Actionsを使用して、はてなブログの記事を定期的にプルし、GitHubリポジトリに反映させることができます。当初はブログを更新する際に、記事の変更点(Diff)を確認できるようにしたいと考えました。しかし、NeoVimを使用してブログを書いているわけではないので、単に日付単位のDiffを取得できれば十分だと思ったため、この構成にしました

準備

1. はてなブログAPIキーを取得

はてなブログの設定ページ(https://blog.hatena.ne.jp/-/config)にアクセスし、「詳細設定」タブの「APIキー」セクションでAPIキーを取得します。

2. GitHub Actionsのワークフローを設定

.github/workflows/hatena-blog-pull.yamlに以下の内容を配置します。

name: Blogsync Pull

on:
  schedule:
    - cron: '0 0 * * *'

jobs:
  blogsync_pull:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Set up Blogsync
        uses: x-motemen/blogsync@v0
        with:
          args: --version

      - name: Create blogsync.yaml
        run: |
          cat << EOF > blogsync.yaml
          your_hatena_blog_id.hatenablog.com:
            username: your_hatena_blog_id
            password: ${{ secrets.HATENA_API_KEY }}
          default:
            local_root: .
          EOF
        shell: bash

      - name: Pull articles from Hatena Blog
        run: |
          blogsync pull --no-drafts

      - name: Commit changes
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add .
          git reset -- blogsync.yaml
          git commit -m "Pull articles from Hatena Blog" || echo "No changes to commit"

      - name: Push changes
        uses: ad-m/github-push-action@v0.6.0
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          branch: main

このワークフローは、毎日0時(UTC)に実行されるようにスケジュールされています。

3. ワークフローの権限を設定

GitHub リポジトリの設定ページ(https://github.com/ユーザー名/リポジトリ名/settings/actions)にアクセスし、「Workflow permissions」セクションで「Read and write permissions」を選択します。これにより、ワークフローがリポジトリに変更を書き込むことができるようになります。

4. はてなブログAPIキーを設定

GitHub リポジトリの設定ページ(https://github.com/ユーザー名/リポジトリ名/settings/secrets/actions)にアクセスし、「Repository secrets」セクションで「New repository secret」をクリックします。「Name」にHATENA_API_KEYと入力し、「Value」に手順1で取得したはてなブログAPIキーを入力します。

カスタマイズ

blogsync.yamlファイルの設定を必要に応じて書き換えてください。以下は設定例です。

your_hatena_blog_id.hatenablog.com:
  username: your_hatena_blog_id
  password: ${{ secrets.HATENA_API_KEY }}
default:
  local_root: .

your_hatena_blog_idの部分を実際のはてなブログIDに置き換えてください。また、このファイルは秘密にしなければいけないので基本的には.gitignoreに入れておいてください。

blogsync.yaml

使い方

  1. .github/workflows/hatena-blog-pull.yamlファイルをリポジトリに追加します。
  2. ワークフローは毎日0時(UTC)に自動的に実行されます。
  3. はてなブログの記事がGitHubリポジトリにプルされ、変更がコミットされます。

以上で、はてなブログの記事をGitHubで自動的に管理できるようになります。ワークフローを設定したら、あとは記事を書くだけです。記事の変更が毎日GitHubリポジトリに自動的に反映されます。

参考URL