24
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

GitHub Readme StatsをVercelにデプロイする

24
Last updated at Posted at 2025-12-06

この記事はComputer Society Advent Calendar 2025の6日目の記事です。

5日目

この記事

7日目

はじめに

突然ですが,GitHub でユーザープロフィールを見ているときにこのようなグラフを見たことはありますか?

image.png

もしかしたら,あなた自身もプロフィールにこのようなグラフを表示させているかもしれません.

このようなグラフを表示できるプログラムにはいろいろ種類があるものの,そのメジャーなもののひとつである GitHub Readme Stats が今月の初めから利用できない状態となっています.

利用できない というのは少し不正確な表現ですが,実際に多くのユーザーのプロフィールでは以下のように代替テキストが表示されてしまっています.

image.png

私はこの現象に12月1日に気づき,一昨日(12月4日)に直し方を投稿したところ反響が大きかったので,この現象が発生した経緯やVercelにデプロイする方法などを記事にまとめました.
(余談ですが Fork のスペルを見事にミスっていて非常に恥ずかしい...)

発生した経緯

当該リポジトリの Issue でのメンテナーの Alexandr 氏の説明から,ざっくりとここまでの経緯が見えてきたのでそれを解説します.
なお,説明に登場する Anurag 氏は,このプロジェクトの作者です.

2024年7月19日に Alexandr 氏は以下のように書いています 1

Hey guys! All this time the public instance was deployed on Vercel on the account with enterprise plan provided for free for Anurag. I just received a message from Anurag that Vercel stopped their OSS sponsorship and account was returned to basic plan, so when the limits was exceeded the deployment was paused. As I understand, at the moment Anurag returned it to work with own money, but in the near future we have to migrate on another cloud provider because Vercel is very expensive. Therefore, deployment on the github-readme-stats.vercel.app will be shutdown soon. For now I recommend you all to deploy your own Vercel instances in order to avoid impact of future shutdown of public instance.

皆さん!これまでパブリックインスタンスは、Anuragに無料で提供されていたエンタープライズプランのアカウントでVercelにデプロイされていました。Anuragから連絡があり、VercelがOSSスポンサーシップを終了し、アカウントがベーシックプランに戻ったため、制限を超過した時点でデプロイが停止したとのことです。私の理解では、現時点ではアヌラグが自己負担で復旧させていますが、Vercelは非常に高額なため、近い将来、別のクラウドプロバイダーへの移行が必要となります。したがって、github-readme-stats.vercel.app へのデプロイは間もなく停止されます。今後のパブリックインスタンス停止の影響を避けるため、皆様には各自でVercelインスタンスをデプロイされることをお勧めします。

今回の問題についても2025年11月25日から Issue がたっており,それに対して Alexandr 氏は以下のように書いています 2

Hi guys. Looks like the services consumption exceeded the configured limits on the Anurag's Vercel account. Basically this issue is a duplicate of #3851. Most likely the outage will persisnt till end of month.

For now I recommend you to deploy own instance using your own API token. This would let you to return the cards into your profile ASAP and avoid the impact of possible future outages.

I hope on your understanding since Anurag pays for the deployment from his own pockets.

皆さん、こんにちは。AnuragのVercelアカウントで設定されたサービス利用制限を超過したようです。基本的にこの問題は#3851の重複です。おそらくこの障害は月末まで継続するでしょう。

当面の間、各自のAPIトークンを使用して独自インスタンスをデプロイすることを推奨します。これにより、カードをプロフィールにできるだけ早く戻すことができ、将来的なサービス停止の影響を回避できます。

Anuragが自腹でデプロイ費用を負担しているため、ご理解いただければ幸いです。

以上の二つをまとめると,2024年7月まではVercelがOSSとしてサポートしていたが,それが停止されてしまった.
その後は Anurag 氏が自腹で負担してくれていたが,設定したリミットに達してしまったということです.

11月26日に月末まで続くと発言されていますが,12月になっても問題は解消しておらず,問題が長期化する可能性もあります.

