📖

GitHubのプロフィールをカッコよくする方法② GitHub Profile Summary Cards編

2021/07/25に公開

はじめに

GitHub Readme Stats, Github Profile Trophy編の続きです。
前提として、その１が終わっている。もしくはREADMEを作っているところから始めます。
まだREADMEを作成されていない方は、その1をご覧ください。

ゴール

今回はこの部分を作っていこうと思います。

今回使うライブラリ

GitHub Profile Summary Cards

早速やってみる

今回はGitHubのActionsを利用します。
GitHubActionsが分からない方はこちらの公式をご覧ください。
https://github.co.jp/features/actions
簡単に言うと、ワークフローを設定出来て、CICDを自動化出来たりするものです。
まず最初に必要なアクセス許可を持つパーソナルアクセストークンを作成します。
GitHubの自分のアイコンをタップします。
その中の「Settings」をタップします。
プロフィールの設定画面に遷移します。
そこで、「Developer settings」をタップします。
次の画面で「Personal access tokens」を選択します。
すると、右側にボタンが出てきますので、「Generate new token」をタップします。
tokenの作成画面に遷移します。
ここで、Noteに何の為のtokenかと、必要な権限を選択します。

10.　一番下に「Generate token」ボタンがあるので、ここをタップすると、tokenが出来ます。

tokenが出来ました。このパスワードは必ずコピーしておいてください。後で利用します。
このパスワードは閉じてしまうと二度とみることはできないのでご注意ください。
続いてワークフローを設定するファイルを作成していきます。
自分のREADMEがあるディレクトリに移動して、「Add file」をタップします。
するとファイルが作成されます。
「Nmae your file」の箇所に

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

と入力します。
16. こうなります。

17.　続いて中身を記載していきます。
こちらを貼り付けください。

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 }}

18.　こうなります。

19.貼り付け出来たら、下の「Commit new file」のボタンを押してください。するとファイルが作成されます。

次に、${{ secrets.GITHUB_TOKEN }}のGITHUB_TOKENの部分に自分のSecretを入力する必要がありますので、Secretにtokenを設定します。
「Settings」ボタンをタップしてください。
次の画面で「Sectet」を選択します。
Secretの作成画面に遷移しますので、「New repository secret」のボタンをタップします。
Secretの入力画面にSecretの名前とtokenのパスワードを入力します。(先ほどコピーしたものです。)入力出来たら、「Add secret」ボタンをタップします。
Secretができます。このSecretの名前をコピーします。
Secretの名前を先ほどのファイルの、${{ secrets.GITHUB_TOKEN }}のGITHUB_TOKENの部分に入力します。
こうなります。
これで入力完了したので、次にActionsを動かします。上のタブの「Actions」を選択してください。
Actionsの画面に遷移します。「GitHub-Profile-Summary-Cards」を選択します。
次に、ワークフローを動かします。右の「Run workflow」ボタンをタップします。

32. 成功すると緑のチェックが入ります。

34. ワークフローが成功すると、「profile-summary-card-output」というファイルが一つ増えます。

35. 「profile-summary-card-output」の中のREADMEの中にコードが出来上がってますので、コピーします。(今回はdefaltをコピーしていますが、色がテーマが数種類ありますので、お好きなテーマをご利用ください)

37. そして、それを自分のREADMEに貼り付けると、完成です。

さいごに

だいぶ出来るエンジニア感が出てきました。
実は今回書いた事はGitHub Profile Summary CardsのREADMEに全部書いてあります。
私の説明で分からない方は公式をご参考ください。
次回は、アイコンなどを追加したいなと考えてます。

はじめに

ゴール

今回使うライブラリ

GitHub Profile Summary Cards

早速やってみる

さいごに

参考

Discussion