Displaying Medium Posts on Your Jekyll Website

Update 2nd January 2018

This has now been developed into a Ruby Gem to be used within any Jekyll website. The homepage can be found here.

After searching for a while I was unable to find much on this topic, besides one Stack Overflow post, which helped a lot in forming the solution below. I thought I’d do a very quick post on how to set this up. I very well could have missed something even simpler, if that’s the case please do get in touch and let me know.

The solution below uses your RSS feed from Medium, parses it and stores each post as a ‘virtual document’, in a newly created Jekyll collection. From here you’re able to access the title and content of each post, which can then be displayed on whatever page you want.

This is the completed code snippet.

require 'feedjira'
module Jekyll
  class MediumPostDisplay < Generator
    safe true
    priority :high
def generate(site)
      jekyll_coll = Jekyll::Collection.new(site, 'external_feed')
      site.collections['external_feed'] = jekyll_coll
Feedjira::Feed.fetch_and_parse("https://medium.com/feed/@YOUR_MEDIUMUSERNAME").entries.each do |e|
        p "Title: #{e.title}, published on Medium #{e.url} #{e}"
        title = e[:title]
        content = e[:content]
        guid = e[:url]
        path = "./_external_feed/" + title + ".md"
        path = site.in_source_dir(path)
        doc = Jekyll::Document.new(path, { :site => site, :collection => jekyll_coll })
        doc.data['title'] = title;
        doc.data['feed_content'] = content;
        jekyll_coll.docs << doc
      end
    end
  end
end

First thing you’re going to want to do is create a new file in the ‘_plugins’ directory.

$ touch medium_post_display.rb

I’d suggest typing the code out, line by line, as that way you can study and take in what is actually happening with each line. However, if you’re impatient or whatever, feel free to copy and paste. Just make sure to edit and include your actual medium username or it won’t work. I’d also suggest taking a look at the RSS feed, just to see how it’s displayed, it should look something like this.

RSS Feed for my Medium Profile

You’ll notice this plugin uses a Gem called feedjira, which is basically just an RSS feed parser. You’ll want to add the gem to your Gemfile and then bundle again to ensure it’s installed.

Lastly, you’re going to want to head over to your ‘config.yml’ file and add the ‘external_feed’ collection as one of the collections’ parameters, as highlighted below.

collections:
  - external_feed

You’re nearly finished now, from here you’ll need to decide on what page you’d want to display these posts. I had a separate blog page, where I thought each post could be displayed with it’s title and content. With this setup, you’ll get an endless scroll style page, where all of your posts will be displayed one after the other. That works for me, but as I make more posts that’s probably not sustainable, so I’ll be looking to change that at some point. When I do I’ll update this section, for now, though, it works as intended.

This is a code snippet of what my ‘blog.html’ page looks like. All Jekyll templates are different, so yours may vary, but the code should remain the same.

---
layout: default
---
<section id="main" class="wrapper style1">
  <header class="major">
      <h2>Blog</h2>
  </header>
  {% for e in site.external_feed %}
    <h2>{{ e.title }}</h2>
    <p>{{ e.feed_content }}</p>
  {% endfor %}
<section class="special">
  <ul class="actions">
  <li><a href="{{ site.baseurl }}{{ e.url }}" class="button {% cycle '', 'alt'%}">Read More</a></li>
  </ul>
</section>

So looking back at our ‘medium_post_display.rb’ you’ll see we iterate through the RSS feed and for each entry ‘e’ we save the title, content, id and transfer it to a Jekyll document, which is saved in a collection, ‘external_feed’.

Here, we’re writing for each entry ‘e’ in our ‘external_feed’ collection, we’d like to display the title and content. With this in place the page will display all of your posts, with their title and content, in chronological order.

Once this is all done, ‘jekyll serve’ and head over to localhost:4000 to see your Medium posts on your Jekyll site! You’ll also get a print out in your terminal of each post title and the Medium url for that post whenever you ‘jekyll serve.’

I hope this helped anyone who wanted to do something similar and as always recommend and share if you like what you read. Thanks for reading!