ということで,Alexandr 氏が推奨しているように 自分自身のAPIトークンを使用してインスタンスをデプロイしてみましょう

デプロイ手順

リポジトリを Fork する

まずは,公式の GitHub Readme Stats のサイト にアクセスして Fork ボタンを押しましょう.

image.png

Create fork を押すと自分のアカウントにも github-readme-stats という名前のリポジトリができます.

GitHub のアクセストークンを取得する

まず,Account -> Settings -> Developer Settings -> Personal access tokens -> Tokens (classic) にアクセスします.
Generate new token -> Generate new token (classic) を押すとそのトークンでできることを設定できます.
ここで,reporead:user を選択してください.
また,Expiration(有効期限)はデフォルトより長めの9ヶ月などに設定しておいたほうが楽だと思います.
最後に Generate token を押すと token が生成されます.
この token は後で利用するので,忘れずにコピーしておいてください

Vercel と連携する

Vercel を開き,アカウントを持っている場合は Login を押してください.
まだアカウントを持っていない場合は Sign Up を押してアカウントを作成してください.

次に,Add New... ボタンを押し,Project を選択します.
Import Git Repository のところでまだ自分のGitHubアカウントが表示されていない場合は Add GitHub Account からアカウントを追加してください.
アカウントを選択すると github-readme-stats が選べるようになります.

Import を押すとプロジェクトに関する設定ができるので,以下の組み合わせでEnvironment Variables を設定して Deploy を押してください.
また,プロジェクト名は github-readme-stats にしておいてください.

Key Value
PAT_1 先ほど取得した GitHub のアクセストークン
WHITELIST あなたの GitHub のアカウント名

なお,GitHub ではアカウント名以外にも表示名も設定することができますが,ここで入力するのはアカウント名です.

image.png

環境変数の WHITELIST は必ず設定するようにしてください.
これを設定しなかった場合,あなたの Vercel インスタンスの URL を知った他人に勝手に利用され,アカウントの無料利用枠が消費されてしまう可能性があります.

API のドメインを確認する

Vercel のダッシュボード に戻り,Projectsから github-readme-stats を選択して,Domains というボタンを押すと API に利用するドメインが表示されているはずです.

初期状態で設定されているドメインを利用してもいいですし,Add Domain から github-readme-stats.[あなたのアカウント名].vercel.app のようなドメインを追加してそちらを利用してもいいです.

いずれにせよ,利用したいドメインをコピーしておきます.

README に表示する

もし,まだ GitHub で README.md を利用したプロフィールを設定していないなら,自分のアカウント名と同じ名前のパブリックリポジトリを作成します.

自分のアカウント名と同じ名前のパブリックリポジトリの README.md に,以下のように情報を追加します.

![github stats](https://[先ほどコピーしたドメイン]/api/?username=[あなたのアカウント名])
![top langs](https://[先ほどコピーしたドメイン]/api/top-langs/?username=[あなたのアカウント名])

自分の GitHub のプロフィールに戻ると情報が表示されているはずです!

もしうまく表示されない場合には,直接 https://[先ほどコピーしたドメイン]/api/?username=[あなたのアカウント名] にアクセスして画像が表示されるか確認してみてください.

GitHub では画像をキャッシュしているため環境変数の設定ミスなどでうまく表示できなかった場合には,問題を修正しても即座には反映されない場合があります.
直接 URL にアクセスして正しく表示されているのを確認したうえで,しばらく経ってからもう一度 GitHub のプロフィールで見てみてください.

より詳しいカスタマイズの方法はご自身で検索してみてください!

おわりに

今回は、GitHub Readme Stats が表示されなくなった経緯と,Vercel を利用して自分専用のインスタンスを立てる方法を紹介しました.

簡単な手順で復旧できるので,ぜひ試してみてください!

  1. https://github.com/anuraghazra/github-readme-stats/issues/3851#issuecomment-2237316047

  2. https://github.com/anuraghazra/github-readme-stats/issues/4658#issuecomment-3579506913

24
4
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?