GitHubのプロフィールに表示されるREADMEをいい感じにする
人に見てもらう意味でも、自分を客観的に見つめる意味でも、技術ポートフォリオをアップデートしていく作業は大切だなと思う。でも改めて自分のスキルや技術スタックをまとめるのは色々面倒。
割と今更ですが、今回はサクッとGitHubのプロフィールのトップに表示されるREADMEをいい感じにします。こんな感じになった。(一応)バックエンドエンジニアなのにHTMLが多くなってしまうの、悔しい。
リポジトリとREADMEを準備する
何はともあれ、READMEとそれを置いておくリポジトリが必要。公式ドキュメントにも書いてあるように、
を実行しておけば、自身のプロフィールページ(https://github.com/{username}
)にREADME.md
の内容が表示される。
GitHub Profile Summary Cardsを表示する
こんな便利なActionsを用意してくれている人がインターネットには存在する。
これを先ほど作ったリポジトリに仕込んでおけば、勝手にプロフィールに表示される言語やコミットのスタッツのカード画像を更新してくれる。手順としては、
.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://github.com/vn7n24fzkq/github-profile-summary-cards) [](https://github.com/vn7n24fzkq/github-profile-summary-cards) [](https://github.com/vn7n24fzkq/github-profile-summary-cards)
まとめ
- GitHub Actions、最高
- ダークテーマ、最高
参考リンク
simple-minds-think-alike.hatenablog.com
今回作ったリポジトリ