GitHubのプロフィールにコントリビューションを食べるヘビを追加する

投稿日: 2024年5月12日

目標

• GitHubのプロフィールにコントリビューションを食べるヘビを追加する

条件

• GitHubのプロフィールを作成（GitHub のユーザ名と一致するリポジトリを作成し、README.mdを配置）していること。プロフィールの作成方法はこちらを参照ください。

目次

1. GitHub Actionsの追加
2. READMEの編集
3. GitHub Actionsの実行

GitHub Actionsの追加

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

READMEの編集

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. ここまでの作業内容をコミットしてプッシュします。

GitHub Actionsの実行

1. GitHubのプロフィール用のリポジトリを開きます。Actionsタブをクリックし、左サイドメニューのgenerate animationをクリックします。

2. 画面右にある黒色の「Run workflow」をクリックします。続いて緑色の「Run workflow」をクリックします。

3. workflowの実行が完了したことを確認します。

4. GitHubのプロフィール用のリポジトリのCodeタブをクリックします。以下のようにアニメーションが追加されていることを確認します。


以上で全ての手順は完了になります