How to create an interactive README for your GitHub profile

How to create an interactive README for your GitHub profile

This is a NO BS tutorial on how to create interactive READMEs for your GitHub Profile.

I implemented an interactive game of Tic-Tac-Toe on my profile and will be using that as an example for this tutorial while keeping it open enough to let you implement your ideas.

Prerequisites

Let the games begin

1) Create a new GitHub repo with the same name as your username. https://github.com/username/username

2) Create an account on Link Click Counter using a (temporary) email ID. This is a free service which will track any clicks on the URLs in realtime. Create as many links as needed.

3) Create a new file in the language of your choice and scrape the results from https://www.linkclickcounter.com/userAccount.php. Store the values in a JSON file. The number of new clicks between two runs of the program is the difference between the old and new values. Don’t forget to store your email ID and password as environment variables.

Expand gist

4) The next thing to do is to implement your idea. Use the values calculated from the previous step to make your program interactive.

Expand gist

5) The last part of the program is to create the template for your README file. The magic lies in using hyperlinks for Link Click Counter URLs behind images

[![Alt Text](Image link)](Link Click Counter URL)

Expand gist

6) Create a .yml file in .github/workflows/ to automatically run your code as desired. For scheduling runs use cron jobs. I would also recommend caching any dependencies.

Expand gist

7) Commit and push all your files

git add -A
git commit -m "Your commit message"
git push origin master

8) Add your email ID and password as Secrets to your repo on GitHub

Settings -> Secrets -> New Secret

And you’re done.

Star my repo if you found this tutorial helpful.

with your profiles and ideas

Kavish Hukmani

Kavish Hukmani

TODO Add a witty bio