github-readme-statsをGitHub以外で使うと素敵

先に結論だけ

ReadMe Card

GitHub Readme Statsを使うと ~~Qiitaや~~ Blogにもリポジトリカードが貼り付けられます。素敵です。

2021/11/15追記 Qiitaがリンクカード機能をサポートしました。Qiitaの記事でリンクを装飾する場合、特別な処理は不要です。
リリースノート - Qiita
https://qiita.com

GitHub Readme Statsとは

GitHubプロフィール

GitHubプロフィールとは、ユーザーのプロフィールページ(https://github.com /【ユーザーネーム】)に自由に略歴を追加する機能です。ユーザー名と同名のパブリックリポジトリを作成し、READMEファイルを設置します。そのREADMEファイルはプロフィールページに自動的に表示されます。

If you add a README file to the root of a public repository with the same name as your username, that README will automatically appear on your profile page. You can edit your profile README with GitHub Flavored Markdown to create a personalized section on your profile.

GitHub : プロフィールについて

参考記事 : GitHub profile(readme.md)の最新情報まとめ

GitHub Readme Stats

github-readme-statsは、このGitHubプロフィールを装飾するサービスです。GitHubアカウントのさまざまな情報を分析し、プロフィールカードを生成します。生成されたカードはWebAPIからSVG画像として呼び出せます。

GitHub Extra Pins

GitHub Readme StatsにはGitHub Extra PinsというAPIがあります。このAPIはリポジトリの言語、スター数やフォーク数などの詳細を表示します。このAPIは、GitHubプロフィール内でオススメのリポジトリを目立たせることを目的としています。

GitHub以外のサービスからも呼び出せる

GitHub Readme StatsはGitHubに限らず、オンラインであればどこからでも呼び出せます。

MarkDown

Qiitaのようにマークダウンエディターのあるサービスであれば、利用例にある書式そのままで記事中にリポジトリカードを追加できます。

[![ReadMe Card](https://github-readme-stats.vercel.app/api/pin/?username=<ユーザー名>&repo=<リポジトリ名>)](https://github.com/<リポジトリのURL>)

ReadMe Card

html

htmlタグの利用が許可されているサービスなら、imgタグのsrc属性にAPIエンドポイントを指定すればSVG画像が読み込めます。

<img src="https://github-readme-stats.vercel.app/api/pin/?username=<ユーザー名>&repo=<リポジトリ名>">

リポジトリカードの効果

GitHub Extra Pinsのカードは、読者にリポジトリを瞬時に伝えられます。読者が高速でページをスクロールしていても、カードがあればそこでスクロールを止めてくれる可能性が高まります。みなさんが自身のリポジトリを多くの人に知ってもらいたい場合、この視認性の高さは強力な武器になります。

以上、ありがとうございました。

参考記事

GitHub Readme Stats を利用してGitHubプロフィールをカッコよくする