又到了一年一度折腾自己 Github 主页的时候了,这篇文章就以我的主页为例,讨论一下各种有趣的装饰小工具和途中遇到的坑。
自己の README ファイルを作成する#
新しいリポジトリを作成し、あなたの Github ユーザー名と同じ名前にします(大文字と小文字を一致させる必要があります)。Public
を選択し、Add a README file
を選択して、最下部のCreate repository
ボタンをクリックします:
少々お待ちいただくと、作成したリポジトリに入ります:
次に、このリポジトリのREADME.md
ファイルで装飾小工具を設定したり、自分の紹介文を書いたりできます。
🧪貢献グラフスネーク#
🔗snkを利用して、README ファイルに貢献スネークアニメーションを表示し、毎日自動的にデータを更新します。
ファイルを作成する#
Create new file
ボタンをクリックします:
以下のパスをファイル名テキストボックスにコピーすると、自動的に認識されます:
.github/workflows/main.yml
次に、以下のコードを下の大きなテキストボックスにコピーします(コードは🔗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 }}
README ファイルを編集する#
リポジトリのホームページに戻り、Edit README
をクリックします:
いくつかのプリセットの自己紹介テンプレートがすでにあることがわかりますが、ここでは無視しても大丈夫です。コメントアウトされているため、実際には表示されません:
以下のコードをテキストボックスにコピーし、ユーザー名の部分を自分のものに置き換えます(すなわち、すべての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>
この時点ではスネークはまだ表示されません。手動で実行する必要があります(2 時間ごとに更新するように設定されているため)、その後は全自動になります。
Action
をクリックします:
generate animation
をクリックし、Run workflow
をクリックします:
少々お待ちいただくと、実行成功が表示され、再度リポジトリのホームページに戻ると、スネークアニメーションが読み込まれているのが見えます:
注:生成されたスネークアニメーションファイルはリポジトリの
output
ブランチに保存されています:
🧪ブログ記事の同期#
あなたにブログサイトがあり、サイトに RSS 機能がある場合のみ、このツールを設定できます。
🔗blog-post-workflowを利用して、README ファイルに最近のブログ記事を表示します。
ファイルを作成する#
同様にリポジトリのホームページに戻り、Create new file
をクリックします:
以下のパスをファイル名テキストボックスにコピーします:
.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"
README ファイルを編集する#
再度リポジトリのホームページに戻り、Edit README
をクリックします:
以下の内容を README に配置します。プログラムは自動的に記事のタイトル、リンクなどを取得して表示します。Commit changes
をクリックします:
📕 **最新のブログ記事**
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
この時点では記事リストはまだ表示されません。同様に手動で実行する必要があります。Action
をクリックします:
Latest blog post workflow
をクリックし、Run workflow
をクリックします:
少々お待ちいただくと、実行成功が表示され、リポジトリのホームページに戻ると、完璧に記事リストが表示されます:
その他の設定#
リポジトリの設定に入り、Settings
をクリックし、Actions
-> General
を選択します。
ページを一番下までスクロールし、Workflow permissions を見つけ、オプションをRead and write permissions
に変更し、Allow GitHub Actions to create and approve pull requests
を選択して保存Save
をクリックします:
これで、このツールの設定も完了です。Github の個人ページに戻ると、先ほど設定した 2 つの小工具が表示されます:
教程を書くために、この文章はブロガーの Github のサブアカウントで設定されたものを使用しています。
あなたのオープンソース貢献が少ない場合、貢献グラフもブロガーのサブアカウントと同様に、いくつかの点しか表示されないか、全く表示されないかもしれません。徐々に貢献を増やしていくと、どんどん見栄えが良くなります。
その他#
最初にコメントアウトされていた自己紹介を覚えていますか?コメントを解除し、適切に修正して表示させることができます。ブロガーのメインアカウントの🔗README ファイルを参考にしてください。