Github About Me Profile Read Me Generator
Resources

How to create a GitHub Profile README using this web app

Posted by

This article contains a list of resources, tutorials, and a link to a free tool to make your GitHub About Me/Read Me look fancy 😍

You might have already seen articles explaining the ‘secret’ repo with a cool ReadMe feature in GitHub but put off actually creating one. I built an app to do most of the work for you 🙂

Table of Contents

  1. Create the ‘secret’ repo with About Me
  2. Github About Me Generator
  3. Emojis and GIFS
  4. Visitor Badge
  5. Github Stats
  6. Latest Blog Posts
  7. WakaTime Stats
  8. Social Icons
  9. Inspiration for your ReadMe
  10. Conclusion

Create the ‘secret’ repo 🔓

  • Go to https://github.com/new to create a new GitHub repository
  • Set your GitHub username as the repository name. My GitHub user name is rahulbanerjee26 therefore my repo name should also be rahulbanerjee26
Screenshot of the new repo

Not a secret anymore I guess

  • Check the box to Add a ReadMe file
  • Keep it private for now, while you are making changes. We will set it to Public once we are done
Screenshot of initial ReadMe

Github About Me/Profile README Generator

REPO: https://github.com/rahulbanerjee26/githubAboutMeGenerator

I used streamlit to create a simple web app that can take inputs and generate a pretty cool Read Me for you.

https://share.streamlit.io/rahulbanerjee26/githubaboutmegenerator/main/__init__.py

All you need to do is enter your name, social handles, skills, and answer questions about what you are learning, working on, etc and it generates the Readme for you.

Features

  • Gifs
  • Social Icons
  • Skill Icons
  • Visitors Badge
  • Github Stats
  • WakaTime Stats
  • .yml file to display Blog Posts from your feed
  • Ability to add image banners at beginning of README
  • Editor to edit Markdown with live update
  • Random Jokes Card

The tool basically does everything mentioned in this article other than creating the secret repo and setting up the workflow. In the near future, I also plan to add more designs to the READMEs.

If you like the tool, please consider ‘starring’ the repo 🙂 

Emojis and GIFs 💯

Below is the general syntax for an emoji in Markdown

:emojiName:

It is similar to how you would use emojis in Medium’s text editor. You can find a ton of emojis over here. To use an emoji, click the emoji and use one of its ShortCodes.

To use gifs, do the following

  • Download the gif
  • Upload it to your secret repo
  • Clicked on the uploaded file and copy the URL to it
  • Use an image tag
<img src="pathTo.gif" width="30px">

You can find some cool gifs over here

# Hello World <img src = "https://github.com/rahulbanerjee26/rahulbanerjee26/blob/main/hFZ.gif" width = 50px>
Hi! My name is Rahul. Thank You for taking the time to view my GitHub Profile :smile:

Visitors Badge 📛

Website: https://visitor-badge.glitch.me/

Repo: https://github.com/jwenjian/visitor-badge

Just copy and paste the following command

![visitors](https://visitor-badge.glitch.me/badge?page_id=page.id)

Replace page.id at the end to something unique like your_user_id.your_repo_name. In my case, it would look something like this

![visitors](https://visitor-badge.glitch.me/badge?page_id=rahulbanerjee26.rahulbanerjee26)

The badge count increments the number of views whenever you view your readme/edit it, therefore I recommend appending a number or something unique right before you make your repo public to initialize the view count to 0

GitHub Stats 📊

Repo:https://github.com/anuraghazra/github-readme-stats

Screenshot by Author
## My GitHub Stats 📊
<a href="https://github.com/anuraghazra/github-readme-stats">
  <img align="left" src="https://github-readme-stats.vercel.app/api?username=rahulbanerjee26&count_private=true&show_icons=true&theme=radical" />
</a>
<a href="https://github.com/anuraghazra/convoychat">
  <img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=rahulbanerjee26" />
</a>

Replace the text after ‘ api?usermame ’ with your GitHub User Name.

Latest Blog Posts 📮

Repo: https://github.com/gautamkrishnar/blog-post-workflow

  • Add the following to your readme
# Blog posts
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
  • Create a folder .github, inside it create another folder called workflows, inside it create a file called blog-post-workflow.yml. Essentially create .github/workflows/blog-post-workflow.yml. If you paste this as the file while creating a new file in Github, it creates the folders for you.
  • Inside the .yml file, paste the following
name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 * * * *' # Runs every hour, on the hour
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the Github Actions Workflow page directly
jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          feed_list: "https://www.realpythonproject.com/feed/"
  • Replace the value for ‘feed_list’ with the URL to your blog’s feed. You can enter multiple URLs separated by commas. Your medium feed is https://medium.com/feed/@username
  • Save the file and Click on Actions
Screenshot by Author
  • You should see your new workflow listed in the left side-bar. Click on it and click on run workflow. Give it a few seconds
  • Once you see the message that the workflow has executed successfully, go to your readme and you should see your blog posts. Just give it a min if you do not see it.

Waka Time Stats 💻

Repo:https://github.com/anuraghazra/github-readme-stats

Screenshot by Author

First, you will need to make sure your Wakatime stats are public

  • On the top right corner click on your profile icon and click on Settings
  • Ensure you have a value in the textbox next to User Name
  • Check the box for the following ‘Display photo publicly’, ‘Display code time publicly ’, ‘Display languages, editors, os, categories publicly’
  • In the dropdown next to ‘Display code time publicly ’, select ‘Last 7 days’ If you have a free version, the other options in the dropdown will not work
  • Click on Save

Type the following code

## My Wakatime Stats ⌚
<a href="https://github.com/anuraghazra/github-readme-stats">
  <img align="center" src="@rahulbanerjee26&compact=True">https://github-readme-stats.vercel.app/api/wakatime?username=@rahulbanerjee26&compact=True"/>
</a>

Replace the text after src in bold with your Wakatime User Name. You might have to put an ‘@’ before your user name for the card to render properly.

Social Icons 📲

Including social icons is similar to working with images or gifs. Either you can download the icons and save them in your repo or provide an external URL to the icons.

<img align="left" width="22px" src="https://raw.githubusercontent.com/iconic/open-iconic/master/svg/globe.svg" / href= "https://github.com/">
<img align="left" width="22px" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/youtube.svg" / href="https://youtube.com/">
<img align="left" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/twitter.svg" href="https://twitter.com/"/>
[<img align="left" src="https://cdn.jsdelivr.net/npm/simple-icons@v3/icons/linkedin.svg" href= "https://www.linkedin.com/in/"/>

You can access royalty-free icons with no attributions needed here 

Inspiration for your ReadMe 👏

Check out my Readme

A collection of some cool Readmes

Resources

Conclusion

I hope you found this article helpful. A good about me page can definitely make you stand out. Share your profiles in the comments 🙂