githubの草をヘビに食べさせる

先日、別の方のgithubを見に行った際、プロフィールの草を食べていく芋虫のような、蛇のようなものがいて面白そうだったのでやってみました。

完成系↓
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake.svg">
</picture>

以下記事を参考にさせていただいております。

https://zenn.dev/obregonia1/articles/3ba381c1938a46

## 準備
アカウント名と同じgithub リポジトリを作成する
アカウント名と同じ文字列を入力すると、以下画像のような案内（青枠部）が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2704095/6a17e486-95fa-7fb1-b845-c8fe431b1bd1.png)

ローカルで適当に作業用ディレクトリを作成し、移動、
git初期化 & 必要であればブランチ名を変更する。
リモートを設定し、pushする。（ここら辺はブラウザ上でもコマンド出ているので、ここで載せる必要はなさそうですが念のため記載しました）

```bash:command
mkdir github_profile
cd github_profile
git init
git branch -m "main"
git remote add origin https://<githubで表示されるurl>

// 適当にファイル追加、コミット
touch README.md
echo "# ikeyaH profile repository"
git add -A
git commit -m "first commit"

// プッシュ
git push -u origin main
```

## 画像用リポジトリ作成
```bash
mkdir img
touch img/.keep
```

## github actions　を追加する

github actions用のディレクトリを作成します。（-pはparentsオプションで、親ディレクトリがない場合同時に作成してくれます。）
そして、そこにGenerateSnake.ymlというファイルを追加します。
（yamlはコピペですmm）

```
mkdir -p .github/workflows
touch .github/workflows/GenerateSnake.yml
```

```yaml:GenerateSnake.yml
name: GenerateSnake
on:
  workflow_dispatch:
  schedule:
    - cron: "0 1 * * *"

jobs:
  update-repository:
    name: Update this repo's README with repository_owner
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: Checkout
        uses: actions/checkout@v2
      - name: Generate Snake
        uses: Platane/snk/svg-only@v3
        id: snake-gif
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            ./img/snake.svg
            ./img/snake-dark.svg?palette=github-dark
      - name: Push to GitHub
        uses: EndBug/add-and-commit@main
        with:
	  # ブランチ名はデフォルトブランチ名にする(main or master)
          branch: main  
          message: ':rocket: Update'
```

READMEを更新します。
```md:README.md
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake.svg">
</picture>
```

これで完了です! 
pushして更新すると、該当リポジトリで早速確認できると思います。

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/obregonia1/obregonia1/master/img/snake.svg">
</picture>

簡単で面白いので、ぜひ。