GitHub Actionsでポートフォリオサイトの情報を毎日更新する仕組みを作りました
•4 min read
僕のポートフォリオサイト (opens in a new tab)では、アクティブに活動していることをアピールするために、GitHubのコントリビューション数を表示しています。

よくある実装方法としては、ページを表示するときにクライアントサイドでGitHubから情報を取得して表示する方法があると思います。しかし、このサイトは、Astro (opens in a new tab)という高速なWebサイトを構築するためのフレームワークを使用しており、出来るだけ動的なコンテンツを減らしたいという思いがありました。また、そこまでリアルタイムに表示したい情報でもないと思いました。
そこで、GitHub Actionsで以下のようなワークフローファイルを作成することで、毎日決まった時刻に情報を取得し、静的なコンテンツとしてデプロイする仕組みを作りました。
name: Deploy
on:
schedule:
- cron: '0 21 * * *'
jobs:
update-github-data:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 18
- run: npm install
- run: npm run fetch:github-data
env:
GITHUB_USERNAME: ${{ secrets._GITHUB_USERNAME }}
GITHUB_ACCESS_TOKEN: ${{ secrets._GITHUB_ACCESS_TOKEN }}
- name: git setting
run: |
git config --local user.name "GitHub Action"
git config --local user.email "action@github.com"
git add src/data
git commit -m "update github data"
git pull
git push
deploy:
needs: update-github-data
# デプロイ用の設定scheduleを設定することで、毎日決まった時刻にワークフローが実行されるようになります。update-github-dataジョブで実行しているnpm run fetch:github-dataは、自作したスクリプトを実行するためのコマンドです。このスクリプトは、GitHubのAPIに接続してコントリビューション数を取得し、以下のJavaScriptファイルとして保存しています(Astro内で扱いやすいように、各曜日ごとにグループ化してから保存しています)。export const weeklyContributions = [ [ { contributionCount: 4, date: "2022-09-18" }, { contributionCount: 5, date: "2022-09-25" }, { contributionCount: 8, date: "2022-10-02" }, // ... ], [ { contributionCount: 2, date: "2022-09-19" }, { contributionCount: 1, date: "2022-09-26" }, { contributionCount: 1, date: "2022-10-03" }, ], // ... ];update-github-dataジョブの最後のステップでは、上記スクリプトで更新したファイルをリポジトリにプッシュしています。update-github-dataジョブが終わった後にデプロイ処理を行います。
課題として、公開リポジトリにした場合、git pushが失敗してしまいます(デフォルトブランチへの直接プッシュがブロックされるようです)。どうすれば良いのか少し調べたこともあるのですが、ポートフォリオサイトのソースコードを公開することをあまり考えていなかったので、すぐに諦めました。
ひとまず、プライベートリポジトリであれば問題なく動作するので、このまま運用していこうと思います。
© 2024 neoki. Built using Nextra, hosted on Vercel.