GitHubプロファイルを美しくする

GitHubプロファイルの美化のためのカバー画像

自分のスキルをアピールするのに、魅力的なGitHubプロファイルほど良い方法はありません。情熱があるだけでなく、仕事が好きだということを示し、就職活動時にも目立たせてくれます。この記事では、良いプロファイルのポイントやGitHubプロファイルの概要、そしてGitHubプロファイルをどう美しくするかを紹介します。

それでは、素敵なGitHubプロファイルを作り上げて、リクルーターを感動させましょう😀

GitHubプロファイルREADME


プロファイルの編集を始めるためには、公開リポジトリを作り、GitHubユーザーネームと同じ名前を付けましょう。そして、その中にREADME.mdというファイルを作成します。このreadmeファイルを置いた場所がGitHubプロファイルページに表示されます。

ここからは、マークダウンを書いて、プロファイルをもっと見やすく楽しいものにしましょう。マークダウンって何?という人は、こちらを読んでみてください。マークダウンは、可読性を意図して設計されたライトウェイトなマークアップ言語で、コードが出力されるものと同じように見えるようになっています。

自己紹介を追加するなど、シンプルなことから始めましょう。箇条書きや絵文字を使って、視覚的なタイポグラフィを加えることができます。

以下は私のプロファイルの例です。ご自身についての情報をさらに追加してみてください。

スクリーンショット

readmeファイルに動的な機能を追加して、プロファイルを次のレベルに引き上げることもできます 🚀

GitHubプロファイルを目を引くものにするために使える機能


1. GitHubプロファイルREADMEジェネレータを使用する

GitHubプロファイルREADMEファイルを一から全て自分で書く時間は無駄です。簡単で便利なツールを使えば時間をかけずに美しいGitHubプロファイルを作ることができます。

READMEファイルジェネレータ

以下はGitHubプロファイルREADMEを作るのに役立つジェネレータの例です。

2. プロファイルに最新のフォロワーを表示する

この目的のためには、GitHub APIを使用してプロファイルを更新し、最新のフォロワーを表示させることができます。

こちらは私のGitHubプロファイルの例です。最新にフォローしてくれたアカウントが表示されますし、毎日自動的に更新されます。

Githubフォロワー

それはどうやって動くのか?

コードを書く前に、この仕組みがどのように機能するか見てみましょう。まず、毎日特定の時間に実行されるCronJobをセットアップする必要があります。

その後、GitHub APIにリクエストを送り、最新のフォロワーを返すスクリプトを書きます。そのスクリプトでHTMLの一部を生成し、READMEファイルに埋め込んで、変更をコミットしてリポジトリを更新します。

あなたがする必要があることは?

  • CronJobをセットアップする。
  • 最新のデータを取得するスクリプトを書く。
  • 同じスクリプトでリポジトリを更新する。

それを設定するには?

自分のGitHubアカウントにこれを実装するための簡単なステップがいくつかあります。私のGitHubアカウントを見て、私がやっていることを試してみることをお勧めします。

  • 最新のデータを取得するスクリプトを書く。(または私のGitHubアカウントからスクリプトをコピーする)
  • 個人アクセストークンを生成し、read:userスコープを選択する。
  • スクリプトを毎日実行する.ymlワークフローファイルを作成する。(または私のものを使用する)
  • TOKENという名前のリポジトリシークレットを作成し、個人アクセストークンを値に貼り付ける
  • そのトークンをymlファイルで引数として追加する。
  • README.MDファイルに、セクションの開始と終了を示すコメント行を2行追加します。スクリプトを書く時に、生成したHTMLファイルをどこに置くかがわかるようにするためです。この2行は以下のようになります:

<!-- FOLLOWER-LIST:START -->

<!-- FOLLOWER-LIST:END -->

これらの手順を正しく行えば、フォロワーがGitHubプロファイルに表示され、毎日自動的に更新されるか、メインブランチに変更をプッシュするたびに更新されます。

3. 動的に生成されたステータスカードを追加する

