I made the best Github ReadMe EVER!
Tags: github, html, css, webdev
Published: 2022-09-04 12:07:54

[See for yourself.](https://github.com/milkshakegum)

AFAIK there is no legit people-led and voted ranking awards for Github ReadMe. But you'll be the judge if it really is the best github you've ever seen. 

Here's how you can do it, too:

## Intro PNG
[![I'm Milk - Intro PNG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aoqtdvvg9snxryfbl5qv.png)](https://plsmilk.me)

I made the PNG from [carbon](https://carbon.now.sh/), where you can generate screenshots of your code. You could also export it as SVG if you want to add animation or other customizations to the file.

After exporting the PNG, I edited the file in Figma to add custom text and a bot model.

## Snake Contribution Graph
[![github contribution grid snake animation](https://raw.githubusercontent.com/milkshakegum/milkshakegum/output/github-contribution-grid-snake-dark.svg)](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid)
The graph is from my actual github graph. And snake eats them like that classic snake game from our good old Nokia phones.
I used [this github action](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid) to make it.

## Animated SVG
[![Welcome to my Playground](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umz50zsce1766r2s80w8.png)](https://github.com/milkshakegum/milkshakegum/blob/main/header.svg)
Click [the animation](https://github.com/milkshakegum/milkshakegum/blob/main/header.svg) for the source code. Yes! It's not a GIF and yes you can animate SVGs and it can be used for your ReadMe.

The typing SVG is generated from [here](https://git.io/typing-svg). Adjust the parameters as you like.

## Lighthouse Stats
[![Lighthouse Stats](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5qk7bpud7yuqa2jpylx.png)](https://github.com/ankurparihar/readme-pagespeed-insights)
I got the image generated from [here](https://github.com/ankurparihar/readme-pagespeed-insights). Then, I just customized the text in Figma. 

## Tables
Here are [the best practices for markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). Here, you'll see the many ways to create tables and format your Github ReadMe.

## Support Button
[![Support Me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg7eevsur4cqpg00qo4v.png)](https://ko-fi.com/milkshakegum)
It was generated from Ko-fi's site. I got it from [their widgets tab](https://ko-fi.com/manage/widgets). From there you can customize your button however you like. I chose [Ko-Fi](https://ko-fi.com/milkshakegum) because they don't take fees from the sponsorships you get and you can use Paypal or Stripe. Of course, you can also replace this button with your preferred platform.

## Shields or Badges for Social Sites
[![Discord](https://img.shields.io/badge/Discord-%237289DA.svg?logo=discord&style=for-the-badge&logoColor=white&color=141617)](htttps://discord.gg/https://discord.com/invite/nBy5htDZrU) [![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?logo=Twitter&style=for-the-badge&logoColor=white&color=141617)](https://twitter.com/milkbuildsstuff) 

I used [shields.io](https://shields.io/). They offer many ways to customize the look of your badges.

## Live Spotify Stream
[![Live Spotify Stream](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53h76ep6kpjdua2ly4ku.png)](https://spotify-github-profile.vercel.app)


It shows my recent stream or what I'm listening to real-time. I used [this](https://spotify-github-profile.vercel.app). You'll have to authenticate with your Spotify account. You can also customize the theme.

## Auto-updated Workflow for Feeds and Blog
[![Auto-updated Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pq1idrvuneohmi02tw6j.png)](https://github.com/marketplace/actions/blog-post-workflow)
This workflow lists scraped RSS or feed from any of my blogs from different platforms. I used [this Github Action](https://github.com/marketplace/actions/blog-post-workflow).

## Github Stats
[![Github Stats of Milk](https://github-readme-stats.vercel.app/api?username=milkshakegum&show_icons=true&theme=buefy)](https://github-readme-stats.vercel.app)
[![Profile Stats of Milk](https://github-readme-stats.vercel.app/api/top-langs/?username=milkshakegum&layout=compact&hide=html&theme=buefy)](https://github-readme-stats.vercel.app)

I used [this](https://github-readme-stats.vercel.app) to generate them. 

```
![Github Stats of Milk](https://github-readme-stats.vercel.app/api?username=GithubUsername&show_icons=true&theme=buefy)
![Profile Stats of Milk](https://github-readme-stats.vercel.app/api/top-langs/?username=GithubUsername&layout=compact&hide=html&theme=buefy)
```
Just replace _GithubUsername_ with your username and you're good to go.

## Visitor Count Badge
[![Visitor Count Badge](https://hits.sh/github.com/milkshakegum.svg?style=for-the-badge&label=Explorers&extraCount=1780&color=141617)](https://hits.sh/github.com/milkshakegum/)

![Visitor Count Badge - Classic](https://komarev.com/ghpvc/?username=milkshakegum&label=Profile%20views&color=0e75b6&style=flat)

Here's the exact code used to generate these badges:
```
![Visitor Count Badge](https://komarev.com/ghpvc/?username=GithubUsername&label=Profile%20views&color=0e75b6&style=flat)
```

```
![Visitor Count Badge - Classic](https://komarev.com/ghpvc/?username=GithubUsername&label=Profile%20views&color=0e75b6&style=flat)

```
Just replace _GithubUsername_ with your username and you're good to go.

Here's [another way](https://pufler.dev/git-badges/) to do it. Look in [here](https://visitor-badge.glitch.me/#docs) for style options.

## Check out other Github ReadMe
Here's [a site](https://zzetao.github.io/awesome-github-profile/) to look up other people's profiles.
You can also find [a list of tools](https://github.com/abhisheknaiidu/awesome-github-profile-readme) to help you build the best possible Github ReadMe. There are plenty of profile generators out there to make your life easier.


Lastly, I privated my github for the less cluttered look of my github page. Also, it helps not spam my friends whenever I'm on a starring rampage or commiting and making too many pull requests.
It's a beta feature. Try it for yourself. It's in settings.


{% embed https://github.com/milkshakegum %}

Time to unleash your creativity. Good luck! -Milk

#### Change-log: 
Thank you so much for appreciating my work! 
I took into consideration all the feedback you guys gave me.

* Added proper ALT tags.
* Made as much HTML into Markdown, if it won't work in Markdown I at least added whitespaces to make it still readable.
* Corrected misspelled words.
* Changed the [previous theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv0n6sle61qkk71b7k7a.png) to a much accessible one.

![10.32 Accessibility rate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81vkms9hc76dw0kepvlw.png)