Jekyll and the Medium API

One of our clients is an innovative web app security startup who was recently looking for a flat file alternative to the everyday content management system. We ended up turning to Jekyll for our flat file solution, and I really grew to love it. We ended up creating our own build that uses a modern gulp workflow (more on that later). I liked it so much, I used it to build my own website.

This particular startup was also actively using Medium as their go-to solution for blogging. I didn’t really know much about Medium before hand, but I’m really starting to see the true value of bringing the blogosphere into a centralized location instead it being spread out across everyone’s separate websites. Not to mention, it’s pretty to look at.

I could have easily used Jekyll as my blogging solution, but I decided to join the Medium community, and heck, even have some fun with their API along the way. That’s why I created a little Node.js application that pulls my latest posts from Medium and displays them on my website.

The Steps:

Use the request node module to get your latest posts using the https://medium.com/@username/latest endpoint passing along the application/json accept header.

var request = require('request');
var userName = 'example';
var returnObj;
var options = {
  method: 'GET',
  url: 'https://medium.com/@' + userName + '/latest',
  headers: {
    accept: 'application/json'
  }
};
request(options, function(error, response, body) {
  if (error) throw new Error(error);
  body = JSON.parse(body);
  returnObj = body.payload.references.Post;
});

After parsing the post data from the body of the response, run a simple forEach loop to create an array of post objects containing the title, date, link and image.

var posts = [];
  for (var post in returnObj) {
    posts.push(post);
  }
var monthNames = [
  "January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];
var postInfo = [];
posts.forEach(function(post){
  var thisPost  = returnObj[post];
  var postTitle = thisPost.title;
  var postDate = new Date(thisPost.createdAt);
  var month = postDate.getMonth();
  month = monthNames[month];
  var day = postDate.getDate();
  var year = postDate.getFullYear();
  postDate = month + ' ' + day + ', ' + year;
  var postLink  = thisPost.uniqueSlug;
  var postImg   = thisPost.virtuals.previewImage.imageId;
  var postObj = {
    title: postTitle,
    date : postDate,
    link : postLink,
    img  : postImg
  };
  postInfo.push(postObj);
});

Then pass the array to a function that generates the html.

var output = function(postInfo){
  var html = '';
  postInfo.forEach(function(post){
    html += '<img src="' + post.img +'">';
    html += '<h2>' + post.title + '</h2>';
    html += '<p>' + post.date + '</p>';
    html += '<a href="' + post.link + '">Read More</a>';
  });
  return html;
});

Then use fs to output the html to a file in your includes folder.

fs.writeFile(‘./_includes/posts.html’, output, function(err){
  if (err) {
    return console.error(err);
  }
  console.log(‘Blog posts written to _includes/posts.html’);
});

Now all you have to do is use Liquid tags to display the posts wherever you want on your site.

{% include posts.html %}

And because it’s node, you can make it a gulp task.

gulp.task('medium', function(cb){
  exec('node medium.js', function(err, stdout, stderr){
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
});

As you can see, this was pretty painless and easy to add to my existing workflow, and we’re really only scratching the surface of what you can do with the Medium API. Be sure to check out their SDKs for Go, Python, and Node.js.

I had a lot of fun building this module, and I’m really enjoying Medium as a blogging platform. Medium is bringing bloggers closer together, and using tools like their API allows for easy integration. That’s something a developer like myself can get behind.