Beautify Your GitHub Profile README
Tags: github, markdown, devops, beginners
Published: 2020-08-15 16:58:02

I don't know how many of you know about adding a GitHub profile README. GitHub recently released a feature that allows users to create a profile-level README to display prominently on their GitHub profile. The GitHub profile-level README feature allows more content than the bio profile, supports markdown, which means you can play more visually with the content, and the README becomes considerably more accessible as it is positioned above pinned repositories and takes up as much space above the web page fold as you want. In this article, I am going to instruct you on how to create a GitHub profile README and how to take it to the next level. You are going to add an automated feed of your blog posts and GitHub stats.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nsydhzlwpyp77rd6d6cl.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/btpf3eu98jcnpo8kien6.png)

# First things first

Customizing your GitHub profile page with a README file is as simple as creating a repo that is named the same as your username. For example, my GitHub username is [sabesansathananthan](https://github.com/sabesansathananthan) so I created a new repository with the name sabesansathananthan. _Note: at the time of this writing, in order to access the profile README feature, the letter-casing must match your GitHub username and your GitHub repository visibility should be in public._ Now, you are going to create a folder on your computer named the same as your GitHub username. Then you have that open in vs code. Then you create a README.md file inside that folder. README.md is a markdown file. The point of this article isn't to teach about markdown. I am going to assume that you have a basic knowledge of markdown and if not just copy and paste my code and modify it to fit your needs. push your changes to your repository.Need to brush up on Markdown Syntax? [Check out this Markdown Cheatsheet](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf).

{% gist https://gist.github.com/sabesansathananthan/66dd93b873f3507cb4533feeea04b44a.js %}

# Add List of Blog Posts

To add list of your blog posts you are going to use a GitHub action called [blog-post-workflow](https://github.com/gautamkrishnar/blog-post-workflow) and this was created by [Gautam krishna R](https://github.com/gautamkrishnar). You need to add `<!-- MEDIUM:START --> <!-- MEDIUM:END -->` and `<!-- DEVTO:START --> <!-- DEVTO:END -->` comment to your README file if you have medium and dev.to. I already added those comments in the above gist. so the github action workflow will add the actual blog posts in between these comments. Now go to your repository and click the actions tab and click on the "set up a workflow yourself' link.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8zxccef2b2bzgnq8e63y.JPG)

Now It will redirect to a new page and you can see the window below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75yrstt1ud5s1m4baoeo.JPG)

change the file name as `blog-post-workflow.yml` then copy and paste the below code.

{% gist https://gist.github.com/sabesansathananthan/cde1a40dd17c92111cbda4285d0c7027 %}

In the `feed-list` option replace the `username` with your dev.to and medium username and click the button `start commit` and then click the button `Commit new file.` click the `Actions` tab again and click the `Latest blog post workflow`. If you click the `Run workflow` button there will be a popup open and click the Green color `Run workflow` button in the popup window. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n179fhu5ivtai13mhuiv.JPG)

# Add GitHub Stats

Lastly, you are going to add GitHub stats. For this we are going to use [github-readme-stats](https://github.com/anuraghazra/github-readme-stats) and this is from [anuraghazra](https://github.com/anuraghazra). This is a very simple method. Go back to your vs code and pull all the changes. and then in the README, you are going to add it right after the blog post. Therefore you are going to add the below image tags and Replace `sabesansathananthan` with your GitHub username.

``` HTML
<a href="https://github.com/sabesansathananthan">
<img align="center" alt="sabesan's Github Stats" src="https://github-readme-stats.codestackr.vercel.app/api?username=sabesansathananthan&show_icons=true&hide_border=true&count_private=true&include_all_commits=true&theme=radical" /></a>

<a href="https://github.com/sabesansathananthan">
  <img align="center" src="https://github-readme-stats.anuraghazra1.vercel.app/api/top-langs/?username=sabesansathananthan&layout=compact&theme=radical" />
</a>
```  
Now your profile is pretty cool and awesome.