GitHub Profileをカッコよくする 3 Tips

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に追加するだけです。

![image_name](image_url)

アップロード方法1

repositoryにイメージを追加する方法があります。
自分は画像を一つだけしかつかってないので、ルートに置いています。
ただし、普段Readme用に画像が必要な場合はimgフォルダを作ってその中にアップロードしています。
あとは、アップロードした画像のURLを↑に入れて、Readmeに加えます。

アップロード方法2

Issueを使う方法があります。自分はWikiに画像を加える場合はこの方法を使っています。
方法は簡単で、適当な名前で新しいIssueを作成して、コメント欄に画像をドラッグ・アンド・ドロップします。すると、上記の![image_name](image_url)がコメント欄に生成されます。
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>&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;
 <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>&nbsp;&nbsp;&nbsp;&nbsp;
  <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>&nbsp;&nbsp;&nbsp;&nbsp;
<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を使っているけど、業務外はあまりという方はあんまりおいてもおおっ、みたいなのはないかもしれないです。

[![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra)](https://github.com/anuraghazra/github-readme-stats)

最後に一応、自分のrepositoryへのリンクを置いておきます
https://github.com/koji