はじめに
GitHub を開いたときに、一番上にある自己紹介エリア。
他のエンジニアのように“かっこいいプロフィール”を作りたい!
そんな方向けに GitHub Profile の作り方を解説します。
この記事では以下が分かります👇
- GitHub Profile README の作り方
- GitHub Profile README の内容例
- おすすめカスタムカード(Stats / Top Langs / Graph)
1. GitHub Profile を作る手順
Step 1:自分の GitHub アカウント名と同じ名前のリポジトリを作る
- GitHub を開く
- 右上の「+」→「New repository」
- Repository name に自分のアカウント名と同じ文字を入力
- 「Public」に設定
- 「Add a README file」にチェック
- Create repository を押す
すると、プロフィールのトップに README が表示されます。
2. Profile README に書ける内容の例
- 自己紹介
- 使用技術
- プロジェクトリンク
- スキルカード(GitHub Stats)
- バッジ
- 見た目を整える枠組み(HTML / Markdown)
3. おすすめの統計カード(GitHub Readme Stats)
▼ GitHub Streak(連続コミット)
<img src="https://github-readme-streak-stats.herokuapp.com/?user=name&theme=react&background=0d1117&ring=39ff14&fire=00eaff&currStreakNum=39ff14&sideNums=00eaff&currStreakLabel=39ff14&sideLabels=00eaff&dates=00eaff&border_radius=10" height="160" />
▼ GitHub Stats(コミット・リポジトリなど)
ブルー寄りのクールデザイン
<img src="https://github-readme-stats.vercel.app/api?username=name&show_icons=true&include_all_commits=true&bg_color=0d1117&title_color=00eaff&text_color=a8e1ff&icon_color=39ff14&hide_border=false" height="160" />
▼ Top Languages(よく使う言語)
<img src="https://github-readme-stats.vercel.app/api/top-langs?username=name&layout=compact&card_width=420&langs_count=6&bg_color=0d1117&title_color=00eaff&text_color=a8e1ff&hide_border=false" height="160" />
※必ずusername=nameのnameは自分の名前にしてください!
4. カードが表示されないときの対処法
- URL にスペルミスがある
- GitHub Stats のサーバー側エラー
- height や背景色の指定で見えなくなる
- private リポジトリのコミットを含めようとして
Fetching errorになる - 透明背景(bg_color=00000000)が環境によって表示されない時がある
→ 特に「急に表示されない」時は Vercel 側のエラーも多いので、時間を置くと直ります。
おわりに
- GitHub Profile README は アカウント名と同じリポジトリを作るだけで作成できる
- コードを貼るだけで Stats やグラフを作れる
- 色を統一すると一気に見栄えが良くなる
あなたのスキルや個性を表現できるので、ぜひカスタマイズしてみてください!