DEV Community

Cover image for Beautify Your GitHub Profile README
Sabesan Sathananthan
Sabesan Sathananthan

Posted on • Updated on

Beautify Your GitHub Profile README

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

Alt Text

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 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.

Add List of Blog Posts

To add list of your blog posts you are going to use a GitHub action called blog-post-workflow and this was created by Gautam krishna R. 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

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

Alt Text

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

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

Add GitHub Stats

Lastly, you are going to add GitHub stats. For this we are going to use github-readme-stats and this is from 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.

<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>
Enter fullscreen mode Exit fullscreen mode

Now your profile is pretty cool and awesome.

Discussion (20)

Collapse
gautamkrishnar profile image
Gautam krishna R • Edited on

Hi Sabesan, Please use the gautamkrishnar/blog-post-workflow instead of khaosdoctor/blog-post-workflow if you want the latest features and optimisations. khaosdoctor/blog-post-workflow has the outdated version of blog post workflow's code. khaosdoctor/blog-post-workflow is a fork of the project gautamkrishnar/blog-post-workflow which Lucas created when he contributed to the blog-post-workflow project.

Collapse
thesabesan profile image
Sabesan Sathananthan Author

Yes, I used your's neh?? If it is not give me the link <3

Collapse
gautamkrishnar profile image
Gautam krishna R • Edited on

Hi, I meant in gist you are using in your example: gist.github.com/sabesansathanantha...

Thread Thread
thesabesan profile image
Sabesan Sathananthan Author

Ok sure. but I mentioned your name <3

Thread Thread
gautamkrishnar profile image
Gautam krishna R

Yes. Thanks for writing the blog bro. Why i mentioned that is because some people might just copy paste the gist you kept in the blog and they may end up with an outdated version of the code running on their readme.

Collapse
rahuldkjain profile image
Rahul Jain

Tired of updating GitHub profle README with latest features again & again?

If yes, then I have developed a tool to do the same for you in just 1 click πŸ€“

πŸš€ Try the tool: live tool

If you find the tool useful, show some love by giving a ⭐ on github repo

GitHub logo rahuldkjain / github-profile-readme-generator

πŸš€ Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.

GitHub Profile Readme Generator

GitHub Profile README Generator

github-profile-readme-generator license github-profile-readme-generator forks github-profile-readme-generator stars github-profile-readme-generator issues github-profile-readme-generator pull-requests join discord community of github profile readme generator

github-profile-readme-generator gif

View Demo Β· Report Bug Β· Request Feature

Loved the tool? Please consider donating πŸ’Έ to help it improve!

sponsor github profile readme generator Buy Coffee for rahuldkjain Buy Me A Coffee

Tired of editing GitHub Profile README with new features?

This tool provides an easy way to create a GitHub profile readme with the latest add-ons such as visitors count, github stats, etc.

πŸš€ Demo

Try the tool: GitHub Profile README Generator

🧐 Features

Just fill in the details such as Name, Tagline, Dev Platforms Username, Current Work, Portfolio, Blog, etc. with a minimal UI.

  • Uniform Dev Icons

  • Uniform Social Icons

  • Visitors Counter Badge

  • GitHub Profile Stats Card

  • GitHub Top Skills

  • GitHub Streak Stats

  • Dynamic Dev(.)to Blogs (GitHub Action)

  • Dynamic Medium Blogs (GitHub Action)

  • Dynamic Personal Blogs from RSS Feed (GitHub Action)

  • Wakatime Stats contribute

  • Buy Me A Coffee button

Click on Generate README to get your README in markdown…

Collapse
thesabesan profile image
Sabesan Sathananthan Author

Nice man.. Great Job.. <3 <3 <3

Collapse
arshsahzad profile image
Arsh Sahzad

I had fun building too, here is mine: github.com/arshsahzad

Collapse
thesabesan profile image
Sabesan Sathananthan Author

Nice...

Collapse
puneetgopinath profile image
Puneet Gopinath • Edited on

If you want to add your recent activity on your github profile readme.
You can't keep updating your recent activity on github daily.
Instead consider this github action if you want to show your recent activity in your profile readme!!

