Zenn
🏆

GitHubのプロフィールをカッコよくする方法① GitHub Readme Stats, Github Profile Trophy編

2021/07/12に公開
GitHub
tech

はじめに

皆様、GitHubのプロフィール画面って編集出来るのご存知ですか？
私はこないだ先輩から聞いて知りました。
すでに知っている方も多いでしょうが、まだ知らないという方や、調べるのがめんどくさい・・・。
という方のために、私なりにまとめてみます。

ゴール

Before

これが

After

こうなる。

ちょっとエンジニアらしくなりましたね？
数値が低いとこは触れないでください・・・。

では早速やっていきます。

今回使用したライブラリ

今回使用するのは下記の2つです。

初期設定

今回は自分のGitHubのREADMEを編集していくことになります。
READMEがまだ無いよという方はこちらの公式のプロフィールの README を追加するを参考に作成ください。
とても分かりやすく書いてありましたので、ここでは説明せず進みます。

https://docs.github.com/ja/github/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme#adding-a-profile-readme

自分のプロフィールのREADMEを作成して、そこに下記のライブラリのコードを書いていくだけです。
では早速、説明にいきます。

GitHub Readme Stats を使う

こちらを使うと、この部分が作れます。

READMEに使い方が詳しく書いてありますので、詳細はこちらをご覧ください。

まずは左側(Top Languages Card)から作っていきます。

Top Languages Card

使い方はとっても簡単。
こちらのコードのusername={名前}の値に自分のGitHubのusernameを入れるだけ！簡単！
{}も消してください。

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username={名前}
)](https://github.com/anuraghazra/github-readme-stats)

すると

こちらが表示されます。
オプションでテーマを変えたり短いバージョンに変えたり出来ます。

短いバージョン

名前の後ろに　&layout=compact　をつけるだけです。

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username={名前}&layout=compact)]
(https://github.com/anuraghazra/github-readme-stats)

テーマ変更

名前の後ろに　&theme={テーマ} をつけるだけです。

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username={名前}&layout=compact&theme=onedark)](https://github.com/anuraghazra/github-readme-stats)

テーマは8種類用意されています。

  • dark
  • radical
  • merko
  • gruvbox
  • tokyonight
  • onedark
  • cobalt
  • synthwave
  • highcontrast
  • dracula

の8種類です。
お好きなテーマをお試しください。
READMEに全部のイメージが表示されています。

続いて右側(GitHub Stats Card)にいきます。

GitHub Stats Card

こちらも名前を変更するだけです。

こちらを入力すると

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username={名前})]
(https://github.com/anuraghazra/github-readme-stats)

こちらが表示されます。

テーマ変更

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username={名前}&theme=onedark)](https://github.com/anuraghazra/github-readme-stats)

アイコンをつける

[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username={名前}&theme=onedark&show_icons=true)](https://github.com/anuraghazra/github-readme-stats)

これで左側と右側が出来ました...?

なんか凸凹でブサイクですね。

htmlで整えます。

整える

このコードを

[![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username={名前}&layout=compact&theme=onedark)](https://github.com/anuraghazra/github-readme-stats)
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username={名前}&theme=onedark&show_icons=ture)](https://github.com/anuraghazra/github-readme-stats)

↓
こちらに修正

<p align="left"> 
  <img alt="Top Langs" height="150px" src="https://github-readme-stats.vercel.app/api/top-langs/?username={名前}&layout=compact&show_icons=true&theme=onedark" />
  <img alt="github stats" height="150px" src="https://github-readme-stats.vercel.app/api?username={名前}&theme=onedark&show_icons=ture" />
</p>

すると

綺麗になりました。
高さとかはご自身で調整してください。

最後にトロフィーを作成します。

Github Profile Trophy　を使う

こちらを使うと、トロフィーが表示されます。

こちらも先ほどと同様に名前の変更するだけで使えます！簡単！

[![trophy](https://github-profile-trophy.vercel.app/?username={名前})](https://github.com/ryo-ma/github-profile-trophy)

詳しくはREADMEに記載がございます。

テーマ変更

[![trophy](https://github-profile-trophy.vercel.app/?username={名前}&theme=onedark)](https://github.com/ryo-ma/github-profile-trophy)

テーマもGitHub Readme Statsと同じものが使えます。

ただトロフィーを7個表示させると、２段に分かれてしまうのが、気持ち悪いので、修正します。

整える

[![trophy](https://github-profile-trophy.vercel.app/?username={名前}&theme=onedark&column=7
)](https://github.com/ryo-ma/github-profile-trophy)

オプションで &column=7 を追加しました。
すると、上手く並びました。

完成したコード

<p align="left"> 
  <img alt="Top Langs" height="150px" src="https://github-readme-stats.vercel.app/api/top-langs/?username={名前}&layout=compact&count_private=true&show_icons=true&theme=onedark" />
  <img alt="github stats" height="150px" src="https://github-readme-stats.vercel.app/api?username={名前}&count_private=true&show_icons=true&show_icons=true&theme=onedark" />
</p>

[![trophy](https://github-profile-trophy.vercel.app/?username={名前}&theme=onedark&column=7
)](https://github.com/ryo-ma/github-profile-trophy)

綺麗に並びました。

何度も言いますが{名前}の部分はご自身のGitHubの名前に変更してくださいね。
{}も消すこと。

さいごに

数値はさておき、少しは出来るエンジニア感が出ましたでしょうか。
2つのライブラリどちらも、ライブラリのREADMEにとても詳しく分かりやすく書いてありますので、READMEを見ながら作られる事をおすすめします。テーマとか色々試されると良いと思います。

続編
GitHubのプロフィールをカッコよくする方法② GitHub Profile Summary Cards編もよろしければ見てみてください。

参考

https://github.com/anuraghazra/github-readme-stats
https://github.com/ryo-ma/github-profile-trophy
https://qiita.com/ryo-ma/items/c6298020098cb631f46e

Discussion