How to Showcase Your Medium Stories to GitHub Readme

How to Showcase Your Medium Stories to GitHub Readme

You can showcase your Medium articles on your GitHub readme! GitHub recently released a new feature that allows you to create a Readme profile. It makes your GitHub profile look more professional and content-rich.

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:

Image for post

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.

Steps

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

html
<a target="_blank" href="https://github-readme-medium-recent-article.vercel.app/medium/@imantumorang/0"><img src="https://github-readme-medium-recent-article.vercel.app/medium/@imantumorang/0" alt="Recent Article 0"> 

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.

github programming javascript web-development developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

10 Useful GitHub Repos that Every JavaScript Developer Should Know

As being a JavaScript Developer I referred some GitHub repos that help me throughout my path. The best repos out there on GitHub: JS interview questions; You Don’t Know JS Yet; WTF JS; JS algorithm; JS web security; Keep your code clean; Project Guidelines; Airbnb JS Style Guide; Fake data generator; Make your code pretty

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

What Garbage Collection in JavaScript Is and How It Works

JavaScript values are allocated when things are created (objects, Strings, etc.) and freed automatically when they are no longer used. This process is called Garbage collection.

What Javascript Spread Operator is, How It Works and How to Use It

JavaScript spread operator is one of the more popular features that were introduced in ES6. This tutorial will help you understand it. You will learn what spread operator is and how it works. You will also learn how to use it to copy and merge arrays and object literals, insert data and more.