GitHubのREADMEをTOPページに表示

GitHubはusernameと同じ名前のrepositoryを作成すると、プロファイルページに表示してくれる。 https://docs.github.com/ja/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme

ブログのトップページをGitHubから取得して表示できないか？と思ったので、 まずGitHubのプロファイルページを充実させることにした。

• やりたいこと
  • GitHubのプロファイル情報をブログにも表示する
  • プロファイルをなんか綺麗な感じにする
  • TOPページを整理する

GitHubのコミット情報などをグラフ化

こちらのQiita記事から、github-profile-summary-cardsという、良い感じにグラフ化してくれるツールを発見。 おまけにGitHub Actionsまで用意してくれている。 詳しくは上記リポジトリを参考にすれば良いが、下記のactionを自分の名前のリポジトリに追加する。 Personal Access Tokenを設定しないと、非公開リポジトリは取得できないので注意。

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: # default use ${{ secrets.GITHUB_TOKEN }}, you can change to your personal access token
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          USERNAME: ${{ github.repository_owner }}

スキル情報をバッチ化

Markdownファイルによく埋め込まれているバッチを使って、各言語のアイコンを簡単に表示したかったので、下記サイトからリンクを作成。

https://shields.io/

アイコンはこちらのサイトを使うっぽい

https://simpleicons.org/

Javaのアイコン例

[![](https://img.shields.io/badge/-Java-007396?style=flat&logo=Java)](https://github.com/vagivagi)

GitHubのREADME.mdファイルを読み込む

こちらは単純にRAWファイルリンクから取得可能

https://raw.githubusercontent.com/vagivagi/vagivagi/main/README.md

まとめ

最終的に前よりいい感じにプロファイルを作成できた。 リンクなどは適当なので、そのうち直していく。