How to create an interactive README for your GitHub profile
This is aNO BS tutorial on how to create interactive READMEs for your GitHub Profile.
I implemented an interactive game of Tic-Tac-Toe on myprofile and will be using that as an example for this tutorial while keeping it open enough to let you implement your ideas.
Prerequisites
- A GitHub account
- Intermediate knowledge in any scripting language. I will be using Python.
- Basic Markdown and HTML for formatting your README.
- Basics of GitHub Actions.
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 onLink 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 fromhttps://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
[](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 -Agit commit -m "Your commit message"git push origin master8) 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.
Tweet to @2gremlin181 with your profiles and ideas
