【2021年6月版】GitHubのプロフィールを盛り盛りにする！？

# GitHubのプロフィールに独自のコンテンツを載せてみよう。

dev.to にてGitHubのプロフィールを素敵にするための記事が載っておりました。

https://dev.to/supritha/how-to-have-an-awesome-github-profile-1969

こちらの記事を参考にGitHubのプロフィールをモリモリにしてみましたので手順をご紹介いたします。

## 基本的な手順

GitHubのプロフィール画面に独自のコンテンツを載せる準備は以下の手順でおこないます。

1. まずGitHubの新規リポジトリを作成します。こちらからどうぞ ⇨　[repo.new](https://github.com/new)
2. リポジトリ名を**GitHubのアカウント名と同じ**名前にします。
2. "Public"にチェックを入れて、公開リポジトリに指定します。
2. "Add a README file"にチェックを入れて、`README.md`を作成させます。
2. "Create Repository"をクリックしてリポジトリの作成する。

以上です！
上記の手順で`github.com/アカウント名`にて表示されるプロフィールの画面に、作成された`README.md`のコンテンツが追加されます。
もちろん`README.md`の中身はGitHub Markdownの形式で記載できますので、ここにいろいろな文章や画像などを載せればオリジナルのプロフィールが作成可能です。

## プロフィールのを彩るガジェット

プロフィールの`README.md`にて表示できるような様々なガジェットが公開されていますので以下にご紹介します。

### 1. GitHub README Stats

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

リポジトリやコミットの状況などのStats情報を以下のようなカードとしてSVGを生成してくれます。

![https-github-readme-stats-vercel-app-api-username-anuraghazra.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/fa8692b9-c7b1-135d-f545-1faa6be055cc.png)

Markdownにて、

```
[![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=anuraghazra
)](https://github.com/anuraghazra/github-readme-stats)
```
のような記述で上記のようなSVGが生成されます。`username`のパラメタを自分のアカウント名に変更します。

URLのパラメーターにてカスタマイズが可能で、`&show_icons=true&theme=`など付けると様々な配色テーマで生成してくれます。
サンプルは以下のような感じです。
![68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f616e7572616768617a72612f696d6167652f75706c6f61642f76313539353137343533362f6772732d7468656d65735f6c34796e6a612e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/c4775f3c-120d-7549-2704-1badd99295af.png)
各カラーも直接指定可能です。

### 2. GitHub profile Trophy

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

上記のStats情報に似たようなガジェットですがアカウント情報から以下のような"トロフィー"を生成してくれます。

![https-camo-githubusercontent-com-a575f5f00a8bcd492b9fcce7c2c1305139306392e4b2d96479fa6a02b4758646-68747470733a2f2f6769746875622d70726f66696c652d74726f7068792e76657263656c2e6170702f3f757365726e616d653d72796f2d6d6126636f6c756d6e3d362672616e6b.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/a439583f-6bd7-8504-a864-4d1bb967d193.png)

Markdownでは以下のように記述します。

```
[![trophy](https://github-profile-trophy.vercel.app/?username=ryo-ma)](https://github.com/ryo-ma/github-profile-trophy)
```
こちらも`username`のパラメタを自分のアカウント名に変更します。
また`&theme=`で配色テーマの指定や`&row=2`、`&column=2`などでレイアウトのカスタマイズなどが行えます。
そのほかのオプションもモリモリです。

### 3. GitHub streak

http://github-readme-streak-stats.herokuapp.com/demo/

以下のようなアカウントの"継続性"についてのStats情報を表示してくれます。

![GitHub-Readme-Streak-Stats-Demo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/335150/9e3b7de3-54b0-b793-3148-74ad947decdc.png)

こちらのMarkdown用のURLなどは上記のサイトで生成可能です。
配色テーマや線の色などカスタマイズ可能です。

### 4. 画像

画像は同じリポジトリにアップロードすれば相対パスで指定可能です。あとはMarkdownの画像指定でOKです。

```
![タイトル・代替テキスト](画像の相対パス・ファイル名)
```

またサイズ指定したい場合は、`<img src="画像の相対パス・ファイル名">`タグで`width`、`height`を指定するようになります。

### 5. テキスト・コンテンツの並び

Markdownの中に、一部のHTMLは直書きできます。
水平方向のテキストやコンテンツの並びを調整したい場合は`<p align="center">`などと指定できます。

```
<p align="center">
センターテキスト
</p>
```
などでコンテンツのセンタリングができます。

## というわけで

自分のプロフィールをゴリゴリにしてみました。

https://github.com/yoshinori-koide

GitHubのプロフィールでもいろいろ遊べますね〜！
ちなみにプロフィールの横顔アイコンは、↓のサービスを使ってみました。

https://charat.me/profile/create/

こちらもスゴイ。めっちゃいろいろできる。これだけで時間泥棒です。

というわけで本日は以上です。