3分できる即席GitHubプロフィール

こんなやつ。

前置き

GitHubプロフィールに関する記事は珍しくはありません。

有名どころの記事だとこんな記事があります。
GitHubProfileのページを可能な限りキラキラさせる方法

だがしかし！

拙者には、とくに素晴らしい実績がない。
だからこの記事の著者のように格好良いトロフィーとかは載っけられない。

「それでも、なんかいい感じのGitHubプロフィールを作りたい...!!」

...ということで、今回は何の実績のない方でも作れる一番シンプルなGitHubプロフィールのレシピです。
カップ麺にお湯を入れて待っている間にできるかもしれません。

ぜひ読みながら一緒にGitHubプロフィールを作ってみてください。

GitHubプロフィールのレシピ

下記のWebサイトにアクセスして必要な項目を全て埋めた後、「GenerateREADME」のボタンを押します。

GitHub Profile README Generator

すると、こんな感じのmarkdownが出力されます。

README.md

<h1 align="center">Hi 👋, I'm ○○○</h1>
<h3 align="center">A passionate developer in Japan</h3>

<p align="left"> <img src="https://komarev.com/ghpvc/?username=hoge&label=Profile%20views&color=0e75b6&style=flat" alt="hoge" /> </p>
<p align="left"> <a href="https://twitter.com/hoge" target="blank"><img src="https://img.shields.io/twitter/follow/自分のアカウント名?logo=twitter&style=for-the-badge" /></a> </p>

- 📝 I regularly write articles on [zenn](https://zenn.dev)

<p><img align="left" src="https://github-readme-stats.vercel.app/api/top-langs?username=hoge&show_icons=true&locale=en&layout=compact" alt="t-keshi" /></p>
<p>&nbsp;<img align="center" src="https://github-readme-stats.vercel.app/api?username=hoge&show_icons=true&locale=en" alt="hoge" /></p>
<p><img align="center" src="https://github-readme-streak-stats.herokuapp.com/?user=hoge&" alt="hoge" /></p>

あとは、GitHubに自分のアカウント名と同じ名前のPublicなリポジトリを作成して、そこにこのMarkdownをコピペするだけです。
たとえば、私はアカウント名がt-keshiなのでt-keshiという名前のリポジトリを作成します。こんな感じです。

もう、完成です！

本当に3分以内に終わったのではないでしょうか。

アレンジ方法

ただこれだけだと、「なんでわざわざ記事にしたん？」と怒られそうな内容ので、
ここからは完成したものにアレンジを加えて、オリジナリティを出して行きます。

アイキャッチ画像を表示する

まず、アイキャッチ画像を足してみます。

画像はcanvaなどで作成するのがおすすめです。
1640✖️924pxくらいの大きめの画像を作成した方が、見栄えがいい気がします。

自分はこんな感じの画像↓を用意しました。

作成した画像は、

![hello-world](./image/hello-world.png)

のようにmarkdown記法で表示するか、もしくは配置やサイズをいじりたい場合は、

<img align="center" width="500" src="./image/hello-world.png" alt="hello-world" />

のようにhtmlで表示するとよさそうです。

ZennやQiitaの記事を表示する

プロフィールに自分の書いた記事を表示するのも、GitHub Profile README Generatorでできます。
手順は非常に簡単です。

①RSS feed URLの欄を埋める

URLは、zennの場合、"https://zenn.dev/自分のアカウント名/feed"という形式で書いてください。
Qiitaの場合は"https://qiita.com/自分のアカウント名/feed"と書けば大丈夫です。

②display latest blogs from your personal blog dynamicallyの欄にチェックを入れる

すると、「download blog-post-workflow.yml」というのが下に出てくるので、クリックしてダウンロードしてください。

③GitHubActionsを設定する

あとは、./github/workflowsのディレクトリにダウンロードしたblog-post-workflow.ymlをぶち込むだけです。
詳しい使い方はblog-post-workflowに載っていますが、読まなくてもわかると思います。

このGitHubActionsは毎時間実行されて、差分があれば更新される仕組みになっています。
待っていれば、

README.md

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

の部分が自動で更新され、

README.md

<!-- BLOG-POST-LIST:START -->
- [非同期処理に疲れた方に、ReactQueryの処方箋](https://zenn.dev/t_keshi/articles/react-query-prescription)
<!-- BLOG-POST-LIST:END -->

のように自分の記事が入ってきます。

ちなみに、blog-post-workflow.ymlのmax_post_countの部分を変更すると、記事を何件プロフィールに表示するかを設定できます。
デフォルトの4件では少ない気もするので、max_post_count: "7"くらいに設定しておくのがおすすめです。

記事の右側に画像を配置する

今追加した投稿記事のリストの右側にスペースが空いているので、画像を配置してみます。
これも簡単です。

README.md

<p><img align="right" width="49%" src="https://github-readme-stats.vercel.app/api/top-langs?username=自分のアカウント名&show_icons=true&locale=en&layout=compact"/></p>

<!-- BLOG-POST-LIST:START -->
- [非同期処理に疲れた方に、ReactQueryの処方箋](https://zenn.dev/t_keshi/articles/react-query-prescription)
<!-- BLOG-POST-LIST:END -->

このときポイントは、画像の横幅を49%に設定することです。
48%でも50%でもなく、49%です。
細かい点ですが、こうすることによって下の画像のように、Pinnedのアイテムと縦のラインが綺麗に揃います。

おわりに

以上です！
即席にしては、なかなかいい感じのプロフィールではないでしょうか。

ご紹介した方法以外にも十人十色のプロフィールがあるはずです。
ぜひ自分だけのGitHubプロフィールを作ってみて下さい。

誤りなどありましたら、ご指摘いただけると嬉しいです。
最後までお読みいただきありがとうございました🙇‍♂️