あなたの素敵なGitHubプロフィールを作る方法

素敵なGitHubプロフィールの作り方の表紙画像

もしGitHubが新しい方で、プライベートなリポジトリのみで作業していた場合、GitHubプロフィールがまだない可能性があります。

GitHubプロフィールは、プロフィールを訪れる人に対して基本情報を提供する役割を果たします。しっかりとしたプロフィールを作ることは、オープンソースプロジェクトに貢献し始めて人々があなたに注目するようになった時、特に目立つのに役立つでしょう。

この記事では、自分自身のGitHubプロフィールをどう作るかを紹介します。また、インスピレーションを得る方法も共有します。そして最後に、素敵なGitHubプロフィールを作るためのリソースとコツをお伝えします!

GitHubプロフィールの作成

GitHubプロフィールのカスタマイズを始める前に、まずはプロフィールを作る必要があります。

GitHubの短いガイドはこちらですが、やるべきことは以下になります。

  • あなたのGitHubユーザ名と同じ名前の新しいリポジトリを作成する。
  • 新しいリポジトリにREADME.mdファイルを追加する。

例えば、私のGitHubユーザ名はkshyun28です。プロフィールを作るためには、kshyun28という名前のリポジトリを作り、README.mdファイルを追加する必要があります。

GitHubプロフィールリポジトリの例

リポジトリREADME.mdファイルを設定した後、https://github.com/YOUR-USERNAMEでGitHubプロフィールにアクセスし、プロフィールが表示されるか確認します。

私の場合は、https://github.com/kshyun28になります。

GitHubプロフィールのカスタマイズ

GitHubプロフィールを持ったら、次は創造力を発揮する時です!

ここで大事なのは、あなたの個性をプロフィールに表すことです。GitHubプロフィールは、LinkedInのように堅苦しい必要はありません。

また、シンプルに始めることもおすすめします。これであなたのGitHubプロフィールがすぐに立ち上がります。新しいアイデアができたら、いつでもプロフィールを改善できますから。

GitHub Flavored Markdown、フォーマッティング、およびHTML

GitHubプロフィールのREADME.mdをカスタマイズするためには、GitHub Flavored Markdownを使用します。もしマークダウンで書いた経験があれば、フォーマッティングは簡単なはずです。

もしマークダウンを初めて扱うなら、GitHubのドキュメントを見て、使えるフォーマッティングオプションに慣れてください。

プロフィールでさらにフォーマッティングオプションを使用するために、HTML も利用できます。

以下のHTMLタグは有用だと感じました:

  • 改行しないスペース: nbsp;
  • 中央揃えのdivタグ: <div align="center"> </div>

ほとんどのHTMLタグを使用できますが、GitHub Flavored Markdownでは以下のHTMLタグはフィルターされます:

  • <title>
  • <textarea>
  • <style>
  • <xmp>
  • <iframe>
  • <noembed>
  • <noframes>
  • <script>
  • <plaintext>

💡:さらに学びたい人には、HTMLブロックに関連するGitHub Flavored Markdown Specがあります。

インスピレーションを探す

始めるにあたって、他の素晴らしいGitHubプロフィールを見てアイデアを得ることをお勧めします。私が自分のプロフィール制作でインスピレーションを得たawesome-github-profile-readmeを訪れてみてください。

プロフィールがオープンソースなので、良いアイデアをあなたの素敵なプロフィールに活用できます!

また、アイディアを得るために私のプロフィールをチェックしてもいいですね。😉

バッジの追加

プロフィールにバッジを追加するには、markdown-badgesをチェックすることをお勧めします。このリポジトリには、プログラミング言語からNetflixなどのストリーミングプラットフォームまで、幅広い選択肢のバッジがあります。

お探しのものが見つからない場合、またはカスタムバッジを作成したい場合は、shields.ioに行ってください。これはmarkdown-badgesで使用されているものです。

こちらは私のプロフィールでmarkdown-badgesを使用した例です。
マークダウンバッジの例

アイコンの追加

プロフィールにskillstech stackセクションを追加する場合、美しいアイコンを提供しているskill-iconsの使用をお勧めします。

お探しのアイコンがサポートされていない場合は、2900以上のSVGアイコンを持つ[si

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/kshyun28/how-to-make-your-awesome-github-profile-hog