githubのプロフィールをかっこよくする[完全版]


# 📘 完全版：GitHubプロフィールの作成方法

## はじめに
GitHubプロフィールの作成方法について説明します。GitHubプロフィールは、`README.md`ファイルを使用して設定します。プロフィールを充実させることで、他のユーザーにあなたのスキルやプロジェクトをアピールできます。

---

## GitHubプロフィールとは？

GitHubプロフィールは、あなたのGitHubアカウントにアクセスしたときに表示される自己紹介ページです。これには、あなたのスキル、プロジェクト、連絡先情報などを含めることができます。プロフィールをカスタマイズすることで、他の開発者や採用担当者にアピールすることができます。

githubプロフィールは単なる情報だけでなく，animationやコミットグラフを作成して，より魅力的なプロフィールを作成することもできます．

:::note info
自分のプロフイールは，githubの右上のアイコンをクリックして，`Your profile`をクリックすると見ることができます。

![スクリーンショット 2024-06-08 1.26.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/21de25fa-f5c9-20cf-ca49-9a5baff2630c.png)
:::

## プロフィール用のリポジトリを作成

1. **リポジトリを作成**: GitHubにログインし、新しいリポジトリを作成します。このリポジトリの名前は、あなたのGitHubユーザー名と同じにする必要があります（例：`username/username`）。

    ![Create Repository](https://docs.github.com/assets/images/help/repository/repo-create.png)

2. **README.mdファイルを追加**: リポジトリ作成時に「Add a README file」にチェックを入れるか、後で追加します。このファイルがあなたのプロフィールページに表示されます。

    ```markdown
    # Hello, I'm [Your Name]!

    Welcome to my GitHub profile! Here are some of my projects and interests.
    ```

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

ここから解説していきますが，初級編，中級編，上級編に分けて解説します。

## 初級編

プロフィールをより魅力的にするために、以下のような情報を追加しましょう。
基本的にマークダウンの形式に則れば，自由にカスタマイズできます。

### 基本情報

```markdown
# Hello, I'm John Doe! 👋

I'm a software developer passionate about open-source projects and web development.
```

### スキルセット

```markdown
## Skills

- **Languages**: JavaScript, Python, Java
- **Frameworks**: React, Node.js, Django
- **Tools**: Git, Docker, VS Code
```

### プロジェクト紹介

```markdown
## Projects

### [Project Name](https://github.com/username/project)
Description of the project. What it does, main features, and technologies used.
```

### ソーシャルリンク

```markdown
## Connect with me

- [LinkedIn](https://www.linkedin.com/in/username/)
- [Twitter](https://twitter.com/username)
- [Personal Website](https://username.github.io)
```

### コードスニペット

興味深いコードスニペットやGistを共有して、あなたのスキルをアピールすることもできます。

```markdown
## Code Snippet

```python
def hello_world():
    print("Hello, world!")

hello_world()
```
```

## 4. プロフィールの装飾

- **バッジ**: Shields.ioを使ってバッジを追加し、スキルやステータスを表示できます。
- **GIF**: 楽しいアニメーションや画像を追加して、プロフィールを魅力的に見せましょう。

```markdown
## Badges

![GitHub followers](https://img.shields.io/github/followers/username?label=Follow&style=social)
![Twitter Follow](https://img.shields.io/twitter/follow/username?style=social)
```

## 中級編
どうせならもっと凝ったことがしたいというあなたに！
以下のフォルダにあるmdファイルを参考にして，自分のプロフィールをカスタマイズしましょう。

https://github.com/durgeshsamariya/awesome-github-profile-readme-templates/tree/master/templates


:::note info
awesome-github-profile-readme-templatesは様々な人が作成したプロフィールのテンプレートを集めたリポジトリです。ここから自分の好みに合ったテンプレートを選んで使うことができます。
:::

また，中級編では，以下のようなgithubのステータスを表示することもできます。

![スクリーンショット 2024-06-08 2.48.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/5b0ccee0-bf95-43bb-117b-9a4fe09aa0a8.png)

以下のリポジトリを使っています

https://github.com/anuraghazra/github-readme-stats

https://github.com/ryo-ma/github-profile-trophy

すでにapiが用意されているので，以下のように`README.md`に追加するだけで表示できます。

```README.md
<img src="https://github-readme-stats.vercel.app/api/top-langs?username=username&show_icons=true&locale=en&layout=compact&theme=chartreuse-dark" alt="ovi" /></p>

<img src="https://github-readme-stats.vercel.app/api?username=username&show_icons=true&locale=en&theme=chartreuse-dark" alt="ovi" width="410" /></p>


<img src="https://github-profile-trophy.vercel.app/?username=username&theme=juicyfresh&no-bg=true" />
```

:::note warn
`username`を自分のユーザー名に変更してください．
:::

`?`以降のクエリパラメータを変更することで，表示を変更することができます．

例は以下の通りです．

- `theme`: テーマを変更します。デフォルトは`default`です。
- `show_icons`: アイコンを表示します。デフォルトは`false`です。
- `locale`: 言語を設定します。デフォルトは`en`です。
- `layout`: レイアウトを設定します。デフォルトは`default`です。


プライベートリポジトリの情報を取得するためには，vercelに自分でこのリポジトリをデプロイする必要があります．

## 上級編

他の人のプロフィールを見ていると，より凝ったものがあることに気づくかもしれません。
例えば，以下のようなものがあります。

![スクリーンショット 2024-06-08 1.32.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/57ccdb32-d761-6c83-ebd6-536621f50132.png)

このようなプロフィールは自分のコミットなどの情報を用いて自動的に生成されています。

以下にこのようなプロフィールを作成する方法を紹介します。

### 1. 概要

方法は以下の通りに行っています．

1. githubのtokenを生成（任意）
    - これを行うとプライベートリポジトリの情報も取得できるようになります．
1. github actionsを用いて，毎日自動的にプロフィールを更新する
1. `README.md`に表示する

### 2. githubのtokenを生成

:::note warn
自分のアカウントのリポジトリの情報を取得するために，githubのtokenを生成します．
これをすることで，自分のプライベートリポジトリの情報も取得できるようになります．
もし，パブリックリポジトリの情報だけで良い場合は，この手順は不要です．
`4. github actionsを用いて，毎日自動的にプロフィールを更新する`までとんでください．
:::

1. githubの右上のアイコンをクリックして，`Settings`をクリックします．
2. 左のメニューから`Developer settings`をクリックします．
3. 左のメニューから`Personal access tokens`をクリックします．

![スクリーンショット 2024-06-08 1.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/952a8f59-d21b-c44c-317f-d407d721bdcf.png)

4\. `Generate new token`をクリックします．

:::note warn
Fine-granted tokensというbeta版のものもありますが，今回は簡単に`Tokens (classic)`を使用します．
:::

5\. tokenの名前を入力し，`repo`にチェックを入れて，`Generate token`をクリックします．

![スクリーンショット 2024-06-08 1.06.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/58f360e2-7c79-98a8-4e3a-0e81c8572ead.png)

6\. tokenが生成されるので，これをコピーしておきます．

### 3. githubのtokenを設定する

1. 自分のアカウント名のリポジトリの`Settings`から`Secrets and variables`の`actions`を開く

![スクリーンショット 2024-06-08 1.46.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/53d17030-c68b-d0ee-3a65-dc194cfcf9d6.png)

2\. `Repository secrets`の`New repository secret`をクリックします．

3\. `Name`に`PERSONAL_ACCESS_TOKEN`，`Value`に先ほどコピーしたtokenを入力し，`Add secret`をクリックします．

4\. `Settings`の`Actions`の`General`の一番したに，`Workflow permissions`とあるので，それの`Read and write permissions`を選択します．

![スクリーンショット 2024-06-08 1.47.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/483098d0-7e65-cdaa-12aa-1bfb43bbb162.png)

:::note info
これによってgithub actionsが自分のリポジトリにcommit,pushできるようになります．
:::

### 4. github actionsを用いて，毎日自動的にプロフィールを更新する

1. 自分のリポジトリに`.github/workflows`フォルダを作成します．

2. その中に，`main.yml`を作成します．

```main.yml
name: Main
on:
  # run automatically every 24 hours
  schedule:
    - cron: "0 0 * * *"

  # allows to manually run the job at any time
  workflow_dispatch:

  # run on every push on the main branch
  # don't forget to change if you're using 'master' branch
  push:
    branches:
    - main
jobs:
  github-metrics:
    runs-on: ubuntu-latest
    steps:
    - name: Default metrics
      uses: lowlighter/metrics@latest
      with:
        filename: output/metrics.base.svg
        token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        base: header, activity, community, repositories, metadata
    - name: Most used (with details)
      uses: lowlighter/metrics@latest
      with:
        filename: output/details.svg
        token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        base: ""
        repositories_skipped: chatbot-ui, gitHub-readme-stats-clone, PL0-compiler
        plugin_languages: yes
        plugin_languages_ignored: >-
          tex, less, qmake, lex, gnuplot
        plugin_languages_details: bytes-size, percentage
        plugin_languages_limit: 8
        plugin_followup: yes
        plugin_followup_indepth: yes
    - name: Compact display
      uses: lowlighter/metrics@latest
      with:
        filename: output/metrics.plugin.achievements.compact.svg
        token: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        base: ""
        plugin_achievements: yes
        plugin_achievements_only: >-
          polyglot, stargazer, sponsor, deployer, member, maintainer, developer,
          scripter, packager, explorer, infographile, manager
        plugin_achievements_display: compact
        plugin_achievements_threshold: X
```

:::note warn
tokenを使用せず，パブリックリポジトリの情報だけで良い場合は，`GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}`としてください．
:::

:::note info
このファイルは，毎日0時に自動的に実行され，自分のリポジトリに`output`フォルダを作成し，その中に`metrics.base.svg`，`details.svg`，`metrics.plugin.achievements.compact.svg`を作成します．
:::

作成されるsvg画像は以下のようなものです．

#### details.svg
![details.svg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/9741c539-7f16-46fd-b5ce-757c4d34f6ee.png)

#### metrics.base.svg
![metrics.base.svg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/fc7404a3-eaf2-44dc-af96-5f58a20afa5b.png)

#### metrics.plugin.achievements.compact.svg
![metrics.plugin.achievements.compact.svg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/c23d9e75-930a-48d2-9312-8c8a912757d0.png)

:::note
以下のリポジトリに他のsvg画像の例が載っています．

https://github.com/lowlighter/metrics
:::

3\. また，`profile3d.yml`も作成します．

```profile3d.yml
name: generate 3d chart for profile contributions

on:
  # run automatically every 24 hours
  schedule:
    - cron: "0 0 * * *"

  # allows to manually run the job at any time
  workflow_dispatch:

  # run on every push on the main branch
  # don't forget to change if you're using 'master' branch
  push:
    branches:
    - main

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/github-profile-3d-contrib@0.7.1
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add -A .
          git commit -m "generated"
          git push

```

:::note info
このファイルは，毎日0時に自動的に実行され，自分のリポジトリに`profile-3d-contrib`フォルダを作成し，その中に`profile-3d-contrib.svg`を作成します．

svg画像は実際に試してみてください．
:::

3\. これをcommitしてpushすると，毎日0時に自動的に更新されます．

4\. すぐに更新したい場合は，`Actions`から`Run workflow`をクリックします．

![github actions](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3670528/5f4e1408-08c3-cb4c-891f-49b5c9192cb3.png)


:::note info
#### github actionsのコミットユーザーを変更する
デフォルトでは，`github-actions`というユーザーでコミットされます．
自分のコミットユーザーを変更するには，以下のようにします．

```yml
- name: Commit & Push
  run: |
    git config user.name "your name"
    git config user.email "your email"
    git add -A .
    git commit -m "generated"
    git push
```
:::

### 5. `README.md`に表示する

1. `README.md`に以下のように表示します．

```markdown
## Profile


<p align="left">
  <picture>
        <source media="(prefers-color-scheme: dark)"  srcset="output/metrics.base.svg" width="400" />
	<source media="(prefers-color-scheme: light)" srcset="output/metrics.base.svg" width="400" />
	<img alt="github profile contributions chart"    src="https://raw.githubusercontent.com/username/username/output-3d-contrib/day.svg" />
  </picture>
  <picture>
   	<source media="(prefers-color-scheme: dark)"  srcset="output/details.svg" width="400" />
	<source media="(prefers-color-scheme: light)" srcset="output/details.svg" width="400" />
	<img alt="github profile contributions chart"    src="https://raw.githubusercontent.com/username/username/output-3d-contrib/day.svg" />
  </picture>
</p>

<p align="left" >
	<picture>
	  <source media="(prefers-color-scheme: dark)"  srcset="profile-3d-contrib/profile-night-rainbow.svg" width="700" />
	  <source media="(prefers-color-scheme: light)" srcset="profile-3d-contrib/profile-season-animate.svg" width="700" />
	  <img alt="github profile contributions chart"    src="https://raw.githubusercontent.com/username/username/output-3d-contrib/day.svg" />
	</picture>
</p>　

<p align="left">
<picture>
  <source media="(prefers-color-scheme: light)"  srcset="output/metrics.plugin.achievements.compact.svg" width="400" />
  <source media="(prefers-color-scheme: dark)"  srcset="output/metrics.plugin.achievements.compact.svg" width="400" />
 <img alt="github profile contributions chart"    src="https://raw.githubusercontent.com/username/username/output-3d-contrib/day.svg" />
</picture>

```

:::note warn
`username`を自分のユーザー名に変更してください．
:::

5\. これで，自分のプロフィール画面の完成です！

## まとめ

GitHubプロフィールは、あなたのスキルやプロジェクトをアピールするための強力なツールです。`README.md`ファイルを作成してカスタマイズし、他のユーザーに自分をアピールしましょう。ぜひ試してみてください！

---

最後まで読んでいただき、ありがとうございます！Happy Coding! 💻