こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、GitHubのプロフィールをかっこよくカスタマイズする方法について解説します。
今回、カスタマイズしたGitHubプロフィール
まずは、今回、カスタマイズしたGitHubプロフィールをお見せします。
トロフィーや、グラフなどを導入している人もよく見かけますが、
私の場合は、上記のような基本的な説明と、使える技術が1目見てわかるようなシンプルな構成にしてみました。
モデルケースを見つけて、どんなプロフィールにしたいのか考える
手始めに、どんなプロフィールにしたいのかを考えるべきなのですが、何も素材がないところから考えるのも大変です。
そこで、まずは、GitHubのプロフィールをカスタマイズしているモデルケースを見つけます。
モデルケースを見ながら、どんなプロフィールにしたいのか考えて、いいと思うパーツを導入していきます。
今回は、次の3人を参考にしました。
プロフィールに導入するツールを試す
モデルケースを見ながら、プロフィールをカスタマイズするツールをいろいろ試してみましょう。
1. Most Used Languages(よく利用している言語)
次のようなMarkdownの実行で、Most Used Languages(よく利用している言語)を表示することができます。
username=の箇所は、ご自身のGitHub User名を指定してください。
上記の出力は、次のとおり。
横長タイプのコンパクト表示の場合は、次のようにします。
上記の出力は、次のとおり。
2. Skill Icons
こちらのSkill Iconsは、次のように、https://skillicons.dev/iconsのURLにクエリパラメーターで、Skill名を渡すと、Iconが表示されるようになっています。
(複数のSkill名を出力する場合は、カンマ(,)区切りです)
上記の出力は、次のとおり。
どんなSkill Icon が使えるかは、次のPageをご確認ください。
3. グラフ表示
今回は、不採用にしましたが、グラフ表示などには、次のようなツールも使えます。
GitHubのユーザー名を入力するだけで、グラフ表示をしてくれるので、こういったものを活用するのもありだと思います。
GitHubでカスタム・プロフィールを作成する手順
1.ユーザー名と同じ名前のリポジトリを作成して、README.mdを作成する
ユーザー名と同じ名前のリポジトリを作成して、README.mdを作成する
2. 作成したREADME.mdをUpする
ユーザー名と同じ名前のリポジトリを作成したら、そこにREADME.mdを作成するだけで、それが自分のGitHub AccountのTop画面に表示されるようになります。
今回、作成したREADME.mdの内容は、次のとおりです。
# About Me
1. I'm a web frontend and backend developer from Japan
2. My favorites are React, TypeScript, Docker, LangChain,ShellScript
3. You can find my Tech Blog at [No Change No Life I/O](https://masanyon.com/)
4. You can find my Zenn Blog [here](https://zenn.dev/manase)
## Programming Languages
<img src="https://skillicons.dev/icons?i=html,css,js,typescript,python,php," /> <br /><br />
## Frameworks and Library
<img src="https://skillicons.dev/icons?i=react,next,vue,nuxt,nodejs,express,flask,fastapi,laravel,wordpress" /> <br /><br />
## DB and Dev Tools etc
<img src="https://skillicons.dev/icons?i=mysql,postgresql,docker,git,github,vscode,linux,aws,azure,figma,nginx" /> <br /><br />
まとめ
今回は、GitHubのプロフィールをカスタマイズする方法について解説しました。
GitHubのプロフィールをカスタムするのは、簡単で楽しいものなので、ぜひ試してみてください。
個人で、Blogもやっています、よかったら見てみてください。
注意事項
この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。
求む、冒険者！
AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨
詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。
AIQ 株式会社 に所属するエンジニアが技術情報をお届けします。 ※ AIQ 株式会社 社員による個人の見解であり、所属する組織の公式見解ではありません。 Wantedly: wantedly.com/companies/aiqlab
Discussion