GitHubのプロフィールに表示されるREADMEをいい感じにする

人に見てもらう意味でも、自分を客観的に見つめる意味でも、技術ポートフォリオをアップデートしていく作業は大切だなと思う。でも改めて自分のスキルや技術スタックをまとめるのは色々面倒。

割と今更ですが、今回はサクッとGitHubのプロフィールのトップに表示されるREADMEをいい感じにします。こんな感じになった。(一応)バックエンドエンジニアなのにHTMLが多くなってしまうの、悔しい。

github.com

イケてる感じになった

リポジトリとREADMEを準備する

何はともあれ、READMEとそれを置いておくリポジトリが必要。公式ドキュメントにも書いてあるように、

• 自分のユーザー名と同じ名前のパブリックリポジトリを作る(odmishien/odmishien みたいな感じ)
• リポジトリのルートに README.md を置く

を実行しておけば、自身のプロフィールページ(https://github.com/{username})にREADME.mdの内容が表示される。

GitHub Profile Summary Cardsを表示する

こんな便利なActionsを用意してくれている人がインターネットには存在する。

github.com

これを先ほど作ったリポジトリに仕込んでおけば、勝手にプロフィールに表示される言語やコミットのスタッツのカード画像を更新してくれる。手順としては、

.github/workflows 以下に GitHubActionsを定義するyamlファイルを作成

• secrets.GITHUB_TOKEN や github.repository_owner は特に何もしなくても Actions側で読んでくれる(便利!!)
• カード画像の生成タイミングはcronを仕込めるので、お好みのタイミングを指定しておく
• github-profile-summary-cardsのREADMEにも書いてあるが、GitHub側のキャッシュが残ったりするのでcronで仕込んだ時間と表示されるプロフィール画面とで少しタイムラグが生じることはあるらしい

gist0ce2d68a7d9de2d166ca0efd55d908b3

Private Repository の情報も必要な場合は secrets に PERSONAL_ACCESS_TOKEN を追加しておく

• Access Tokenは Settings > Developer Setting > Personal access tokens のページで Generate New Token をすればOK
• 権限は repo にフルアクセスをしておけば問題なさそう
• secrets への追加手順は 公式ドキュメントが参考になる

README.md に好みの画像のパスを追加する

• 正しくworkflowが実行されたら、 profile-summary-card-output 以下にカード画像が生成される
• 10種類くらいカラーテーマがあるので好きな色の好きなパーツのパスを指定する

[![](https://raw.githubusercontent.com/odmishien/odmishien/master/profile-summary-card-output/nord_dark/0-profile-details.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
[![](https://raw.githubusercontent.com/odmishien/odmishien/master/profile-summary-card-output/nord_dark/1-repos-per-language.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
[![](https://raw.githubusercontent.com/odmishien/odmishien/master/profile-summary-card-output/nord_dark/2-most-commit-language.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)

まとめ

• GitHub Actions、最高
• ダークテーマ、最高

参考リンク

simple-minds-think-alike.hatenablog.com

今回作ったリポジトリ

github.com