GitHubのプロフィールページで生やした草をヘビに食べさせる

こんな感じ

よく見ると可能な限り色の薄い草から順に食べていってますね〜面白い！

プロフィール用のリポジトリを作る

自分のアカウント名と同名のリポジトリをつくるとプロフィールをカスタマイズできるようになります

Managing your profile README - GitHub Docs

画像用のディレクトリ作成

$ mkdir img
$ touch img/.keep

GitHub Actions を追加

.github/workflows というディレクトリを作成し以下のファイルを追加します

$ mkdir -p .github/workflows
$ vi GenerateSnake.yml

.github/workflows/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>

たったこれだけ！

おまけ

ついでにやったカスタマイズの紹介

Zennに投稿した最新記事を表示する

gautamkrishnar/blog-post-workflow このworkflow を使ってGitHub Actions で最新記事の取得と更新をやる

GitHub Actions を追加

$ vi .github/workflows/blog-post-workflow.yml

blog-post-workflow.yml

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 1 * * *'
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://zenn.dev/<アカウント名>/feed"

ちなみにzenn に限らずxml 形式で吐き出しているブログなどでも大丈夫です

README に追記

さきほどのREADME に以下を追記すると自動で更新してくれます

README.md

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

表示記事数とか色々 カスタマイズ もできます

参考
https://zenn.dev/spiegel/articles/20200922-blog-post-workflow

色々表示する

GitHub Profile Readme Generator で使ってる言語、技術などを入力するとリッチな自己紹介的なやつをマークダウンに吐き出してくれるのでそのままREADME に貼り付けるだけ

参考
https://zenn.dev/t_keshi/articles/instant-github-profile

最終的にこんな感じになりました！

ビッグシャリラ

某リポジトリにPR送ったら英語で文章書いたのに全部中国語でコメント返してくれて人がいて、なんだこいつは〜と思ってプロフィール見てみたら例のヘビのやつが載せてあってそこで初めて存在を知りました
謝謝、王叨叨！