🌈

GitHub Readme Stats が使えなくなっていたので自前で建てる

に公開
Vercel
githubreadmestats
tech

要旨

Github のアカウントプロフィールの Readme によく使われている
GitHub Readme Stats を自前で Hosting しました。
こういう↓のを表示するための svg を返すやつです

理由については Github Readme Stats の Readme をご覧ください。
また、ホスティング環境は安直に Github Readme Stats が元々ホストされていた Vercel を選びました。

やったこと

  1. Github リポジトリの PAT(Personal Access Token) を発行する
    ※プライベートリポジトリほぼ無いので FineGrainedToken にしました
  2. Vercel に Github Readme Stats の Fork をデプロイ(ドキュメント中の Deploy ボタン押せばすぐできる)
  3. Deploy のうち環境変数に PAT_1 に 1. で発行した PAT を設定する

以下は画像付き解説です。細かい手順が分からなくなった方はご参考までに。
ただ、時間が経つと Github や Vercel の UI 変わってしまうと思うのでその辺はご了承ください。

PAT 発行

🔴PAT は一度しか表示されないので表示した段階でコピーなりどこかに転記なりしましょう🔴
Github Readme Stats の手順通りです。
Account -> Settings -> Developer Settings -> Personal access tokens -> Fine-grained tokens をクリックすると作成画面に移るので、　token 名と期限設定して発行しましょう。token名は任意なので適当に付けましょう。

🔴PAT は一度しか表示されないので表示した段階でコピーなりどこかに転記なりしましょう🔴

Vercel に fork をデプロイ

On Vercel の左下の ▲ Deploy を押すと Vercel に移ります。ログイン or Vercel のアカウントが無ければ新規作成しましょう。

既にアカウントがあってログイン済状態でクリックすると以下のようになります。

このままいったん fork分 をデプロイまでしてしまいましょう。(※この時点ではまだ完了しません)

次に、環境変数に先ほどの PAT を設定しないといけないので
先ほど作成したプロジェクトで Setting->Environment Variavle を開きましょう↓

keyに PAT_1 を、value に先ほど作成した PAT を入力して、
[Add Another] ボタンで1行追加してから WHITELIST に自分の Github ユーザー名を入力して、
忘れずに右下の Save を押しましょう。

これでセルフホストが完了したので、元々 Github Readme Stats を使って記載していたプロフィールの github-readme-stats.vercel.app の部分を自分のデプロイした Domains に差し替えれば完了です！

終わりに

学生さんや駆け出しエンジニアの中で流行りがちな Github Profile だと思ってますが、
そういう方々がこのセルフホスティングまでたどり着けるんだろうか...と思って解説記事書いてみました。まぁでも最近の学生さんとかかなりレベル高いらしいのでこのぐらいなら自力でやれちゃうんですかね 🤔...w

Discussion