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

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

完成系↓

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

準備

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

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

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

画像用リポジトリ作成

mkdir img
touch img/.keep

github actions　を追加する

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

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

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を更新します。

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して更新すると、該当リポジトリで早速確認できると思います。

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