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.
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.
Now It will redirect to a new page and you can see the window below.
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.
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.
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.
Top comments (20)
Hi Sabesan, Please use the
gautamkrishnar/blog-post-workflowinstead ofkhaosdoctor/blog-post-workflowif you want the latest features and optimisations.khaosdoctor/blog-post-workflowhas the outdated version of blog post workflow's code.khaosdoctor/blog-post-workflowis a fork of the projectgautamkrishnar/blog-post-workflowwhich Lucas created when he contributed to the blog-post-workflow project.Yes, I used your's neh?? If it is not give me the link <3
Hi, I meant in gist you are using in your example: gist.github.com/sabesansathanantha...
Ok sure. but I mentioned your name <3
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.
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
🚀 Generate GitHub profile README easily with the latest add-ons like visitors count, GitHub stats, etc using minimal UI.
GitHub Profile README Generator
View Demo · Report Bug · Request Feature
Loved the tool? Please consider donating💸 to help it improve!
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.Try the tool: GitHub Profile README Generator
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 READMEto get your README inmarkdown…Nice man.. Great Job.. <3 <3 <3
I had fun building too, here is mine: github.com/arshsahzad
Nice...
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
I will take a look on that. Thank you for your suggestions. or Could you please contribute to that readme, please?
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
awesomebadge until it's accepted (Yeah, everyone does the opposite 😜)Yes I will change the name and Try it. Thank you.
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!!
Add your recent activity to your profile readme!
Recent Activity
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)
Settings
The Action currently has the following Settings that you can set through the
withoption.GH_USERNAMECOMMIT_MSG⚡ Update README with the recent activityMAX_LINES5If you find the github action useful, show some love by giving a ⭐ on the github repo
I have recently created this to add some developer quotes to the GitHub Profile Readme. 😁
🔥 Add Programming Quotes To Your GitHub Readme
Github Readme Quotes
Developer Quotes for your Github Readme.
View Demo · Report Bug
Features✨
Adding Soon🚧
Usage⚡️
Copy the markdown below and paste it in your Github Readme.
[](https://github.com/piyushsuthar/github-readme-quotes)Options
Demo
Vertical
Horizontal
Author🤗
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.
One of my friends implements this to his profile readme. Thank you bro. It is awesome.
looks really great man... check mine out :)
github.com/SABERGLOW
It is also awesome. Nice brother.
You should have just forked and use Creative Profile Readme rather than copying it.
how to add the languages?