Zenn
🥳

GitHubのプロフィールページをカスタマイズする

2021/05/29に公開
GitHub
tech

GitHubのプロフィールページ

GitHubのプロフィールページとは、https://github.com/ユーザ名でアクセスできるページのことです。例えば、私のプロフィールページは、https://github.com/tocoteronでアクセスできます。

READMEを作成

以下のドキュメントの手順に従ってREADMEを作成するとプロフィールページのトップにカスタム情報を表示することができるようになります。Hi there 👋と書いてあるセクションがREADMEによって表示されています。

https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme

手順は以下の通りです。

  1. ユーザ名と同じ名前のパブリックリポジトリを作成
  2. README.mdをリポジトリ直下に作成
  3. プロフィールページに表示したい追加情報をREADME.mdに書き込む

プロフィールページをカスタマイズ

プロフィールページをカスタマイズしているユーザを見てみると以下の2つのサービスがよく使われています。これらは、パラメータを指定したカスタムURLからサーバサイドで画像を生成してくれるサービスです。

  • GitHub Readme Stats
    • GitHubユーザの統計情報を解析してカードを生成
  • Shields.io
    • カスタマイズができて様々な情報を表示可能なバッジを生成

今回は、上記のGitHub Readme Statsを利用してプロフィールページをカスタマイズします。具体的には、以下のような情報が表示されるREADMEを作成します。

GitHub Stats Cardを追加

はじめに、プロフィールの左側のカード画像(GitHub Stats Card)を表示できるようにします。GitHub Readme Stats公式ページにカスタムURLのパラメータに関する仕様が書いてあります。

https://github.com/anuraghazra/github-readme-stats

今回は、以下の条件でGitHub Stats Cardを生成します。

  • 対象ユーザはtocoteron
  • プライベートリポジトリのコミットもカウント
  • アイコン表示
  • draculaテーマ

上記の条件に対応するカード画像のカスタムURLは、以下の通りになります。

https://github-readme-stats.vercel.app/api?username=tocoteron&count_private=true&show_icons=true&theme=dracula

この画像を表示するためには、README.mdに以下の1行を追記します。README.mdは、マークダウン形式であるため、URLをそのまま追記するだけでは画像として表示されません。

![](https://github-readme-stats.vercel.app/api?username=tocoteron&count_private=true&show_icons=true&theme=dracula)

Top Languages Cardを追加

次に、プロフィールの右側のカード画像(Top Languages Card)を表示できるようにします。

今回は、以下の条件でTop Languages Cardを生成します。

  • 対象ユーザはtocoteron
  • コンパクトレイアウト
  • draculaテーマ

上記の条件に対応するカード画像を表示するためには、以下の1行をREADME.mdに追記します。

![](https://github-readme-stats.vercel.app/api/top-langs/?username=tocoteron&layout=compact&theme=dracula)

プレビューを確認

GitHub Stats CardとTop Languages Cardを追加したらプレビューで確認してみましょう。以下のようにしっかりとカードが表示されていれば完成です。もしカードが表示されない場合には、マークダウン記法が正しいか、URLが正しいか確認してください。

プロフィールのレイアウト

ここまでの作業でGitHub Stats CardとTop Languages Cardが表示されるようになりましたが、2つのカードの高さが揃っていない点がとても気になります。そこで、2つのカードの高さを揃えることにします。

結論から示すと以下のようにHTMLタグを利用することで高さを揃えることができます。GitHubのREADME.mdはHTMLタグをパースすることができます。便利ですね。もちろん、この性質を利用して高さ以外にもレイアウトを変更することができます。

<a href="https://github.com/tocoteron">
  <img align="left" height="170px" src="https://github-readme-stats.vercel.app/api?username=tocoteron&count_private=true&show_icons=true&theme=dracula" />
</a>
<a href="https://github.com/tocoteron">
  <img align="left" height="170px" src="https://github-readme-stats.vercel.app/api/top-langs/?username=tocoteron&layout=compact&theme=dracula" />
</a>

上記のHTMLタグをREADME.mdに追記すると以下のように2つのカードの高さが揃います。

Discussion