How to Create an Impressive GitHub Profile README

If you visit my profile on GitHub, you’ll notice that it contains images, social network links, some GitHub statistics and links to my blogs, which makes the GitHub profile stand out. This is possible through the GitHub profile README feature. In this article, we’ll learn how to create a GitHub profile README.

We’ll cover the following:

• what a GitHub profile README is
• how to create a GitHub profile README
• adding social badges, skills and descriptions about oneself
• adding GitHub stats
• creating a GitHub workflow to pull latest published blogs

To follow along with the tutorial, you’ll need to have a basic understanding of HTML and Markdown. If you’d like an introduction to Markdown, check out this Markdown introduction. Also, you should have a GitHub account. If you don’t have one yet, sign up at GitHub.

The code for this tutorial is available on GitHub.

Key Takeaways

• Start with the Basics: Begin by creating a special repository with your GitHub username to house your README.md, ensuring it’s visible and set to public.
• Enhance Visual Appeal: Incorporate GIFs, badges, and a banner to make your profile visually engaging. Utilize platforms like Shields.io for creating social media badges and Giphy for dynamic GIFs.
• Showcase Your Skills: Detail your technical skills and tools using images from resources like DevIcons, and provide a succinct ‘About Me’ section to personalize your profile.
• Display GitHub Stats: Add widgets like GitHub Streak Stats and GitHub Readme Stats to display your coding activity and most used languages, enhancing your profile’s credibility.
• Automate Content Updates: Implement a GitHub workflow to automatically update your profile with your latest blog posts, keeping your content fresh and relevant.
• Keep It Organized and Updated: Regularly update your README to reflect your latest projects and achievements, ensuring the content remains current and organized for easy navigation.

What a GitHub Profile README Actually Is

A GitHub profile README is a feature of GitHub that allows users to use a Markdown file named README to write details about themselves such as their skills, interests, GitHub stats and showcase it to the GitHub community. It’s shown at the top of your GitHub home page, above the pinned repositories. This is a fancy way to showcase one’s skills and stats on GitHub.

Pictured below is the final look of the GitHub profile that we’ll create for this article.

We’ll divide this into multiple sections and add contents for each section incrementally. The background color will change based on the GitHub theme settings of the user.

In the next section, we’ll look at the steps for creating the README file.

Creating a GitHub Profile README

The README file resides in a GitHub repository, the name of which is the same as the username of your GitHub account. To create the repository, follow these steps:

1. Log in to GitHub.
2. Click on + icon at top right of the page and select New Repository.

   

3. A Create a new repository page opens. In the Repository name field, enter the username of your GitHub account. After entering the username, GitHub displays a message describing that you’re about to create a GitHub special repository.

   

4. Check the Public checkbox under repository type to make the GitHub profile README visible to everyone who visits the GitHub profile page. If you don’t want users to see your GitHub profile README while it’s still in development, you can choose Private. Once you’re done with the complete development of your README, make sure to change the visibility to Public.
5. Check the Add a README file checkbox. This will add a README.md file where we’ll add the profile contents. The field values should look similar to thepicture below.

   

6. Click on the Create repository button. A special repository is created successfully. Go to the repository you just created and you’ll see a README.md file added to the repository.

   

In the next few sections, we’ll add contents to our README.md file. We’ll use GitHub’s file editor to write and preview the changes. You can use any other text editor you’re comfortable with.

To use the GitHub file editor, open README.md and click on the Edit this file icon (a pencil icon) on the top right of the page. You can read more about editing GitHub files at the official GitHub documentation on editing files.

Adding GIFs and Badges to Your GitHub Profile README

Here’s an image of the content that will be added in this section:

The GIF used in this section can be found here. I found this GIF on Giphy, which is full of free GIFs to use.

Go to the GIF Link and click on the Share button and then Copy GIF Link. We’ll add this copied link to an HTML img tag to display it in the Markdown file. We’re using the img tag as it’ll help us specify the width of the image.

In the GitHub file editor, replace the README.md file content with the following code:

The src attribute points to the URL we copied in the previous step. Since all the contents in this section are center-aligned, we’ve wrapped the image in an HTML div tag with the align="center" attribute.

Note: GitHub converts the README Markdown to HTML and renders it on GitHub. After conversion, the HTML is sanitized, and for security reasons, it ignores certain HTML tags and attributes such as