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

## What is GitHub Profile?
GitHub Profileとは最近加えられた機能で、Githubでusernameと同じ名前のrepositoryを作成することで、https://github.com/usernamにMarkdown記法で情報を追加することができるようになります。

以前はrepositoryを最大6つ表示することが出来るだけだったので、導入するとだいぶにぎやかになります

![profile.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/db4c6b60-d2cf-0bb7-4f9e-8e76bf7ae3a9.png)



## 作り方
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秒弱で終わります。
![Screenshot 2020-08-06 161430.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/f9996a9d-4e12-67f8-4964-9799da4317f1.png)

[Before]
![before.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/d2df22a8-7cdc-4e98-0a94-8d49b9c36af7.png)


[After]
![after.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/24723/788c0768-29bc-91ea-630c-92d71f675fec.png)



## おまけ
GitHubの情報を表示してくるWidgetをおまけとして紹介しておきます。

https://github.com/anuraghazra/github-readme-stats/blob/master/readme_ja.md

詳細は上記を参照して下さい。
下記の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)
```

[![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