カレーのライスをtech忘れ

odmishienのtechメモ

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

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

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

github.com

f:id:odmishien:20201020090458p:plain
イケてる感じになった

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

gist0ce2d68a7d9de2d166ca0efd55d908b3

Private Repository の情報も必要な場合は secretsPERSONAL_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