🍇
GitHub GistをRSS/API代わりにサイトを自動更新する

2025/10/04に公開
 背景サイトに「最近の活動」としてアプリのリリース情報やブログへの投稿などのリストを載せたい
サイト本体のデータと切り離して編集・更新したい
CMSのようなシステムを要しない軽い内容
更新するデータはjsonのようなデータがいい

 goalGist に jsonファイルを作成して、サイト側で fetch して取得、表示する

実際にGistから取得した内容を表示しているのが https://chocolat5.com/ のLatest Activity の部分です。

 前提GitHubアカウント
React

 手順
 1. Gistを作成拡張子を .json として以下のようなファイルを作成する（secretでもOK）。
latest.json
[
  {
    "title": "Post Title",
    "url": "https://sample.com/post-url",
    "date": "2025-08",
    "type": "Post"
  }
]

 2. Gistの取得表示したいコンポーネントで fetch() によりGistのデータを取得する。
# Gist の取得
  const [latest, setLatest] = useState<Latest[]>([]);

  useEffect(() => {
    async function startFetching() {
      const result = await fetch(<ここにGistのURL>, { cache: "no-store" }).then(
        (res) => res.json()
      );
      if (!ignore) {
        setLatest(result);
      }
    }
    let ignore = false;
    startFetching();
    return () => {
      ignore = true;
    };
  }, []);
GistのURLは作成したGistファイルを開き、 [RAW] をクリックして表示されたURLからrevision hashを取り除いたものを使用。

https://gist.githubusercontent.com/<your_github_id>/<gist_id>/raw/<gist_version>/latest.json

↓

https://gist.githubusercontent.com/<your_github_id>/<gist_id>/raw/latest.json

 3. 取得したデータの表示取得したjsonデータを表示するコンポーネントを作成
# 表示
  return (
    {latest.map((item) => {
      <div key={item.title}>
        <a href={item.url} target="_blank">
          {item.title} {item.date} {item.type}
        </a>
      </div>
    })
  );
コンポーネントの作成が終わったら試しにGistにデータを追加して保存します。

問題なければページを更新すると追加したデータも含めて表示されます。

 おまけAPIやRSSがあればGistの更新自体も自動化できるのではと思い、Claude Codeに聞きながらGitHub Actionsを作成しました。
1. PAT（Personal Access Token）を発行

https://github.com/settings/tokens で gist を対象としたPATを発行する。

Tokenをコピーしておく。
2. Tokenを追加

GitHub Actionsを設定するリポジトリへ移動。Settings > Secrets and variables > Actions と移動。New repository secretをクリックして、以下2点を追加する。


Name
Secret


GIST_ID
GistURL内のid

GIST_TOKEN
1で作成したtoken

3. GitHub Actions の workflowを作成

リポジトリで .github/workflows/ フォルダを作成して yml ファイルを作成する。
ymlの例 update-latest.yml
name: Update Latest Feed

on:
  schedule:
    - cron: "0 */6 * * *"  # 6時間ごとに実行
  workflow_dispatch:  # 手動実行も可能

jobs:
  update-gist:
    runs-on: ubuntu-latest
    steps:
      - name: Fetch and Update Latest
        env:
          # 2. で追加したTokenを指定
          GIST_ID: ${{ secrets.GIST_ID }}
          GIST_TOKEN: ${{ secrets.GIST_TOKEN }}
        run: |
          # 現在のGistを取得
          CURRENT=$(curl -s -H "Authorization: token $GIST_TOKEN" \
            "https://api.github.com/gists/$GIST_ID")

          echo "$CURRENT" | jq -r '.files["latest.json"].content' > current.json

          # 最新の投稿をZennから取得（最新の1つだけ）
          LATEST_ZENN=$(curl -s "https://zenn.dev/api/articles?username=<YOUR_ZENN_ID>&order=latest" \
            | jq -r '.articles[0] | {title: .title, url: ("https://zenn.dev" + .path), date: (.published_at[:7]), type: "post"}')

          # すでに取得済みかチェック
          ARTICLE_URL=$(echo "$LATEST_ZENN" | jq -r '.url')
          EXISTS=$(cat current.json | jq --arg url "$ARTICLE_URL" 'any(.[]; .url == $url)')

          if [ "$EXISTS" = "false" ]; then
            # Gistにまだない場合は取得した記事を追加する
            echo "$LATEST_ZENN" | jq -s ". + $(cat current.json)" > latest.json
          else
            # Gistに存在する場合は既存のデータを維持
            cp current.json latest.json
          fi

          # Gistを更新
          CONTENT=$(cat latest.json | jq -Rs .)
          curl -X PATCH \
            -H "Authorization: token $GIST_TOKEN" \
            -H "Content-Type: application/json" \
            "https://api.github.com/gists/$GIST_ID" \
            -d "{\"files\":{\"latest.json\":{\"content\":$CONTENT}}}"

4. workflowのテスト

リポジトリにpushしてブラウザでActionsタブへ移動。サイドバーにymlファイルに記載した名前「Update Latest Feed」が表示されるのでクリック。 [Run workflow]で実行してグリーンのチェックマークが付けばworkflowの設定完了。
手動でも実行できるので、Zennで記事を投稿したら [Run workflow] で、Actions実行 → Gistアップデート → サイトに反映という流れを確認できます。
※ 記事内の <gist_id> など < ... > となっている部分はサンプルです。実際に使うときはご自身のURLやIDに置き換えてください。

 まとめサイト本体のデータを触らずに部分的に気軽に編集・更新できるようになりました。

Claude Codeのおかげで触ったことのなかったGitHub Actionsを活用して更新の一部自動化にも成功。
背景

goal

前提

手順

1. Gistを作成

2. Gistの取得

3. 取得したデータの表示

おまけ

まとめ

Discussion
