0x5E

0x5E

My place for thoughty-like thoughts.
twitter
github

自分の GitHub プロフィールを美化する

又到了一年一度折腾自己 Github 主页的时候了,这篇文章就以我的主页为例,讨论一下各种有趣的装饰小工具和途中遇到的坑。

微信截图_20240116140707

自己の README ファイルを作成する#

新しいリポジトリを作成し、あなたの Github ユーザー名と同じ名前にします(大文字と小文字を一致させる必要があります)。Publicを選択し、Add a README fileを選択して、最下部のCreate repositoryボタンをクリックします:

微信截图_20240117151151

微信截图_20240117151326

少々お待ちいただくと、作成したリポジトリに入ります:

微信截图_20240117151741

次に、このリポジトリのREADME.mdファイルで装飾小工具を設定したり、自分の紹介文を書いたりできます。

🧪貢献グラフスネーク#

🔗snkを利用して、README ファイルに貢献スネークアニメーションを表示し、毎日自動的にデータを更新します。

ファイルを作成する#

Create new fileボタンをクリックします:

微信截图_20240117153521

以下のパスをファイル名テキストボックスにコピーすると、自動的に認識されます:

.github/workflows/main.yml

微信截图_20240117153735

微信截图_20240117154035

次に、以下のコードを下の大きなテキストボックスにコピーします(コードは🔗main.ymlを参考にできます)、変更は必要ありません。Commit changesボタンをクリックします:

name: generate animation

on:
  # 自動的に2時間ごとに実行
  schedule:
    - cron: "0 */2 * * *" 
  
  # 任意の時に手動でジョブを実行できる
  workflow_dispatch:
  
  # masterブランチへのすべてのプッシュで実行
  push:
    branches:
    - master
    
  

jobs:
  generate:
    permissions: 
      contents: write
    runs-on: ubuntu-latest
    timeout-minutes: 5
    
    steps:
      # githubユーザー(<github_user_name>)の貢献グラフからスネークゲームを生成し、<svg_out_path>にsvgアニメーションを出力
      - name: generate github-contribution-grid-snake.svg
        uses: Platane/snk/svg-only@v3
        with:
          github_user_name: ${{ github.repository_owner }}
          outputs: |
            dist/github-contribution-grid-snake.svg
            dist/github-contribution-grid-snake-dark.svg?palette=github-dark
          
          
      # <build_dir>の内容をブランチにプッシュ
      # 内容はhttps://raw.githubusercontent.com/<github_user>/<repository>/<target_branch>/<file>で利用可能、またはgithubページとして
      - name: push github-contribution-grid-snake.svg to the output branch
        uses: crazy-max/ghaction-github-pages@v3.1.0
        with:
          target_branch: output
          build_dir: dist
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

微信截图_20240117154418

微信截图_20240117154620

README ファイルを編集する#

リポジトリのホームページに戻り、Edit READMEをクリックします:

微信截图_20240117155101

いくつかのプリセットの自己紹介テンプレートがすでにあることがわかりますが、ここでは無視しても大丈夫です。コメントアウトされているため、実際には表示されません:

微信截图_20240117155401

以下のコードをテキストボックスにコピーし、ユーザー名の部分を自分のものに置き換えます(すなわち、すべてのDevJaysonを置き換えます)。Commit changesボタンをクリックします。このコードの目的は、スネークアニメーションを読み込み、スネークの明暗スタイルをあなたの Github の明暗スタイルに自動的に適応させることです。

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake-dark.svg">
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake.svg">
  <img alt="github contribution grid snake animation" src="https://raw.githubusercontent.com/DevJayson/DevJayson/output/github-contribution-grid-snake.svg">
</picture>

微信截图_20240117160414

この時点ではスネークはまだ表示されません。手動で実行する必要があります(2 時間ごとに更新するように設定されているため)、その後は全自動になります。

Actionをクリックします:

微信截图_20240117160623

generate animationをクリックし、Run workflowをクリックします:

微信截图_20240117160654

少々お待ちいただくと、実行成功が表示され、再度リポジトリのホームページに戻ると、スネークアニメーションが読み込まれているのが見えます:

微信截图_20240117161112

微信截图_20240117161218

注:生成されたスネークアニメーションファイルはリポジトリのoutputブランチに保存されています:
微信截图_20240117161444

🧪ブログ記事の同期#

あなたにブログサイトがあり、サイトに RSS 機能がある場合のみ、このツールを設定できます。

🔗blog-post-workflowを利用して、README ファイルに最近のブログ記事を表示します。

ファイルを作成する#

同様にリポジトリのホームページに戻り、Create new fileをクリックします:

微信截图_20240117163150

以下のパスをファイル名テキストボックスにコピーします:

.github/workflows/blog-post-workflow.yml

以下のコードを下の大きなテキストボックスにコピーし、最後の行のfeed_listの内容を自分のサイトの RSS リンク(例:https://realyujie.xlog.app/feed)に変更し、Commit changesをクリックして作成を完了します。

その他の構築パラメータについては🔗こちらを参照してください。表示する記事の数、テーマなどが含まれます。

name: Latest blog post workflow
on:
  schedule: # ワークフローを自動的に実行
    - cron: '0 */2 * * *' # 毎時間、ちょうどの時間に実行
  workflow_dispatch: # ワークフローを手動で実行(cronが呼び出されるのを待たずに)、GitHub Actions Workflowページから直接
permissions:
  contents: write # 生成された内容をREADMEに書き込むため

jobs:
  update-readme-with-blog:
    name: 最新のブログ記事でこのリポジトリのREADMEを更新
    runs-on: ubuntu-latest
    steps:
      - name: チェックアウト
        uses: actions/checkout@v3
      - name: ブログの投稿を取得
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "https://realyujie.xlog.app/feed"

微信截图_20240117164207

README ファイルを編集する#

再度リポジトリのホームページに戻り、Edit READMEをクリックします:

微信截图_20240117155101

以下の内容を README に配置します。プログラムは自動的に記事のタイトル、リンクなどを取得して表示します。Commit changesをクリックします:

📕 &nbsp;**最新のブログ記事**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

微信截图_20240117164728

この時点では記事リストはまだ表示されません。同様に手動で実行する必要があります。Actionをクリックします:

微信截图_20240117165214

Latest blog post workflowをクリックし、Run workflowをクリックします:

微信截图_20240117165232

少々お待ちいただくと、実行成功が表示され、リポジトリのホームページに戻ると、完璧に記事リストが表示されます:

微信截图_20240117165833

その他の設定#

リポジトリの設定に入り、Settingsをクリックし、Actions -> Generalを選択します。

ページを一番下までスクロールし、Workflow permissions を見つけ、オプションをRead and write permissionsに変更し、Allow GitHub Actions to create and approve pull requestsを選択して保存Saveをクリックします:

微信截图_20240117170028

微信截图_20240117170502

これで、このツールの設定も完了です。Github の個人ページに戻ると、先ほど設定した 2 つの小工具が表示されます:

微信截图_20240117171721

教程を書くために、この文章はブロガーの Github のサブアカウントで設定されたものを使用しています。

あなたのオープンソース貢献が少ない場合、貢献グラフもブロガーのサブアカウントと同様に、いくつかの点しか表示されないか、全く表示されないかもしれません。徐々に貢献を増やしていくと、どんどん見栄えが良くなります。

その他#

最初にコメントアウトされていた自己紹介を覚えていますか?コメントを解除し、適切に修正して表示させることができます。ブロガーのメインアカウントの🔗README ファイルを参考にしてください。

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。