GitHub プロファイルをパーソナライズして動的にする

の数で 先週の JavaScript ウィークリー、私たちは特に見つけます Bun と Typescript を使用した動的 GitHub プロファイル ここで著者は、GitHub プロファイルをどのようにパーソナライズし、何よりも動的にするかを説明しています。 この記事を読んで、同じテーマに関する投稿が下書きにあったことを思い出しました。少し異なるアプローチを使用しているので、この記事を仕上げて少し話す機会です。 配管 舞台裏で。

GitHub プロファイルのカスタマイズは簡単にセットアップできます、ユーザー名のような名前のリポジトリを作成するだけです username/username ファイルを追加します README.md ルートにあるので、そのコンテンツがプロファイルに含まれるようになります。 私にとって、 README.md の https://github.com/dpobel/dpobel プロフィール ページにあり、次のような内容になります。

したがって、プロファイルに最新の情報が表示されるように、このファイルを定期的に更新する必要があります。 私の場合、短い紹介に加えて、このサイトで公開されている最新の投稿と、いくつかの選択した投稿を表示したいと考えています。 上で引用した記事の著者のように、コードをリポジトリに置くこともできます。 username/username そして定期的にスクリプトを実行します 経由 GitHub アクション (またはその他) を更新する README.md RSS フィードから。 ただし、このアプローチには少なくとも 2 つの欠点があると思います (このアプローチには、ある程度の単純さという利点もあります)。

1. 必ずリポジトリにコードを追加する必要があります username/username 多少のメンテナンスが必要です
2. 更新アクションは、このサイトのアクティビティに関係なく定期的に実行されるように設定する必要があります。このあたりの投稿の浮き沈みを考えると、おそらくリソースの効率的な使用法とは言えません 🙂

さらに、このカスタマイズを実装したいときも、同様のニーズがありました。 https://dpobel.github.io/ ここでの活動に応じて。 ここでも、対応するリポジトリに小さなコードを追加してページを構築できた可能性がありますが、同じ欠点が発生する可能性があります。

つまり、代替手段を探しているときに、次のことを発見しました。 GitHub は、 ワークフロー GitHub アクション したがって、2 番目の欠点を解消する方法が提供されます。 そこから、このサイトの構築に簡単に README.md デポジット用 username/username および目的の HTML ページ https://dpobel.github.io/ そして展開の最後には、それだけで十分でした トリガーを引く ワークフロー これらの各リポジトリの API 別の GitHub アクション 誰が満足できるか ファイルをダウンロードして、 コミッター。 このように、ロジックのほとんどは、外部更新を推進するこのサイトの構築に集中しています。

私の魔法の薬のレシピを要約すると 🧙:

1. を生成します README.md 残りの部分とともにデプロイされるようにサイトに配置します (または、動的 CMS を使用している場合は既知の URL で利用できるようにします)。
2. を設定します ワークフロー このファイルをダウンロードする GitHub アクションと コミッター デポジット上 username/username
3. デプロイ中などのイベントで、または新しいコンテンツの公開で CMS を使用している場合は、API 呼び出しを行ってこれをトリガーします。 ワークフロー。

そして、すぐに魔法が起こります✨️ 同じメカニズムが、 https://dpobel.github.io/。 私が信じたら の歴史 コミットする プロフィールのデポジットの ら ページのそれから、この魔法は、これらの堆積物に対してほとんど手動介入を行わずに 3 年強機能し続けています。