Simple minds think alike

より多くの可能性を

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

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

GitHub Actions

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

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

こんな感じのやつができます。

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

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

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

github-profile-summary-cardsとは

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

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

デザインテーマ

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

default

dracula

monokai

solarized

solarized_dark

vue

やってみる

①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が生成されます。

③作った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に表示されます。

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

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

①Personal Access Tokenの作成

Personal Access Tokensに、新しくprofile-summray-cards用のトークンを作成します。Wikiのページによると、以下のrepoとuserの権限だけあれば大丈夫なようです。

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

③profile-summray-cards.ymlのGITHUB_TOKENをPERSONAL_ACCESS_TOKENに置き換える

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

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