GitHub logo Readme-Workflows / recent-activity

Add your recent activity to your profile readme!

Recent Activity

GitHub stars GitHub forks GitHub issues GitHub repo size Lines of code Discord Chat Contributor Covenant

This GitHub Action is a Fork of the original GitHub Activity Readme Action by jamesgeorge007.
Its our goal is to improve the original GitHub Action while also providing new features for the users.

Live Preview

This is an example live preview that is updated every time a commit is pushed using github actions.

Last Updated: Thursday, May 20th, 2021, 3:17:39 PM (GMT)

  1. ❗️ Closed issue #5 in Readme-Workflows/recent-activity
  2. πŸŽ‰ Merged PR #6 in Readme-Workflows/recent-activity
  3. πŸ—£ Commented on #3 in Readme-Workflows/recent-activity
  4. ❗️ Closed issue #4 in Readme-Workflows/recent-activity
  5. πŸ’ͺ Opened PR #6 in Readme-Workflows/recent-activity

Settings

The Action currently has the following Settings that you can set through the with option.

Option Description Default Supported Placeholder
GH_USERNAME The User to get latest activity from Repository Owner
COMMIT_MSG The Commit Message to use when updating the README ⚑ Update README with the recent activity
MAX_LINES How many activities to display 5
…

If you find the github action useful, show some love by giving a ⭐ on the github repo

Collapse
fkrasnowski profile image
Franciszek Krasnowski

Good readme, but.. You have just hurt the community behind the awesome. Please read the creating awesome list docs because your list does not meet the standards

Collapse
thesabesan profile image
Sabesan Sathananthan Author

I will take a look on that. Thank you for your suggestions. or Could you please contribute to that readme, please?

Collapse
fkrasnowski profile image
Franciszek Krasnowski

I think this list is the current pretender to be added to awsome (it needs some finishing touch). So you will need to create something better than that. I think the best choice will be to contribute to it, cause it's great. And you should not include an awesome badge until it's accepted (Yeah, everyone does the opposite 😜)

Thread Thread
thesabesan profile image
Sabesan Sathananthan Author

Yes I will change the name and Try it. Thank you.

Collapse
piyush profile image
Piyush Suthar

I have recently created this to add some developer quotes to the GitHub Profile Readme. 😁

GitHub logo PiyushSuthar / github-readme-quotes

πŸ”₯ Add Programming Quotes To Your GitHub Readme

Github Readme Quotes

Developer Quotes for your Github Readme.

Twitter: piyushsthr

View Demo Β· Report Bug

Features ✨

Adding Soon 🚧

  • Customization Options
  • More features

Usage ⚑️

Copy the markdown below and paste it in your Github Readme.

[![Readme Quotes](https://quotes-github-readme.vercel.app/api?type=horizontal)](https://github.com/piyushsuthar/github-readme-quotes)

Options

Options default Available
type vertical horizontal, vertical

Demo

Vertical

You don't need to add ?type=vertical parameter.

readme Quotes

Horizontal

You need to add ?type=horizontal parameter.

readme Quotes

Author πŸ€—

πŸ‘€ Piyush Suthar

Contributing 🀝

Contributions, issues and feature requests are welcome!
Feel free to check issues page.

Special Thanks ❀

Inspired from AnuragHazra/github-readme-stats.

skolakoda/programming-quotes-api for Quotes API.

Show your support 🌈

Give a ⭐️ if this project helped you!


Made with ❀️ and JavaScript.






Collapse
thesabesan profile image
Sabesan Sathananthan Author • Edited on

One of my friends implements this to his profile readme. Thank you bro. It is awesome.

Collapse
saberglow profile image
Wali Ullah

looks really great man... check mine out :)

github.com/SABERGLOW

Collapse
thesabesan profile image
Sabesan Sathananthan Author

It is also awesome. Nice brother.

Collapse
coderjojo profile image
coderjojo • Edited on

You should have just forked and use Creative Profile Readme rather than copying it.

Collapse
parajdox profile image
John Dave Dalmao

how to add the languages?