投稿日: 2024年5月12日
1. プロフィール用のリポジトリのルートに「.github/workflows」ディレクトリを作成します。
profile_repository
├── .github
│ └── workflows
└── README.md
2. workflowsディレクトリにSnake.ymlを新規作成して以下の内容で保存します。
name: generate animation
on:
schedule:
- cron: "0 */24 * * *"
workflow_dispatch:
push:
branches:
- master
jobs:
generate:
permissions:
contents: write
runs-on: ubuntu-latest
timeout-minutes: 5
steps:
- name: generate github-contribution-grid-snake.svg
uses: Platane/snk/svg-only@v3
with:
github_user_name: ${{ github.repository_owner }}
outputs: |
dist/github-contribution-grid-snake.svg
dist/github-contribution-grid-snake-dark.svg?palette=github-dark
- name: push github-contribution-grid-snake.svg to the output branch
uses: crazy-max/ghaction-github-pages@v3.1.0
with:
target_branch: output
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
※保存後に以下のディレクトリ構成になっていることを確認します。
profile_repository
├── .github
│ └── workflows
│ └── Snake.yml
└── README.md
1. README.mdの任意の箇所に以下を追加します。{github_user_name}にはご自身のGitHubユーザ名を入力してください。
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/{github_user_name}/{github_user_name}/output/github-contribution-grid-snake-dark.svg">
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/{github_user_name}/{github_user_name}/output/github-contribution-grid-snake.svg">
<img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/{github_user_name}/{github_user_name}/output/github-contribution-grid-snake.svg">
</picture>
2. ここまでの作業内容をコミットしてプッシュします。
1. GitHubのプロフィール用のリポジトリを開きます。Actionsタブをクリックし、左サイドメニューのgenerate animationをクリックします。
2. 画面右にある黒色の「Run workflow」をクリックします。続いて緑色の「Run workflow」をクリックします。
3. workflowの実行が完了したことを確認します。
4. GitHubのプロフィール用のリポジトリのCodeタブをクリックします。以下のようにアニメーションが追加されていることを確認します。
以上で全ての手順は完了になります