How to Add Your Recently Published Medium Articles to Your GitHub Readme
Tags: softwaredevelopment, opensource, medium, github
Published: 2021-03-22 06:26:02

---
title: How to Add Your Recently Published Medium Articles to Your GitHub Readme
published: true
date: 2020-08-16 16:32:37 UTC
tags: softwaredevelopment,opensource,medium,github
canonical_url: https://betterprogramming.pub/add-your-recent-published-mediums-article-on-github-readme-9ffaf3ad1606
---
> Show off your latest Medium work on GitHub

![](https://cdn-images-1.medium.com/max/1024/0*bfiChcHfUSEr-cXQ)<figcaption>Photo by <a href="https://unsplash.com/@christinhumephoto?utm_source=medium&amp;utm_medium=referral">Christin Hume</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a>.</figcaption>

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](https://github.com/bxcodec):

![](https://cdn-images-1.medium.com/max/1024/1*iqOkHcV05JuxKtqEdV0FkA.png)<figcaption>My GitHub profile.</figcaption>

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](https://github.com/timburgan/timburgan) or even [tic-tac-toe](https://github.com/alfari16/alfari16)).

In [this readme](https://github.com/alfari16/alfari16), 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.

{% youtube hk6MoV-qWW8 %}

### Steps

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

<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/60fa24f400869923cd2f970850db9bf1/href">https://medium.com/media/60fa24f400869923cd2f970850db9bf1/href</a></iframe>

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](https://github.com/bxcodec/github-readme-medium-recent-article). 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](https://vercel.com/) 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/@](https://medium.com/feed/@imantumorang)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](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.

* * *