Adding a Dynamic Now Page in Jekyll

I love the now page movement. It’s such a better way to stay up to date with people than social media.

But, there are a few things I don’t like about just using the same static page again and again. You don’t share it via RSS and lose what your “now” was in the past. You could get around this with some manual work, but what’s the fun in that?

The dynamic now page I created is for Jekyll, but will work with only minor modifications in 11ty, Hugo and Gatsby. Updating your now page is the same as writing a regular post, just add category: now to your YAML front matter.

What you get automatically:

This can all be done on a static site!

Step 1: Create a Now Page

If you don’t already have a now page, create one.

To get the content from your most recent now page, all you need is this code:

{{ site.categories.now[0].content }}

To make a list of your previous now posts, add this:

{% for post in site.categories.now offset: 1 %}

[{{post.title}}]({{post.url}})

{% endfor %}

If you skip the offset: 1 the current now page won’t be excluded from the list of previous ones.

You could stop here and it would work. The rest of the steps to make the whole thing looks nicer.

Step 2: Adding a Dynamic Title

Giving each now page a title like “Now: Enjoying the Summer” is nice touch. You can’t add dynamic text directly to YAML, but there’s a workaround.

Add this variable to your now page’s front matter:

nowPage: true

And put this conditional into the <h1> tags of the template your using for your now page:

<h1>{%- if page.nowPage -%}
{{ site.categories.now[0].title }}
{%- else -%}{{ page.title }}{%- endif -%}</h1>

I use my post template because I have the date prominently displayed, which makes more sense than a dateless page template.

Step 3: Excluding from Post List

Since I post now updates every six weeks or so, they’d quickly overwhelm my main list of posts on my /blog page. One conditional fixes that:

{% for post in site.posts %}
	{% unless post.categories contains "now" %}

	[{{post.title}}]({{post.url}})

	{% endunless %}
{% endfor %}

Step 4: Setting up RSS

If you already have an RSS feed for all of your posts, you’re good to go. If not, install the feed plugin first.

RSS Requires Unique File Names

For the Jekyll Feed plugin to recognize posts as new, the file name (excluding the date) needs to be unique. Thus 2020-06-01-now.md and 2020-08-01-now.md are the same post to an RSS feed.

Go with something like 2020-06-01-now-june.md and 2020-08-01-now-august.md to avoid this.

If you want a specific RSS feed just for your now posts, add this to your _config.yml file:

feed: 
  categories: 
    - notes 

In addition to including now posts in your regular feed, you’ll get a now only feed at /feed/now.xml.

Step 5: Make a Now Post

The only difference between a now post and any other post is you need to include this in the post front matter:

category: now

See it live

This works on my now page.

My Jekyll demo site has less code, so is easier to copy from. Or have a look at the source code of this site.

You can always get in touch with me directly with questions or to show me your dynamic now page.