View on GitHub


A collection of modular scripts to do fun things.

static-medium :: Medium blog feed for Static Sites

How To Use It

1. Include CSS styling before </head>

There are 3 style options!

Card style

card style gif

Card Narrow style

card narrow style gif

List style

card narrow style gif

Add the CSS for the style you want.

<!-- For Card style -->
<link rel="stylesheet" href="">

<!-- For Card Narrow style -->
<link rel="stylesheet" href="">

<!-- For List style -->
<link rel="stylesheet" href="">

2. Add the posts div inside the <body> where you want it

<div class="posts" id="mediumPosts">
  <!-- Medium posts populate here -->

3. Prepare Your Medium Slug

You will need to replace the placeholder handle with your feed!

For example:

4. Add the scripts before </body>

Update the placeholder slug using your own.

Set the number of posts you would like. By default it is three.

  // Assign publication feed URL
  var mediumHandle = 'your-medium-publication-slug';
  // Number of posts to display
  var postQuantity = 3;
<script src=""></script>

Using this with Carrd

1. Add Embed Widgets

First you’ll want to import the base styling in Embed Widget #1

Then you’ll want to import the scripts in Embed Widget #2

  var mediumHandle = 'your-medium-publication-slug';
  var postQuantity = 3;

<script src=""></script>

Don’t forget to replace the mediumHandle with your own!

Lastly, add a text block. The default “text” will get replaced by your posts, so you can ignore it.

In Settings, you need to set:

Here’s my demo!


2019.04.19 :: Updated slugs to reflect my new handle (m2creates)

2018.04.07 :: Removed jQuery dependency with the help of some awesome people on Glitch!

2018.04.01 :: Added additional styles, removed date parser dependency

2018.03.31 :: Created! Started with 2 external library dependencies.