GitHubのプロフィールに独自のコンテンツを載せてみよう。
dev.to にてGitHubのプロフィールを素敵にするための記事が載っておりました。
こちらの記事を参考にGitHubのプロフィールをモリモリにしてみましたので手順をご紹介いたします。
基本的な手順
GitHubのプロフィール画面に独自のコンテンツを載せる準備は以下の手順でおこないます。
まずGitHubの新規リポジトリを作成します。こちらからどうぞ ⇨ repo.new
リポジトリ名をGitHubのアカウント名と同じ名前にします。
"Public"にチェックを入れて、公開リポジトリに指定します。
"Add a README file"にチェックを入れて、README.mdを作成させます。
"Create Repository"をクリックしてリポジトリの作成する。
以上です！
上記の手順でgithub.com/アカウント名にて表示されるプロフィールの画面に、作成されたREADME.mdのコンテンツが追加されます。
もちろんREADME.mdの中身はGitHub Markdownの形式で記載できますので、ここにいろいろな文章や画像などを載せればオリジナルのプロフィールが作成可能です。
プロフィールのを彩るガジェット
プロフィールのREADME.mdにて表示できるような様々なガジェットが公開されていますので以下にご紹介します。
1. GitHub README Stats
リポジトリやコミットの状況などのStats情報を以下のようなカードとしてSVGを生成してくれます。
Markdownにて、
[](https://github.com/anuraghazra/github-readme-stats)
のような記述で上記のようなSVGが生成されます。usernameのパラメタを自分のアカウント名に変更します。
URLのパラメーターにてカスタマイズが可能で、&show_icons=true&theme=など付けると様々な配色テーマで生成してくれます。
サンプルは以下のような感じです。
各カラーも直接指定可能です。
2. GitHub profile Trophy
上記のStats情報に似たようなガジェットですがアカウント情報から以下のような"トロフィー"を生成してくれます。
Makedownでは以下のように記述します。
[](https://github.com/ryo-ma/github-profile-trophy)
こちらもusernameのパラメタを自分のアカウント名に変更します。
また&theme=で配色テーマの指定や&row=2、&column=2などでレイアウトのカスタマイズなどが行えます。
そのほかのオプションもモリモリです。
3. GitHub streak
以下のようなアカウントの"継続性"についてのStats情報を表示してくれます。
こちらのMarkdown用のURLなどは上記のサイトで生成可能です。
配色テーマや線の色などカスタマイズ可能です。
4. 画像
画像は同じリポジトリにアップロードすれば相対パスで指定可能です。あとはMarkdownの画像指定でOKです。
またサイズ指定したい場合は、<img src="画像の相対パス・ファイル名">タグでwidth、heightを指定するようになります。
5. テキスト・コンテンツの並び
Markdownの中に、一部のHTMLは直書きできます。
水平方向のテキストやコンテンツの並びを調整したい場合は<p align="center">などと指定できます。
<p align="center">
センターテキスト
</p>
などでコンテンツのセンタリングができます。
というわけで
自分のプロフィールをゴリゴリにしてみました。
GitHubのプロフィールでもいろいろ遊べますね〜！
ちなみにプロフィールの横顔アイコンは、↓のサービスを使ってみました。
こちらもスゴイ。めっちゃいろいろできる。これだけで時間泥棒です。
というわけで本日は以上です。
↧