Github Profileに活動状況、よく使っている言語を載せる(github-profile-summary-cards)

Github上での活動状況、よく使っている言語等をGithub Profileに入れて、セルフブランディングに役立てるようになりました。 得意な技術ややりたいことが、社内外のアピールできるとやっていて楽しい仕事に繋がるかもしれません。

自動的にGithubの活動状況、よく使っている言語の情報を取得してくれるgithub-profile-summary-cardsというGithub Actionを紹介したいと思います。

こんな感じのやつができます。 f:id:moritamorie:20200907124113p:plain

Github Profileに好きなコンテンツを載せるには

まず、公開リポジトリに、ユーザ名と同じリポジトリを作り、その中にREADME.mdファイルを置くとそのコンテンツが、Github Profileの上部に表示されるようになります。なので、以下のように新しいリポジトリを作成する画面で、「Add a README file」にチェックを入れてリポジトリを作ります。

f:id:moritamorie:20200907230946p:plain

すると自動的に作られたREADME.mdのコンテンツがGithub Profileに表示されるようになります。

f:id:moritamorie:20200907231336p:plain

github-profile-summary-cardsとは

以下のようなGithubの活動状況、よく使っている言語に関するSVG画像を自動的に作ってくれるGithub actionです。

f:id:moritamorie:20200907124113p:plain

公式のリポジトリはこちら↓です。 github.com

デザインテーマ

色々なデザインテーマのSVG画像を作ってくれます。

default

f:id:moritamorie:20200907233830p:plain

dracula

f:id:moritamorie:20200907233625p:plain

monokai

f:id:moritamorie:20200907233940p:plain

solarized

f:id:moritamorie:20200907234045p:plain

solarized_dark

f:id:moritamorie:20200907234131p:plain

vue

f:id:moritamorie:20200907234214p:plain

やってみる

SVG画像を作るGithub actionsのworkflowが動くように

先程作ったユーザ名と同じリポジトリ.github/workflows/profile-summray-cards.ymlファイルを作って、SVG画像を作る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.GITHUB_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}

②workflowを実行し、SVG画像を作る

プロジェクトのActionsタブからRun workflowを押すと、profile-summary-card-outputディレクトリができ、デザインテーマ毎のSVG画像と、画像ファイルのプレビューが見れるREADME.mdが生成されます。 f:id:moritamorie:20200907233155p:plain

③作ったSVG画像がGithub Profileに表示されるように

profile-summary-card-outputディレクトリに作成されたREADME.md(画像プレビュー)を参考に、ユーザ名と同じリポジトリ直下のREADME.mdを編集します。以下のようにしてみます。

[![](https://raw.githubusercontent.com/moritamori/moritamori/master/profile-summary-card-output/dracula/0-profile-details.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
[![](https://raw.githubusercontent.com/moritamori/moritamori/master/profile-summary-card-output/dracula/1-repos-per-language.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)
[![](https://raw.githubusercontent.com/moritamori/moritamori/master/profile-summary-card-output/dracula/2-most-commit-language.svg)](https://github.com/vn7n24fzkq/github-profile-summary-cards)

README.mdの内容がGithub profileに表示されます。 f:id:moritamorie:20200907235010p:plain

プライベートリポジトリのコンテンツも含める

デフォルトのGITHUB_TOKENを使うとパブリックリポジトリのコンテンツだけが対象になりますが、プライベートリポジトリのコンテンツも含めることができます。(参考URL

①Personal Access Tokenの作成

Personal Access Tokensに、新しくprofile-summray-cards用のトークンを作成します。repouserの権限だけあれば大丈夫でした。 f:id:moritamorie:20200908001333p:plain

②プロジェクトのSecretsにPERSONAL_ACCESS_TOKENを設定

f:id:moritamorie:20200908001535p:plain

profile-summray-cards.ymlGITHUB_TOKENをPERSONAL_ACCESS_TOKENに置き換える

${{ secrets.GITHUB_TOKEN }}
↓
${{ secrets.PERSONAL_ACCESS_TOKEN }}

再度、ワークフローを実行すると、プライベートリポジトリも含めて計算してくれるようになります。

f:id:moritamorie:20200908002550p:plain