Githubのプロフィールをカスタマイズしてみよう！【おすすめライブラリ紹介】

<!-- Githubのプロフィールをカスタマイズしてみよう -->

# はじめに

今回は、Githubのプロフィール(README.md)をカスタマイズする方法を紹介します。

Githubのプロフィールをカスタマイズすると気分が上がりますし、自分のスキルや興味をアピールすることができます。

また、contribution数などによってステータス
が変わるので、Githubを使う(開発を行う)モチベーションにもなります。

興味のある方は、ぜひカスタマイズしてみてください！

## Githubのプロフィールをカスタマイズする方法

自分のGithubのプロフィールをカスタマイズするためには、リポジトリに`README.md`を作成する必要があります。
その方法についてはGithubの公式がわかりやすいので、そちらを参考にしてください。

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

以降は、基本的にこのREADME.mdを使っていきます。

## プロフィールのカスタマイズおすすめライブラリ

### [github-profile-trophy](https://github.com/ryo-ma/github-profile-trophy)

Githubのコミット数やPR数などに応じてトロフィーを表示することができるライブラリです。

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

基本的な使い方は、READMEに以下のコードを貼り付けるだけです。
```md
[![trophy](https://github-profile-trophy.vercel.app/?username={ここは自身のユーザーネームに変更)](https://github.com/ryo-ma/github-profile-trophy)
```

Githubを使えば使うほどトロフィーが増えていくので、やり込み癖のある方は特におすすめです！

公式のREADMEにカスタマイズの方法がたくさん載っていますので、そちらを参考にして自分好みのカスタマイズをしてみましょう！

https://github.com/ryo-ma/github-profile-trophy

### [github-profile-views-counter](https://github.com/antonkomarev/github-profile-views-counter)

自分のプロフィールが表示された回数をカウントしてくれるバッジです。

```md:README.md
![](https://komarev.com/ghpvc/?username=自身のユーザーネーム)
```

![スクリーンショット 2024-12-25 22.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/01356324-3b21-2aba-ca9e-b1a8e282f093.png)


デフォルトだとこんな感じ。
このライブラリもまた色々とデザインのカスタマイズができるので、公式をごらんください。

https://github.com/antonkomarev/github-profile-views-counter

### [Github Like Badge for Qiita](https://qiita-badge.apiapi.app/)

Qiitaのポスト数、コントリビュート数、フォロワー数をバッジで表示することができます。

下記のサイトで自分のQiitaアカウントのユーザーネームを打ち込むとマークダウンを生成してくれるので、それをそのままREADMEに貼り付けるだけです。簡単！

https://qiita-badge.apiapi.app/

![スクリーンショット 2024-12-25 22.21.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/05cd983d-a96b-9b6a-b1bd-c8357f3b4bec.png)

### [github-readme-stats](https://github.com/anuraghazra/github-readme-stats)

よく見かける、GitHubアカウントの活動履歴からランクを作成してくれるライブラリです。

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&hide=contribs,prs)

```md
![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username={自身のユーザーネーム}&hide=contribs,prs)
```

こちらも例にもれず、スタイルなどのカスタマイズがかなり豊富なので公式を覗いてみてください。

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

### [readme-typing-svg](https://github.com/DenverCoder1/readme-typing-svg)

指定した文字列を、実際にタイプするかのように表示してくれるライブラリです。

https://github.com/DenverCoder1/readme-typing-svg

```md
![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Roboto&color=%2336BCF7&lines=Hi,+I'm+hikagami0210)
```
linesの箇所に表示させたい文字列を入れます。
+でつなぐことで、空白を+部分に挿入することができます。

### [skill-icons](https://github.com/tandpfun/skill-icons)

自分の得意としている言語やフレームワーク、技術のロゴを表示することができます。

対応しているロゴは以下から確認してください。

https://github.com/tandpfun/skill-icons#icons-list

![スクリーンショット 2024-12-25 22.41.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/6ff07467-4116-f696-149c-bead6ba8afc8.png)

```md
[![My Skills](https://skillicons.dev/icons?i=flutter,dart,firebase,react,typescript)](https://skillicons.dev)
```

この例では、flutter,dart,firebase,react,typescriptを指定しています。

### [blog-post-workflow](https://github.com/gautamkrishnar/blog-post-workflow)

RSSフィードを登録して、直近で投稿した技術記事などのリストを自動で作成&定期実行することができます。

![](https://user-images.githubusercontent.com/8397274/88047382-29b8b280-cb6f-11ea-9efb-2af2b10f3e0c.png)

やりかたはこれまでと違い、少々手間がかかりますが公式リポジトリに載っている手順書がかなりわかりやすいので、それ通りポチポチしていけばすぐにできると思います。

↓自分のQiitaでやってみた結果です。しっかり表示されてる！

![スクリーンショット 2024-12-25 22.55.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2778030/0a61883a-7e3b-f960-49a8-0b3e71f3adfc.png)

## おわりに

今回はGithubのプロフィールをカスタマイズしてみようということで、おすすめのライブラリを何個か紹介させていただきました！

見た目だけの話ですが、やはりかっこいいプロフィールができると気分が上がってモチベも上がるので是非やってみてください！

最後までお読みいただきありがとうございました！