<h1 id="%E8%83%8C%E6%99%AF">
<a class="header-anchor-link" href="#%E8%83%8C%E6%99%AF" aria-hidden="true"></a> 背景</h1>
初代ゴリゴリ系エンジニアのpageoです。 
Githubアカウントのプロフィール欄をキレイキレイするにあたり、最も有名なGitHub Readme Statsを使っていたのですが、 
「Private Respositoryの内容を反映するにはどうした良いのや、、、」と四苦八苦してしまったので、同じ悩みを持つ方のために記事を作成しました。
<h1 id="githubprofile%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#githubprofile%E3%81%A8%E3%81%AF" aria-hidden="true"></a> GitHubProfileとは</h1>
そもそもGitHubProfileとはなんぞや？という方は、以下の記事がわかりやすいと思うので参照してみてください。 
<iframe id="zenn-embedded__c675a96ec9326" src="https://embed.zenn.studio/card#zenn-embedded__c675a96ec9326" data-content="https%3A%2F%2Fzenn.dev%2Fyutakatay%2Farticles%2Fkirakira-github-profile" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://zenn.dev/yutakatay/articles/kirakira-github-profile" style="display:none" target="_blank">https://zenn.dev/yutakatay/articles/kirakira-github-profile</a>
<h1 id="%E6%9C%AC%E9%A1%8C">
<a class="header-anchor-link" href="#%E6%9C%AC%E9%A1%8C" aria-hidden="true"></a> 本題</h1>
<h2 id="private-repository%E3%82%92%E5%8F%8D%E6%98%A0%E3%81%95%E3%81%9B%E3%82%8B">
<a class="header-anchor-link" href="#private-repository%E3%82%92%E5%8F%8D%E6%98%A0%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> Private Repositoryを反映させる</h2>
まずはGitHub Readme Statsの<a href="https://github.com/anuraghazra/github-readme-stats" target="_blank" rel="nofollow noopener noreferrer">Readme</a>の記載の通り、<code>&amp;count_private=true</code>を追記してみます。 
<img src="https://storage.googleapis.com/zenn-user-upload/5afa91be3000-20221005.png" alt loading="lazy" class="md-img">
GitHub Stats Cardを見てみてもPrivate Repositoryの内容が反映されていないことが確認できます。 
<img src="https://storage.googleapis.com/zenn-user-upload/68fdce8cd619-20221005.png" alt loading="lazy" class="md-img">
いろいろググってみると、Private Repositoryを反映させる方法が議論されていました。 
<iframe id="zenn-embedded__971bf17ca16ed" src="https://embed.zenn.studio/card#zenn-embedded__971bf17ca16ed" data-content="https%3A%2F%2Fgithub.com%2Fanuraghazra%2Fgithub-readme-stats%2Fdiscussions%2F814%23discussioncomment-325118" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/anuraghazra/github-readme-stats/discussions/814#discussioncomment-325118" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/anuraghazra/github-readme-stats/discussions/814#discussioncomment-325118</a>
<blockquote>
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: 
<a href="https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance" target="_blank" rel="nofollow noopener noreferrer">https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance</a>
</blockquote>
意訳すると、「セキュリティ上、APIから個人のrepositoryデータを見れないので、リンク先の説明通りにセルフホストして自分のAPI作ってちょ。」とのこと。
ReadmeにAPIをセルフホストする方法が記載されているので、記載通りに試していきます。 
(Readmeに詳細な手順が載っているので、ここでは割愛します) 
<iframe id="zenn-embedded__39fbc0d12b60a" src="https://embed.zenn.studio/card#zenn-embedded__39fbc0d12b60a" data-content="https%3A%2F%2Fgithub.com%2Fanuraghazra%2Fgithub-readme-stats%23deploy-on-your-own-vercel-instance" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance</a>
APIのセルフホストが完了したら、<code>![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&amp;count_private=true) </code>のドメイン(github-readme-stats.vercel.app)を、セルフホストしたドメインに書き換えます。 
※セルフホストしたドメインは<a href="https://vercel.com/" target="_blank" rel="nofollow noopener noreferrer">Vercel管理画面</a>から確認できます(Overview→Project→Production Deploymentで該当のDomainを確認する) 
<img src="https://storage.googleapis.com/zenn-user-upload/7eca93e99369-20221005.png" alt loading="lazy" class="md-img">
ドメインを書き換えた上で再度GitHub Stats Cardを見てみると、ちゃんとPrivate Repositoryの内容が反映されているのが確認できます 
<img src="https://storage.googleapis.com/zenn-user-upload/e73a37b2a15c-20221005.png" alt loading="lazy" class="md-img">
Top Languages Cardの方も、同様にドメインを変更すればPrivate Repositoryの内容が反映されます
それでも反映されない場合は、<a href="https://github.com/anuraghazra/github-readme-stats/discussions/1618#discussioncomment-2255659" target="_blank" rel="nofollow noopener noreferrer">Cacheが原因かもしれない</a>ので数時間経過してから確認してみてください。 
Readmeにも<a href="https://github.com/anuraghazra/github-readme-stats#deploy-on-your-own-vercel-instance:~:text=cache_seconds%20%2D%20set%20the%20cache%20header%20manually%20(min%3A%207200%2C%20max%3A%2086400).%20Default%3A%2014400%20seconds%20(4%20hours)." target="_blank" rel="nofollow noopener noreferrer">Cacheについて記載がある</a>ので、ご確認ください
<h2 id="fork%E3%81%97%E3%81%9Frepository%E3%82%92%E5%8F%8D%E6%98%A0%E3%81%95%E3%81%9B%E3%82%8B">
<a class="header-anchor-link" href="#fork%E3%81%97%E3%81%9Frepository%E3%82%92%E5%8F%8D%E6%98%A0%E3%81%95%E3%81%9B%E3%82%8B" aria-hidden="true"></a> ForkしたRepositoryを反映させる</h2>
「Top Languages CardにForkしたRepositoryの内容も反映させたいなあ」と思われた方もいると思うので、以下にその方法を記載します
ググってみると、こちらも解決策が議論されていました 
<iframe id="zenn-embedded__2c1b2d05f697a" src="https://embed.zenn.studio/card#zenn-embedded__2c1b2d05f697a" data-content="https%3A%2F%2Fgithub.com%2Fanuraghazra%2Fgithub-readme-stats%2Fissues%2F174%23issuecomment-687940422" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/anuraghazra/github-readme-stats/issues/174#issuecomment-687940422" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/anuraghazra/github-readme-stats/issues/174#issuecomment-687940422</a>
<blockquote>
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.
</blockquote>
意訳すると「ForkしたGitHub Readme Statsのコードをいじれば色々できるで」とのこと。 
実際にコードを以下のようにいじって、Vercelに再デプロイしてみます。 
(<code>isFork</code>を<code>true</code>に変更)
<div class="code-block-container">
<div class="code-block-filename-container"> src/fetchers/top-languages-fetcher.js</div>
<pre class="language-js"><code class="language-js">~
 user(login: $login) {
 # fetch only owner repos &amp; not forks
 repositories(ownerAffiliations: OWNER, isFork: true, first: 100) {
 nodes {
 name
 languages(first: 10, orderBy: {field: SIZE, direction: DESC}) {
~
</code></pre>
</div>Top Languages Cardをみてみると以下のようにしっかり反映されているみたいです 
Before 
<img src="https://storage.googleapis.com/zenn-user-upload/1c8871959916-20221005.png" alt loading="lazy" class="md-img">
After 
<img src="https://storage.googleapis.com/zenn-user-upload/e9cab3e06a56-20221005.png" alt loading="lazy" class="md-img">
ForkしたRepositoryの言語を、あたかも自分が今まで触ってきたみたいに表示できてしまいます!(セコい)
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
今後も定期的にプロフィールをキレイキレイしていき、キレイキレイ系エンジニア目指していきます。
<h1 id="%E5%8F%82%E8%80%83">
<a class="header-anchor-link" href="#%E5%8F%82%E8%80%83" aria-hidden="true"></a> 参考</h1>
<iframe id="zenn-embedded__64b8f2e2b02b9" src="https://embed.zenn.studio/card#zenn-embedded__64b8f2e2b02b9" data-content="https%3A%2F%2Fgithub.com%2Fpage-o%2Fpage-o" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://github.com/page-o/page-o" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/page-o/page-o</a>

GitHub Readme StatsにPrivate Repositoryを反映させる方法

Discussion