動的に生成されたステータスカードも追加することができます。これはお好みで変更やカスタマイズができます。

この目的のために、GitHubリポジトリGitHub-README-statsを使用して、ステータスカードを生成します。

GitHubステータスカードをプロファイルに追加する方法

これを行うのはとても簡単です。README.mdファイルにマークダウンコードをコピー&ペーストするだけです。

変更する必要があるのは、リンク上のユーザーネームを自分のGitHubユーザーネームに変えることだけです。

この魅力的な点は、プロファイルに追加できる複数のカードがあり、それぞれを好きなようにカスタマイズできることです。

GitHubカードの例

github card

Stats card

Github card

GitHub統計例

4. 最新のブログ投稿リストを追加する

最新のブログ投稿のリストも追加できます。

このためには、GitHubアクションを使用してワークフローを定期的に実行し、リストを毎日または数時間ごとに自動更新します。

使用するワークフローはgautamkrishnarによるblog post workflowです。

実装は簡単です。blog post workflowリポジトリにアクセスし、説明に従ってください。

5. プロファイルヘッダを追加する

ヘッダ画像を追加すると、あなたのGitHubアカウントはすぐに際立ちます。

プロフィールヘッダ画像を生成するために、Khaleel GibranによるREHeaderを使ってみましょう。ダウンロードして、あなたのGitHubリポジトリにアップロードし、プロフィールに掲げることができます。

ヘッダ画像は、プロファイルの一番上に置くことをお勧めします。

6. アニメーションを追加する

GIFも追加することができます。

GIFファイルを作成またはダウンロードして、GitHubプロファイルに追加します。かっこいいですよね?

以下はGitHubプロファイルにアニメーションを追加した例です👇

クレジット: argyleink

アニメーションHeader

他に何をできるのか?

GitHubプロファイルに追加してカスタマイズできるものは他にもたくさんあります。ここにはGitHubに追加できるいくつかの追加機能を紹介します。

GitHubのリードミーにWakaTimeを統合する

WakaTimeというVs Code拡張機能があります。セットアップを完了すると、特定のプログラミング言語でコーディングした分数を計算します。

また、API機能もあり、そのデータを取得してGitHubプロファイルに表示し、他の人にどのプログラミング言語を最も使用しているかを知らせることができます。

GitHubプロファイルとの統合にはwakapiを使用できます。

waka time

自分が星をつけたプロジェクトをアピールする

星をつけたプロジェクトのリストも表示することができます。これもCronJobで、GitHubアクションを使用して毎日実行します。

Starredがこれに役立ちます。

GitHubプロフィールのリードミーに最新のYouTube動画を表示する

YouTuberであったり、YouTubeに動画を公開している場合は、それをGitHubアカウントでアピールすることもできます。

ブログ投稿を毎日取得するためにCronJobを追加したように、同じアクションを使用してYouTube動画を取得します。ただし、この時はフィードリンクをYouTubeに変更します。

チャンネル_idを自分のチャンネルIDに置き換えます:

https://www.youtube.com/feeds/videos.xml?channel_id=<your-channel-id>

GitHubプロファイルにゲームを追加する

はい、あなたのGitHubプロファイルにゲームを追加し、ページを見た人がプレイできるようにすることもできます。

こちらのインスピレーションは、rossjrwによって作られたもので、プロファイルに追加することもできます。

あなたのGitHubプロファイルを美しくするためにもっとインスピレーションを得るには?

Awesome GitHub Profile READMEsは素晴らしいGitHubプロファイルの例と創造性に満ちた場所を提供し、そこで最高のGitHubプロファイルを見つけ、自分の美しいGitHubプロファイルを作るためのインスピレーションを得ることができます。

読んでいただきありがとうございます。楽しんでいただけたら嬉しいですし、何か得るものがあれば、この記事を友人と共有してください。

このようなコンテンツをこれからも見てみたい場合は、[Twitter](https://twitter.com/dawson

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/dawsoncodes/beautify-github-profile-5a3