はじめに

自分のGitHub Profileページをオシャレにできるの知ってましたか？
私は知りませんでした。

私が知ったのは、Qiitaを徘徊していたら、こんな記事を見たのがきっかけです。

面白そう!! と思い立って、色々と調べてみたのですが、その時に、これって「はじめてGitHub Actionsを使う人にもオススメできるんじゃない？」と思ったので、この記事を書くことにしました。

ちなみに、私のProfileページは以下のようになりました。
（もっと色々と盛ろうと思ったのだけれど、あんまりゴテゴテしたのが自分が嫌いだったこともあり、このくらいにしておきました）

編集する方法

自分のユーザー名のリポジトリを作って、README.mdを編集する。

だけです。

ちなみに、自分のユーザー名のリポジトリを作ろうとすると、GitHubから「秘密を見つけましたね！」みたいなメッセージが出てきて、ちょっとワクワクします。

大変なのは、どうやってオシャレにするか。。。です。
多くの方がやられているのが、以下だと思います。

画像をアップする
バッチを作る
ステータス、トロフィーをのせる
サマリーカードを作る
アイコンをのせる
統計データをのせる

etc...

各々の編集方法については、多くの方が記事を上げているので、私の方からは割愛します。
ただ、「サマリーカードを作る」のは「はじめてGitHub Actionsを学ぶのに良さそう」だと思えたので、以降その部分に絞って書いていきます。

サマリーカードを作る

サマリーカードを作るには、github-profile-summary-cardsを利用して、GitHub Actionsを動かす必要があります。

GitHub Actionsとは？

いわゆるGitHubで動くCI/CDで、プッシュやプルリクなどのイベントをトリガーにしてワークフローを動かし、自動化する仕組みです。

何故必要か？

サマリーカードは、SVGファイルで作られます。
そのSVGファイルをREADME.mdに貼り付けるのですが、SVGファイルを定期的に更新しないと、画像の更新が止まるためです。
GitHub Actionsを使って、cronで定期的にワークフローを実行させて画像を更新することで常に最新のSVGファイルに保ちます。

どうやってGitHub Actionsを使えば良いか？

.github/workflows/profile-summary-cards.ymlを用意します。
ymlの中に以下を書きます。
上記ymlが作成できたら、リポジトリにプッシュしてください。

※ 以降ymlの内容

name: GitHub-Profile-Summary-Cards

on:
  schedule:
    # Runs at 4am JST
    - cron: '0 19 * * *' # ①
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest # ②
    name: generate-github-profile-summary-cards

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

① cronの部分が定期的にワークフローを実行する部分です。GitHubのcron時間はUTCなので、JSTに置き換えた時間(-9h)を書きます。

ちなみに、cronの実行時間は以下で指定します。

┌───────────── minute (0 - 59)
│ ┌───────────── hour (0 - 23)
│ │ ┌───────────── day of the month (1 - 31)
│ │ │ ┌───────────── month (1 - 12 or JAN-DEC)
│ │ │ │ ┌───────────── day of the week (0 - 6 or SUN-SAT)
│ │ │ │ │
│ │ │ │ │
│ │ │ │ │
* * * * *

② ビルドは、ubuntuを使います。

③ secrets.GITHUB_TOKENは、ワークフロー内で実行する認証で使用されます。Personal Access TokenやGitHub App Tokenのように、自分でトークンを生成する必要はなく、GitHub Action内で自動で生成して使っているようです。

④ リポジトリの所有者

GitHub Actionsを動かす

GitHub Actionsの画面へ行き、作成したワークフローからRun workflowボタンを押下します。

しばらく待ってみて、mainリポジトリに、profile-summary-card-output のフォルダができていれば成功です。

あとは、cronで指定した時間にGitHub Actionsが定期的に動いているかどうかを確認しましょう。

おわりに

どうでしたでしょうか？
「GitHub Actionsは知っているけど、具体的に何に使えば良いかわからない & 使ったことがない」という人は、すごく簡単なので是非試してみてはいかがでしょうか？

他にもwakatimeという統計データのサービスとGitHub Actionsを使って、さらにオシャレにしている人もいるので、こういったオシャレからGitHub Actionsを活用して学ぶのも面白いですよね。