Githubプロフィールで、プライベートリポジトリの技術スタックも含めて表示する

はじめに

github-profile-summary-cardsを利用すると、とてもかっちょいいプロフィールページを作れます。
よく使っている言語一覧などを表示できますが、プライベートリポジトリも含めた表示方法があまり見かけなかったので書いておきます。

1. Githubのアカウント名と同名のリポジトリを作成する

github-profile-summary-cardsを使うためというよりは、自分のアカウント名と同名のリポジトリを作成することによって、READMEを利用してGithubプロフィールが作れるようにします。

緑の枠が出て、アカウント名と同名のリポジトリはスペシャルなんです！！と表示されていればOKです。

Add a README fileにチェックを入れて、READMEファイルを生成しておくと楽です。

• Add a README file

2. Githubアクションを設定する

github-profile-summary-cardsは、GitHub Actionを利用して、画像ファイルを生成することになるので、その設定を行います。

手順1で作成したリポジトリの下記の階層に、ymlファイルを作成します。
.github
┣ workflows
    ┗ profile-summary-cards.yml

.github/workflows/profile-summary-cards.yml

name: GitHub-Profile-Summary-Cards

on:
  schedule: # execute every 24 hours
    - cron: "* */24 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate

    steps:
      - uses: actions/checkout@v2
      - uses: vn7n24fzkq/github-profile-summary-cards@release
        env:
          GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}

プライベートリポジトリを考慮に入れない場合は、下記設定を、
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} にします。

GITHUB_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}

3. personal access tokenを作成する

GitHubのsettings(リポジトリのsettingsでは無い)でpersonal access tokenを生成します。

チェック項目は下記画像参照

生成されたトークンをコピーしておきます。

4. personal access tokenをリポジトリに設定する

リポジトリのsettings(アカウントのsettingsでは無い)にSecretsを追加します。

Valueの部分に手順3で生成したtokenをペーストします。

5. Github Actionを実行する

github-profile-summary-cardsを指定して、Run Workflowで実行する

6. 生成されたURLをREADMEに設定する

Actionを実行すると、profile-summary-card-outputというディレクトリが作成されています。
その中に、画像ファイルのURLが生成されているので、好きなデザインのものをルートディレクトリのREADMEにコピペします。

下記の例は1つだけ利用してますが、複数の画像を利用することも可能です。

READMEに画像ファイルのURLを貼り付けて保存するとかっちょいいプロフィールページの完成です！！

さいごに

デザインはかっちょよくなりましたが、データがしょぼいので精進しようと思いました。