Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-11-22

はじめに

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

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

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

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

編集する方法

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

だけです。

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

Create_a_New_Repository.png

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

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

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を使えば良いか?

  1. .github/workflows/profile-summary-cards.ymlを用意します。
  2. ymlの中に以下を書きます。
  3. 上記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を使います。:desktop:

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

④ リポジトリの所有者

GitHub Actionsを動かす

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

Actions_·_Kodak4400_Kodak4400.png

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

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

おわりに

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

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

7
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Qiita Advent Calendar is held!

Qiita Advent Calendar is an article posting event where you post articles by filling a calendar 🎅

Some calendars come with gifts and some gifts are drawn from all calendars 👀

Please tie the article to your calendar and let's enjoy Christmas together!

7
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?