Creating a Hybrid Jekyll/Medium Blog

Share:

There are so many great blogging options now-a-days from database-driven platforms like Wordpress to static site generators like Jekyll (my personal favorite) to baas (blogging as a service) solutions like Medium. Like most things in life, each option has its own set of pros and cons. For example, Wordpress is great for its ease of use, but lacks a bit on security; Jekyll requires a bit more technical knowledge, but is more secure since there is not the additional attack vector of a database.

When I was creating this blog, I was debating using Github Pages, which is an easy way to host a Jekyll-based blog, or Medium. The pros and cons broke down like this:

Jekyll Pros

Jekyll Cons

Medium Pros

Medium Cons

In the end, I decided to do a hybrid approach where I would post to Medium for content that I wanted to reach a larger audience and to my Jekyll personal blog for more technical topics that would have a more nuanced audience. I still wanted all my posts to display at JonBake.com though. The following describes how I made that happen.

Redirecting Jekyll Posts to Medium

The http-equiv meta directive allows declaring that a page should redirect to another page on load. I used this directive to create a Jekyll Layout for medium posts:

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta http-equiv="refresh" content="0; url=">
    <link rel="canonical" href="" />
</head>
<body>
</body>
</html>

_layouts/medium.html

With a Medium Layout in place, I could then easily create Jekyll posts that redirects to the Medium post. For example:

---
layout: medium
medium_url: https://medium.com/@jonmbake/jekyll-to-medium-redirect-example-not-a-real-post
title:  "Jekyll to Medium Redirect Example"
---

_posts/2019-08-02-jekyll-to-medium-redirect-example.md

The one final step was to generate the correct post link for Medium posts. On the main page of my site, where I have a list of all my posts, I updated the post link generating logic to:


  {% for post in site.posts %}
    {% if post.layout == 'medium' %}
        <li><a href="{{ post.medium_url }}"><em>{{ post.date | date_to_string }} - {{ post.title }}</em></a></li>
    {% else %}
        <li><a href="{{ site.baseurl }}{{ post.url }}"><em>{{ post.date | date_to_string }} - {{ post.title }}<em></a></li>
    {% endif %}
  {% endfor %}

index.md

That’s it. Now I have the flexibility to either post to Medium or my Github pages repo and have all posts be aggregated to a single place.

Share:

See a typo? Submit a Pull Request.