GitHub Readme Statsの全機能を解き放つ
Takashi Yamamoto
Infrastructure Engineer · Leapcell

GitHub Readme Statsは非常に人気のあるGitHubプロジェクトです。
指定されたGitHubアカウントのスター数、総コミット数、主要なプログラミング言語の使用状況などのさまざまな統計情報を動的に取得し、それらを美しいダイナミックカードに変換できます。
これらのカードを自分のGitHubのreadmeに追加することで、よりクールに見せることができます。
GitHub Readme Statsの使用は非常に簡単です。最も簡単な方法は、プロジェクトの公開リンクをreadmeに直接挿入し、いくつかのパラメータを追加することです。これは公式ドキュメントに記載されています。カードの具体的な種類は、公式のDEMOで確認できます。
その背後にある原則は次のとおりです。
readmeにアクセスがあると、このリンクはリクエストを受け取ります。GitHub APIを動的に呼び出して特定のデータを取得し、データに基づいてSVG画像をリアルタイムで生成します。
しかし、この使用法ではGitHub Readme Statsの潜在能力を最大限に引き出すことはできません。
- GitHub Readme Statsは、あなたのプライベートリポジトリの統計データを読み取ることができません。
- 公開リンクは、すべてリクエストを処理する際に同じGitHub APIトークンを使用してデータを取得するため、リクエストボリュームが大きい場合にレート制限がかかり、カードが表示できなくなります。
- 時間が経過し、プロジェクトが変更されるにつれて、元の公開リンクが無効になり、カードの読み込みに失敗する可能性があります。
したがって、ベストプラクティスは、独自のGitHub Readme Statsをデプロイし、上記の Пproblemを回避するために独自のAPIトークンを使用することです。
独自のGitHub Readme Statsをデプロイする方法は? Leapcellを使用できます。
Leapcellは、Node.js、Python、Goなどの複数の言語やフレームワークのデプロイをサポートする強力な機能を備えたWebアプリホスティングプラットフォームです。また、高い無料クォータを提供しており、個人での使用では支払いラインにほとんど触れることはありません。したがって、独自のGitHub Readme Statsのデプロイに非常に適しています。
手順:
1 - GitHub Readme Statsプロジェクトをフォークします。Leapcellは後であなたのリポジトリからコードをプルします。
2 - Leapcellのウェブサイトにアクセスしてアカウントを登録します。登録後、ページ上の「Create Service」をクリックします。
3 - サービス作成ページで、コードソースを選択する必要があります。先ほどフォークしたGitHub Readme Statsを選択します。
4 - Leapcellが自動的にNode.jsプロジェクトであることを認識し、いくつかの基本的なデプロイメントパラメータを事前入力していることがわかります。
プロジェクトの実際の状況に合わせて調整し、次のように変更する必要があります。
Field | Value |
---|---|
Start Command | npm install express |
Build Command | node express.js |
Port | 9000 |
5 - プロジェクトがプライベートGitHubリポジトリにアクセスできるようにするには、GitHubでアクセストークンを作成し、トークンにリポジトリとユーザーの権限を付与することを忘れないでください。
6 - アクセストークンを環境変数PAT_1
に入力します。
7 - 下部にある「Submit」をクリックしてデプロイします。デプロイはすぐに完了し、デプロイメントホームページに戻ります。ここで、Leapcellがドメインを提供していることがわかります。これは、あなたのGitHub Readme Stats専用のアドレスです。
これで、すべての潜在能力が解き放たれたGitHub Readme Statsを使用できるようになりました。注意点として、自分でデプロイしたバージョンのAPIパスは公開リンクとわずかに異なります。アドレスから/api/
を削除する必要があります。
例:
Public link: https://github-readme-stats.vercel.app/api?username=[your name]
Self-hosted: https://xxxxx.leapcell.dev/?username=[your name]
リンクを使用してテストします。https://xxxxx.leapcell.dev/?username=anuraghazra&repo=github-readme-statsにアクセスして、カードが正常に表示されることを確認してください。
おめでとうございます。これで、GitHub Readme Statsのすべての潜在能力が解き放たれました!