LoginSignup
0
3
@soranjiro

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

Last updated at Posted at 2024-06-07

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

はじめに

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

GitHubプロフィールとは？

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

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

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

スクリーンショット 2024-06-08 1.26.04.png

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

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

    Create Repository

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

    # Hello, I'm [Your Name]!

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

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

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

初級編

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

基本情報

# Hello, I'm John Doe! 👋

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

スキルセット

## Skills

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

プロジェクト紹介

## Projects

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

ソーシャルリンク

## Connect with me

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

コードスニペット

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

## 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ファイルを参考にして，自分のプロフィールをカスタマイズしましょう。

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

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

スクリーンショット 2024-06-08 2.48.57.png

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

すでに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" />

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

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

例は以下の通りです．

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

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

上級編

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

スクリーンショット 2024-06-08 1.32.01.png

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

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

1. 概要

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

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

2. githubのtokenを生成

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

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

スクリーンショット 2024-06-08 1.38.02.png

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

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

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

スクリーンショット 2024-06-08 1.06.15.png

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

3. githubのtokenを設定する

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

スクリーンショット 2024-06-08 1.46.35.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

これによって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

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

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

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

details.svg

details.svg

metrics.base.svg

metrics.base.svg

metrics.plugin.achievements.compact.svg

metrics.plugin.achievements.compact.svg

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

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

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

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

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

github actions

github actionsのコミットユーザーを変更する

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

- 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に以下のように表示します．
## 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>

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

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

まとめ

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

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

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
3