How I Built A Self-Updating README On My Github Profile

💚 I'm helping developers to become @vuejs experts | 👨🏻‍💻 Senior Frontend Developer | 🌴 Freelancer | ✍️ Blogger |

GitHub Profile README

GitHub profile READMEs are a new feature that allows users to have the content of a README markdown file rendered at the profile page.

To use this feature you just need to create a new repository that has the same name as your GitHub account. Mine is located at github.com/mokkapps/mokkapps.This repository needs to be public and initialized with a README:

Now you will see a new section at the top of your profile page which renders the content of this new README file:

In my example, I am showing five links to the latest blog posts on my website and the latest tweet I published on Twitter. This information is automatically updated and I want to show you how I implemented this functionality.

Automatically Update The README

All the magic is happening in a GitHub Action defined in build.yml. This action runs on every Git push, every 32 minutes past the hour (configured via a cron schedule) or by manually clicking a button in the GitHub Action UI (by using workflow_dispatch event).

The workflow performs these actions:

Fetches the latest tweet from my Twitter account using the Twitter API, renders it to a PNG using headless Chrome (from an R script) and saves it as PNG which is then embedded in the README (taken from zhiiiyang).

Runs a JavaScript script which fetches the five latest blog posts from my RSS feed and generates the final README.md (inspired by simonw)

Commits and pushes the changes to the master branch of this repo

The JS script is quite simple and has only ~50 lines of code.

How I Built A Self-Updating README On My Github Profile

Comments

More from this blog

Create a Table of Contents With Active States in Nuxt 3

Building a Polite Newsletter Popup With Nuxt 3

Create an RSS Feed With Nuxt 3 and Nuxt Content v2

How to Create a Custom Code Block With Nuxt Content v2

How to Create a Custom Code Block With Nuxt Content v2

GitHub Profile README

Automatically Update The README

Conclusion

Command Palette

Comments

More from this blog

GitHub Profile README

Automatically Update The README

Conclusion