GitHub Readme StatsにPrivate Repositoryを反映させる方法
背景
初代ゴリゴリ系エンジニアのpageoです。
Githubアカウントのプロフィール欄をキレイキレイするにあたり、最も有名なGitHub Readme Statsを使っていたのですが、
「Private Respositoryの内容を反映するにはどうした良いのや、、、」と四苦八苦してしまったので、同じ悩みを持つ方のために記事を作成しました。
GitHubProfileとは
そもそもGitHubProfileとはなんぞや?という方は、以下の記事がわかりやすいと思うので参照してみてください。
本題
Private Repositoryを反映させる
まずはGitHub Readme StatsのReadmeの記載の通り、&count_private=true
を追記してみます。
GitHub Stats Cardを見てみてもPrivate Repositoryの内容が反映されていないことが確認できます。
いろいろググってみると、Private Repositoryを反映させる方法が議論されていました。
There is no way we could see your personal repositories data. We can only see what GitHub provides.
Although you can try to self host with your own personal access token that might work:
https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance
意訳すると、「セキュリティ上、APIから個人のrepositoryデータを見れないので、リンク先の説明通りにセルフホストして自分のAPI作ってちょ。」とのこと。
ReadmeにAPIをセルフホストする方法が記載されているので、記載通りに試していきます。
(Readmeに詳細な手順が載っているので、ここでは割愛します)
APIのセルフホストが完了したら、![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&count_private=true)
のドメイン(github-readme-stats.vercel.app)を、セルフホストしたドメインに書き換えます。
※セルフホストしたドメインはVercel管理画面から確認できます(Overview→Project→Production Deploymentで該当のDomainを確認する)
ドメインを書き換えた上で再度GitHub Stats Cardを見てみると、ちゃんとPrivate Repositoryの内容が反映されているのが確認できます
Top Languages Cardの方も、同様にドメインを変更すればPrivate Repositoryの内容が反映されます
それでも反映されない場合は、Cacheが原因かもしれないので数時間経過してから確認してみてください。
ReadmeにもCacheについて記載があるので、ご確認ください
ForkしたRepositoryを反映させる
「Top Languages CardにForkしたRepositoryの内容も反映させたいなあ」と思われた方もいると思うので、以下にその方法を記載します
ググってみると、こちらも解決策が議論されていました
You can also modify the query (src/fetchers/top-languages-fetcher.js) to exclude a certain type of repositories, for example, to exclude archived ones you would use "isArchived: false", the same way the forked repositories are currently excluded.
意訳すると「ForkしたGitHub Readme Statsのコードをいじれば色々できるで」とのこと。
実際にコードを以下のようにいじって、Vercelに再デプロイしてみます。
(isFork
をtrue
に変更)
~
user(login: $login) {
# fetch only owner repos & not forks
repositories(ownerAffiliations: OWNER, isFork: true, first: 100) {
nodes {
name
languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
~
Top Languages Cardをみてみると以下のようにしっかり反映されているみたいです
Before
After
ForkしたRepositoryの言語を、あたかも自分が今まで触ってきたみたいに表示できてしまいます!(セコい)
まとめ
今後も定期的にプロフィールをキレイキレイしていき、キレイキレイ系エンジニア目指していきます。
参考
Discussion