Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

GitHubのプロフィールをかっこよくする方法を解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20211230102744p:plain

おはようございます。Shotaです。

今回の記事では、GitHubのプロフィールを設定する方法を簡単に解説します。


はじめに

GitHubの自分のアカウントの統計情報を表示してくれるGitHub Readme Statsを活用して、GitHubプロフィールをかっこよくする方法を詳細に解説します。

以下のように、GitHubプロフィールの上部に統計情報を表示できるようになります。

f:id:ShotaNukumizu_1000:20220224060727p:plain

動的に生成できる統計情報

GitHub Readme Statsでは、3つの統計情報を動的に生成できます。結果はsvg形式で返却されるので、Markdownでは画像URLとして表示できます。

以下は、私のアカウントであるshota-nukumizuを活用して動的に生成した例になります。

獲得したStarの数、コミット数やプルリク、Issueなどを全て表示してくれます。

https://github-readme-stats.vercel.app/api?username=shota-nukumizu

Shota's GitHub Stats

自分のアカウント内にあるプロジェクトに使われている上位5つの言語の種類とその割合を表示してくれます。

Shota's Github Languages

自分のアカウントにあるプロジェクトを表示してくれます。引数repoを指定することで、具体的なプロジェクトを出力できます。

さらに引数show_ownerリポジトリのOwnerを表示できます。

Readme Card

共通オプション

テーマを変更するとき、引数themeを使います。

![Shota's Github Languages](https://github-readme-stats.vercel.app/api/top-langs/?username=shota-nukumizu&theme=vue-dark)

Shota's Github Languages

テーマは20個以上も用意されているので、Available Themesをチェックしてください。

GitHubプロフィール

以下のような手順でリポジトリとREADME.mdを作成することで、GitHubプロフィールの表示をかっこよくさせられます。

  1. GitHubアカウント名と同じ名前のリポジトリを作成(私の場合はshota-nukumizuというリポジトリを作成)
  2. 1.で作成したリポジトリにREADME.mdを付け加える
  3. 2.で作成したREADME.mdにGitHubプロフィールに表示したい内容にする

▼完成画像(多少別の素材もありますが...)

f:id:ShotaNukumizu_1000:20220224060744p:plain

まとめ

今回の記事では、GitHub Readme Statsを活用してGitHubのプロフィールをかっこよくする方法を解説しました。興味のある方はぜひ公式のREADMEをチェックしてみるといいでしょう。

個人的には、これを使ってみてけっこう満足できました。理由は以下の通りです。

  • ポートフォリオサイト作成にも使えるから
  • GitHubの自己紹介をよりスタイリッシュなものにできるから

今回の記事はこれで終了です。

参考サイト

zenn.dev

qiita.com