What is GitHub Profile?
GitHub Profileとは最近加えられた機能で、Githubでusernameと同じ名前のrepositoryを作成することで、https://github.com/usernamにMarkdown記法で情報を追加することができるようになります。
以前はrepositoryを最大6つ表示することが出来るだけだったので、導入するとだいぶにぎやかになります
作り方
https://github.com で 新しくrepositoryを作ります。
このときrepository名はusernameと同じにする必要があります。
すると、専用のReadmeが生成されます。
自分の場合はusernameがkojiなので、repository名はkojiになります。
<!--
**koji/koji** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
Here are some ideas to get you started:
- 🔭 I’m currently working on ...
- 🌱 I’m currently learning deno/flutter/coreML
- 👯 I’m looking to collaborate on something fun
- 🤔 I’m looking for help with ...
- 💬 Ask me about ...
- 📫 How to reach me: ...
- 😄 Pronouns: ...
- ⚡ Fun fact: ...
-->
本ポストでは下記を足す方法を紹介します。
イメージを追加する
Readmeに文字だけだと、少しさみしいので、画像を追加します。
Readmeに画像を入れるには、画像をアップロードする必要があります。
どこかにすでにアップロードされている画像を利用する場合は下記をReadmeに追加するだけです。
アップロード方法1
repositoryにイメージを追加する方法があります。
自分は画像を一つだけしかつかってないので、ルートに置いています。
ただし、普段Readme用に画像が必要な場合はimgフォルダを作ってその中にアップロードしています。
あとは、アップロードした画像のURLを↑に入れて、Readmeに加えます。
アップロード方法2
Issueを使う方法があります。自分はWikiに画像を加える場合はこの方法を使っています。
方法は簡単で、適当な名前で新しいIssueを作成して、コメント欄に画像をドラッグ・アンド・ドロップします。すると、上記のがコメント欄に生成されます。
repositoryにReadme以外は置きたくないという場合はこの方法がおすすめです。
画像をセンタリングした場合は、Htmlを使って書くのが一番手っ取り早いと思います。
バッジを追加する
次はバッジを追加する方法です。
下記をコピペして、<yours>の部分を置き換えればおわりです。
<p align="center">
<a href="https://dev.to/<yours>"><img src="https://img.shields.io/badge/DEV.TO-%230A0A0A.svg?&style=for-the-badge&logo=dev-dot-to&logoColor=white" /> </a>
<a href="https://twitter.com/<yours>"><img src="https://img.shields.io/badge/twitter-%231DA1F2.svg?&style=for-the-badge&logo=twitter&logoColor=white" /></a>
<a href="https://www.linkedin.com/in/<yours>/"><img src="https://img.shields.io/badge/linkedin-%230077B5.svg?&style=for-the-badge&logo=linkedin&logoColor=white" /></a>
<a href="mailto:<yours>?subject=Came%20from%20Github"><img src="https://img.shields.io/badge/gmail-%23D14836.svg?&style=for-the-badge&logo=gmail&logoColor=white" /></a>
<p>
ブログFeedを追加する
折角なので、ちょっとだけ動的な要素も入れてみようということでブログ最新5件を表示させます。
step1
下記の2行をReadmeのフィードを表示させたい場所にコピペします。
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
step2
Feedを取ってくるのに、Github Actionを使います。
ref: https://github.com/gautamkrishnar/blog-post-workflow
Github/localで.github/workflowsのフォルダ構成を作成し、その中にblog-post-workflow.ymlを作成します。作成できた、下記をコピペして、feed_listをご自分のものに変更して下さい。
ちなみに、Medium, WordPress, YoutubeのFeedも取ってこられます。
詳細: https://github.com/gautamkrishnar/blog-post-workflow
name: Latest blog post workflow
on:
schedule:
# Runs every hour
- cron: '0 * * * *'
workflow_dispatch:
jobs:
update-readme-with-blog:
name: Update this repo's README with latest blog posts
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: gautamkrishnar/blog-post-workflow@master
with:
feed_list: "https://dev.to/feed/kojikanao"
step3
Actionsにアクセスして、アクションを走らせます。
恐らく、30秒弱で終わります。
[Before]
[After]
おまけ
GitHubの情報を表示してくるWidgetをおまけとして紹介しておきます。
詳細は上記を参照して下さい。
下記のusernameを変更することで、簡単にGitHubの情報を表示してくれます。
自分は現状利用してはいません。理由はランクがA+でしかも、A+がデフォルト設定になっているようなので、あんまり意味はないかなぁと。ちなみに、プライベートrepositoryの情報は収集対象になっていないので、業務GitHubを使っているけど、業務外はあまりという方はあんまりおいてもおおっ、みたいなのはないかもしれないです。
[](https://github.com/anuraghazra/github-readme-stats)
最後に一応、自分のrepositoryへのリンクを置いておきます
https://github.com/koji