kosappi の日記

愛知県豊橋市に住んでます

GitHub のプロフィールかっこよくする

プログラミング

GitHub のプロフィールをかっこよくしたい

github.com/<your_id> で GitHub アカウントのプロフィールが表示される。 このプロフィールをかっこよくしたい。

ここでいう「かっこよく」とは、こんな感じです。

  • どれくらい開発してるのかが可視化される
  • グラフとかチャートとか、文字以外の要素がバーンと表示される
  • なんだかかっこいい

Special Repository と README.md

Special Repository に README.md を置くと、プロフィールに内容が表示される。

私の GitHub の id は kosappi なので github.com/kosappi/kosappi に README.md を置けば OK でした。

Special Repository を作成すると、こんな風にスペシャルな旨を教えてくれます。

github special repository info
github special repository info

Special Repository に README.md を置くと、プロフィールにこんな感じで表示されます。

github readme.md from special repository
github readme.md from special repository

この README.md を工夫すれば、なんでもできそうです。

GitHub Profile Summary Cards

README.md を充実させるものとして GitHub Profile Summary Cards があります。 これを使ってみます。 なんだかかっこいいし。

チュートリアルがあるので、そちらを参考に進めます。 github-profile-summary-cards を fork したり clone する必要はありません。

github.com

手順は大きく３つ。

  1. アクセストークンを置く
  2. GitHub Actions を追加する
  3. README.md に成果物を表示する

アクセストークンを置く

リポジトリに Personal Access Token を置きます。

Personal Access Token を作成

https://github.com/settings/tokens で Generate new token します。 必要な権限は下記の５つです。

  • repo.repo:status
  • repo.repo_deployment
  • repo.public_repo
  • user.read:user
  • user.user:email

トークンは作成した直後にしか見れないので注意してください。 紛失した場合は Regenerate token で再作成できます。

リポジトリにトークンを追加する

作成したトークンを https://github.com/kosappi/kosappi/settings/secrets/actions の New repository secret で追加します。 チュートリアルに従うと SUMMARY_CARDS_TOKEN という名前になります。

GitHub Actions を追加する

下記の workflow を追加します。

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.SUMMARY_CARDS_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}

チュートリアルのように Create new file から .github/workflows/profile-summary-cards.yml を指定して追加するのが便利だと思います。

README.md に成果物を表示する

workflow を起動して、成果物を README.md に貼り付けます。

すでに workflow は追加したので Actions タブに表示されているはずです。 Run workflow で走らせます。

workflow が終わると成果物が profile-summary-card-output というディレクトリの中に作成されます。 テーマごとにディレクトリが切られているので、好きなテーマの README.md から markdown のリンクをコピーして、root の README.md に貼り付ければ表示できます。

github profile summary cards
github profile summary cards

私はこの３つのカードを表示することにしました。テーマは github です。

感想

  • すこしかっこよくなった
  • 便利
  • github-profile-summary-cards の仕組みを知りたい
  • 自作の workflow でプロフィールを更新してみたい
  • 他にも似たような workflow は配布されてないかな？

追記

github.com

こっちの方がかっこいいですね...。