DEV Community

Cover image for How to create a readme.md profile on Github
Ary Barros
Ary Barros

Posted on

How to create a readme.md profile on Github

Recently Github added a very interesting feature for its users, the possibility to develop a homepage built in markdown for their profile. However, this feature is hidden from everyone, and I will teach you how to unlock it. Here we go?

Discovering the feature

To activate the profile feature, we will create a new repository. The secret is found right here. Create a repository with the name of your nickname from github and you will see a window appear warning you that you have discovered a secret!

creating repository

Don't forget to check Initialize this repository with a README for the secret to take effect.

Performing the first edit

After creating the repository, we will be redirected to its initial page, in which we have only one Readme.md file.

Alt Text

After opening the file in the github editor, we will see that there is already a template with some topics ready for you to start your profile description.

Alt Text

Readme.md supports markdown and HTML and you can merge both to get your look.

Useful links to help build a profile on your Github

Interesting code blocks to insert in your profile

Github Stats

![Aryclenio GitHub Stats](https://github-readme-stats.vercel.app/api?username=aryclenio&show_icons=true)
Enter fullscreen mode Exit fullscreen mode

Aryclenio GitHub Stats

Social Media

<a target="_blank" href="https://www.linkedin.com/in/aryclenio-barros-060322135/">
  <img align="left" alt="LinkdeIN" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" />
</a>
<a target="_blank" href="https://api.whatsapp.com/send?phone=5584999828379">
  <img align="left" alt="Whatsapp" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/whatsapp.svg" />
</a>
<a target="_blank" href="https://www.instagram.com/ary.clenio/">
  <img align="left" alt="Instagram" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/instagram.svg" />
</a>
<a target="_blank" href="https://dev.to/aryclenio/">
  <img align="left" alt="Devto" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/dev-dot-to.svg" />
</a>
<a target="_blank" href="mailto:arycleniobarros@gmail.com">
  <img align="left" alt="Gmail" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/gmail.svg" />
</a>
<a target="_blank" href="https://fb.com/aryxb">
  <img align="left" alt="Facebook" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/facebook.svg" />
</a>
Enter fullscreen mode Exit fullscreen mode

Code languages that you work

<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/typescript/typescript.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/nodejs/nodejs.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/vue/vue.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/cpp/cpp.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/mysql/mysql.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/git/git.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/terminal/terminal.png"></code>
Enter fullscreen mode Exit fullscreen mode

Showing on your profile

After finishing your editing, just commit and go back to your home page. You will see that it now shows all its description and only after that, its repositories.

Alt Text

Alt Text

That's it! Feel free to get inspired by my readme.

THANK YOU FOR READING!

Top comments (3)

Collapse
 
moerwald profile image
moerwald

Thx, for that cool article. Is it possible to get a list of all supported icons, that can be found under https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics ?

Collapse
 
undead34 profile image
Gabriel Maizo
Collapse
 
vikramvi profile image
Vikram Ingleshwar

can you please clarify for "Code languages that you work" how to get icon for some new language ?