Guide: Connecting Medium to your personal website
Having to manage your blog posts in multiple locations can be an annoying issue when running your own personal website. Being able to consolidate them together and have them automatically updated wherever your post is just makes life that much simpler. I will detail how I integrated Medium posts onto my own website and how you can to!
A little bit of background first
Medium supports the ability to retrieve your blog posts in JSON format using the following link: https://medium.com/@username/latest?format=json
If you open this in a browser you will see some familiar elements inside representing your posts. However the interesting line to look at is the very first section . This piece of code as it turns out is to prevent JSON Hijacking.
What the heck is JSON Hijacking?
This is when an attacker is able to access JSON data from applications that return data in arrayliteral form in a GET request.
[{“id”:”1",”account”:”123456789",”amount”:”1000"},{“id”:”2",”account”:”987654231",”amount”:”2000"}]The attack uses a victim who has been authenticated to access this sensitive information and tricks the victim into navigating to a malicious page which creates a request for the information as the authenticated victim.
In this case the while(1) prevents the malicious script from accessing the data after it. This is a similar issue to other CSRF issues (Cross-Site Request Forgery). Medium prevents any calls from a script so that means that your frontend website won’t be able to access this data.
There are three ways to go about retrieving the feed though.
Option 1: Convert the RSS feed to JSON (Free Option):
The current project I am using is hosted on Netlify and is a simple static site. Instead of creating a server to retrieve the JSON it is possible instead to use the RSS feed to retrieve the necessary data using the following api:
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/{yourfeedname}
This url returns a JSON object in the following format:
{
"status": {was it retrieved correctly},
"feed": {
"url": {feed url},
"title": {feed title},
"link": {rss link},
"author": {author of feed},
"description": {feed description},
"image": {feed image}
},
"items": [
{
"title": {post title},
"pubDate": {date of publication},
"link": {post url},
"author": {post author},
"thumbnail": {post thumbnail},
"description": "{content of article",
"enclosure": {},
"categories": [array of tags]
},
...
]
}So by using response.data.items we can access all posts and there content allowing us to display it on our webpage.
In my react app this is done using a package called axios
axios.get(`https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fmedium.com%2Ffeed%2Fhappy-giraffe`).then(response => {return response.data.items}).then(posts => {this.setState({ posts })}).catch(function (error) {console.log(error);});
This gets mapped to a list of my Post object
{ this.state.posts.map((post) =><Post key={post.title} content={post} />)}
Allowing me to render out a component that displays the post contents
return (<div className="post"><div className="post__thumbnail" style={thumbnailStyle}/><div className="post__details"><h3 className="post__title"><a href={content.link}>{content.title}</a></h3><p className="post__date">{content.pubDate}</p><p className="post__description">{description}</p></div></div>);
Option 2: Use AWS Lambda (Paid Option):
By using AWS Lambda we are able to request the JSON file using a serverless architecture. This is a free service for 12 months and can be continued to be used freely if the number of executions does not exceed 1 million requests!
If this option interests you then I would strongly recommend visiting Mark Fasel’s blog for detailed instruction on how to integrate it into your site.
Option 3: Host a backend service (Probably going to require paid hosting)
There are many possible ways of implementing this but the basic idea is that by hosting a backend service you will won’t have to worry about the CSRF issue and can query the JSON freely.
Simply create a route for your app that when accessed causes the server side code to request the JSON file from Medium and passing it back in the response.
I hope this article helps! The code from my website can be found over here
Happy Coding!
