GitHub Actionsでポートフォリオサイトの情報を毎日更新する仕組みを作りました

4 min read

僕のポートフォリオサイト (opens in a new tab)では、アクティブに活動していることをアピールするために、GitHubのコントリビューション数を表示しています。

Portfolio

よくある実装方法としては、ページを表示するときにクライアントサイドで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
    # デプロイ用の設定

課題として、公開リポジトリにした場合、git pushが失敗してしまいます(デフォルトブランチへの直接プッシュがブロックされるようです)。どうすれば良いのか少し調べたこともあるのですが、ポートフォリオサイトのソースコードを公開することをあまり考えていなかったので、すぐに諦めました。

ひとまず、プライベートリポジトリであれば問題なく動作するので、このまま運用していこうと思います。

© 2024 neoki. Built using Nextra, hosted on Vercel.