Your beginner GithubProfile-README Guide( A Guide to create Awesome Profile-README). 😃 Github recently released a feature which allows users to create a profile-level README to display on their GitHub profile page, This is a great way to introduce yourself to the Github community as you highlight your skills and projects.
- What's a Github Profile-README?
- How do I create a Profile-README?
- What to add to your README?
- Tired of editing Github Profile-README?
- Additional References
- Additional Resources
- Contributions
Apparently www.github.com/#your-username/#your-username is a ✨special ✨ repository that you can use to add a README.md to your GitHub profile.
The GitHub Profile-level README feature allows more content than the profile bio, supports markdown which means you can play around with
the content more visually and the README.md is significantally more visible as it is placed above pinned repositories
and takes up as much space above the fold of the webpage as you like.
The Github-Profile-README is created by creating a new repo that’s the same name as your username.
1. Create a repo with your github username (e.g. https://github.com/#your-username/#your-username)
For example, my GitHub username is suryachaitanya0 so, I created a new repo with the name suryachaitanya0.(The letter-casing must match your GitHub username.)
Note: If you already have a project in a repo-named #username/#username and are interested in setting up a Profile-level README, then I recommend re-naming
that repository.
2. Create a README.md file inside the repo.
3. Add content( Introduction Text, Banner, Links, GIFs, Images, Emojis etc).
4. Commit your new README!
If you're on GitHub's web interface you can choose to commit directly to the repo's main branch (i.e., master or main) which will make it immediately visible on your profile) or Push changes to GitHub if you made changes locally.( i.e., on your computer)
That's it.:clap:
3. Make your page memorable by Adding Images, Icons and GIF to make the page look bit dynamic, instead of just filling it with text.
You can also add a hero image( A large banner at the top of your page).
This is the first thing that people will see when they visit, so make it exciting!
Example: Jayehernandez
If you are using Github for your projects or use it to contribute to open source, you probably have a lot of commits and Pull Requests.
Anurag Hazra created amazing Repo which compiles all those stats into one. It generates GitHub stats dynamically on your readmes!
Link to repo: github-readme-stats
1. Adding GitHub Stats Card.
Copy paste this into your markdown content, and that's it. Simple!
Change the ?username= value to your GitHub's username.
[](https://github.com/anuraghazra/github-readme-stats)Note: Ranks are calculated based on user's stats, see src/calculateRank.js
Example:
)
2. Include Top Languages Card.
Top languages card shows github user's top langauges which has been mostly used.
NOTE: Top languages does not indicate my skill level or something like that, it's a github metric of which languages i have the most code on github, it's a new feature of github-readme-stats
Copy-paste this code into your readme and Change the ?username= value to your GitHub's username..
Endpoint: api/top-langs?username=anuraghazra
[](https://github.com/anuraghazra/github-readme-stats)Example:
For more Information on stats visit github-readme-stats
6. You are not limited to Markdown when it comes to editing your README. Github's Flavored Markdown allows using some of the HTML tags.
Here's some of the basic things you can do:
- Center a section using
<center> - Create a widget that opens and closes using
<details>
7. Want to link to external sites? Add some icons which redirect to your social networks or projects.
I recommend using the free and open source RemixIcon library and just changed the color to suit the color scheme.
Note: Make sure your images are of great quality. We wouldn't want images to show up pixelated.
If you are using vector images, upload them using SVG instead of JPG or PNG.
Anton komarev created amazing Repo which counts the visitors.
Link to the Repo: github-profile-views-counter
Copy-paste this code into your readme and Change the ?username= value to your GitHub's username.
Example:
For more Information about counter visit github-profile-views-counter
I recommend to create your own view-counter (or fork existing repo) and host on your own server.
- Here is a article about creating view counter,Click here
Alternatives: visitor-badge By Jwenjian
Gautamkrishnar created amazing repo which Shows your latest blog posts from any sources or StackOverflow activity on your GitHub profile/project readme automatically using the RSS feed
Follow the repo Readme to add to your profile.
Link to the Repo : blog-post-workflow
Example:
Athul, Anmol1098 created amazing Repos which Shows your Dev Metrics in Readme.
Follow the repo Readme to add to your profile.
Link to the Repo : waka-readme By Athul
Link to the Repo : waka-readme-stats By Anmol1098
Example:
Add badges to your Profile. Here are some Repos, you can use to add Badges or Shields.
- Markdown-badges By Ileriayo
- Shields By Shields.io
- ColoredBadges By MikeCodesDotNET
- Create a dynamic Markdown file with Go and GitHub Actions,Click here
- Create Your Github readme with automated news data,Click here
- You can also display latest blogs posts dynamically using Github Action
- Create a self-updating Github Profile,Click here
-
Add linkedin profile stats: Github-readme-linkedin By Soroushchehresa
-
Add Stackoverflow stats: Github-readme-stackoverflow By Omidnikrah
-
Add Medium article stats: Github-readme-medium By Omidnikrah
-
Add spotify now playing card: Spotify-github-profile By Kittinan
-
Add Programming jokes: readme-jokes By ABSphreak
Try These tools,They provides an easy way to create github profile readme with latest addons like visitors count, github stats etc.
- github-profile-readme-generator By Rahuldkjain
- github-profilinator By rishavanand
- github-profile-readme-generator By Arturssmirnovs
- https://github.com/coderjojo/creative-profile-readme
- https://github.com/kautukkundan/Awesome-Profile-README-templates
- https://github.com/elangosundar/awesome-README-templates
- https://github.com/abhisheknaiidu/awesome-github-profile-readme
- https://mytrashcode.com/github-profile-readme-examples
- https://dev.to/jayehernandez/3-ways-to-spice-up-your-github-profile-readme-1276
- https://dev.to/m0nica/how-to-create-a-github-profile-readme-1paj
- https://dev.to/satvikchachra/how-to-add-an-awesome-readme-to-your-github-profile-361n
- https://simonwillison.net/2020/Jul/10/self-updating-profile-readme/
To contibute visit Contibutions.md