GitHub Profileをオシャレにして、GitHub Actionsを学ぶ

## はじめに

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

https://docs.github.com/ja/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/about-your-profile

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

https://qiita.com/koinori/items/5bfed284fab04b5fee16

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

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

https://github.com/Kodak4400


## 編集する方法

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

だけです。

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

![Create_a_New_Repository.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241956/6e04690c-2464-83db-757f-c3afddbe1cb9.png)

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

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

etc...

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

## サマリーカードを作る

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

https://github.com/vn7n24fzkq/github-profile-summary-cards

### GitHub Actionsとは？

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

### 何故必要か？

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

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

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

※ 以降ymlの内容

```yaml
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)を書きます。

https://docs.github.com/ja/actions/learn-github-actions/events-that-trigger-workflows

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

```shell
┌───────────── 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`を使います。:desktop:

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

https://docs.github.com/ja/actions/security-guides/automatic-token-authentication

 ④ リポジトリの所有者

### GitHub Actionsを動かす

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

![Actions_·_Kodak4400_Kodak4400.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/241956/cd1962a8-8339-c452-543c-c42b001a8371.png)

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

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


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

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