How to Add Your Recently Published Medium Articles to Your GitHub Readme

Show off your latest Medium work on GitHub

Published in

Better Programming

3 min readAug 16, 2020

GitHub recently released a new feature that allows you to create a Readme profile, so you can now customize your GitHub profile page.

You can see an example on my GitHub profile:

This feature is really nice. It makes your GitHub profile look more professional and content-rich. In the future, I expect GitHub to look like LinkedIn for developers.

Introducing GitHub Readme — Recent Medium Articles

I’ve seen a lot of plug-ins that people have made, like the GitHub stats card, programming language stats, and even games (e.g. this online chess game or even tic-tac-toe).

In this readme, the user has included a list of their recently published Medium articles. But it’s only available on their profile. To achieve the same results, I need to copy their code, which takes time.

That’s the original idea behind this plug-in. I created a separate repository with a customized function. I then made the function more generic so everyone can add their recently published Medium articles to their GitHub readme.

Live demo: GitHub Readme — Recent Medium articles

Steps

To use this plug-in, you only need to add this script to your GitHub readme:

So the format is:

https://github-readme-medium-recent-article.vercel.app/medium/<medium-username>/<article-index>

medium-username: Your medium username/profile
article-index : Your recent article index (e.g. 0 means your latest article)

The full steps can be seen in my repository. Also if you’ve found any issues, just open an issue or create a PR directly on that repository.

More About This Plug-In

I’m using Vercel for the static hosting and the serverless function to retrieve the recent articles. I might be able to add a custom domain, but that’s for later.
I’m using an RSS feed from Medium. You can get your RSS feed from Medium by entering this URL: https://medium.com/feed/@yourMediumUsername.
Then convert it to JSON using API RSS to JSON:

https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@imantumorang

Make it generic so everyone is able to use it.

To make it generic so people can directly pass their Medium username to the serverless function:

https://github-readme-medium-recent-article.vercel.app/medium/@imantumorang

I need to make the folder of my serverless function as follows:

└── medium
    └── [user]
        └── [index].ts

The [user] directory is required so I can make the username dynamic. I was stuck on this problem when I was making the plug-in. Actually, I can create it using query-param like ?username=@imantumorang, but from my experience and keeping REST in mind, making it path-param is the proper way to tell that the param is required. Also, I want to keep the experience the same as when you’re visiting your Medium profile (e.g. medium.com/@imantumorang).

I knew that comments in the Medium articles would be added automatically to the RSS. To only display the article, I added a filter function on the function:

if (thumbnail.includes("cdn")) {
        fixItem.push(element)    
}

So I only enabled articles that have a thumbnail. I’m still looking for a workaround for this because if the article doesn’t have any thumbnail, it will be skipped. At least for now, if your article has a thumbnail, it will be displayed when we import it to your GitHub readme.

It may take time to be able to get your recent article to be listed (for a new article) since the API RSS to JSON is cached. Please wait around 1-3 hours after the article has been published on Medium.

Conclusion

Well, I think that’s all for now. If you find any issues, you can directly open an issue on GitHub. I’ll try to help as much as I can.