Jump to content
A daily auto-publishing workflow for Jekyll
Back

How We Built

Reading Time: 6 mins

A daily auto-publishing workflow for Jekyll

Our development partner Instil required a micro site to promote their attendance at Kotlin Conf ‘19. The main deliverable was to release a new blog post every day from the 1st to the 12th of December.

Tech Stack

JekyllBitBucketNetlifyZapier
Kotlin Days Website

Jekyll

Jekyll is a simple but powerful parsing engine that converts content into a static website. It uses Shopify’s templating language Liquid which gives us the ability to use variables, loops and logic in our build. We had previously developed Instil’s website using Jekyll so it was the natural choice for a framework for this project.

Setting up rules for publishing a blog post

One of the advantages of static site generators like Jekyll is its purity of form. You put in your content and you get HTML and CSS. It’s secure, lightweight, fast but unlike a traditional CMS like Wordpress, it lacks the dynamic ability to schedule a date and time to publish a blog post, but with some simple logic and a little help from Netlify and Zapier, we were able to make this happen.

Blog post layout

---
layout: default
---

<!-- Create Variables the today and the blog post date -->


{% assign today_date = 'now' | date: '%B %d, %Y' %}
{% assign post_date = page.date | date: '%B %d, %Y' %}


<article itemscope itemtype="http://schema.org/BlogPosting">
  
  {% if today_date >= post_date %}
  
  <!-- If today's date is greater than or equal
  to the blog post date, show the article -->

  <header class="post-header">
    <h1>{{ page.title }}</h1>
    <p class="lead">{{ page.lead }}</p>
  </header>
  
  {{ content }}
  
  {% else %}
  
  <!-- else, show coming soon -->
  
  <header class="post-header">
    <h1>{{ page.title }}</h1>
    <p class="lead">
      This article will be published on {{ page.date | date: '%F' }}.
      Please check back then to read it.
    </p>
  </header>
  
  {%- endif -%}
  
</article>
Above we’re checking to see if today’s date is greater than or equal to the post date. If it is we’ll publish the full post, otherwise the content of the post will remain unpublished.

Post listings


{% for post in site.posts reversed %}

<!-- Create Variables for today and the blog post date -->

{% assign today_date = 'now' | date: '%B %d, %Y' %}
{% assign post_date = post.date | date: '%B %d, %Y' %}


<!-- If today's date is greater than or equal to blog post date
Show the card, else disabled it. -->

<article class="{% if today_date >= post_date %}card-active
                {% else %}card-disabled{% endif %}">
...
</article>

{% endfor %}

Post Listings
Above shows the published and unpublished posts. We also set an active state to the current day, all without JavaScript.

Netlify

We’re big fans of a JAMstack workflow for building websites and apps. Key to this workflow is Netlify and put simply, it works by connecting to a Git repository, watches for commits and runs a build process to compile and deploy your static website to a CDN.

Connecting Netlify to a repository

We used BitBucket to host the code in this project but you can also connect to repositories on Github or GitLab. We’ve used Netlify with them all in previous projects and they all work great, but to get started, simply sign up or log in to Netlify and select New Site from Git

Netlify

Netlify’s user experience is superb and you’ll be taken through a simple 3 step process to set up your new site. Select your Git provider, authenticate and choose the repository you’d like to connect.

Netlify

Next, you can select the branch you’d like to watch and deploy from and add your build command and publish directory. By default, future-dated posts in Jekyll are ignored by the compiler so to overcome this we used the --future flag to kindly ask Jekyll to include the posts with a future date.

Netlify

Now Netlify is all set up and will automatically deploy your site to a randomly generated URL. The name can be changed and you can even add your own custom domain and as default, you get a free HTTPS certificate.

Netlify

Zapier

Zapier is an automation tool that can be set up to automate repetitive tasks without coding or developing custom integrations for your favourite apps or web services. Users of IFTTT (If This Then That) will be familiar with this concept of connecting things together to offer functionality beyond their core offering and Zapier includes plenty of pre-configured workflows for your apps to help you get started.

Automating a deploy with Zapier

It’s pretty simple to set up a workflow or “Zap” as they are known. When you ‘Make a Zap’ you’ll be guided through a step-by-step process to create a trigger in one of your apps that kicks off your workflow.

There is a handy feature in Netlify that allows us to Trigger a Deploy, essentially a manual way to run the build command on your code without pushing a commit to your repo and this is what we’re going to trigger in our Zap to run each day at a scheduled time.

The first stage is to Make a Zap and then look or search for Schedule by Zapier. After that, you can choose how often to trigger this event and in our case, it was Every Day.

Zapier

Following on from this you’ll be able to customise additional settings such as including weekends in the scheduler and also the time of day you would like the Zap to run at.

Zapier

Next, connect it to Netlify. You’ll have to authenticate if you haven’t previously set it up. Now you’re ready to choose an action event. In this case, we want to trigger a deploy.

Zapier

Hit continue and choose the Netlify Account where your site is.

Zapier

Next, select the site where you want to trigger the daily deploy. It’s probably a good time to name your Zap if you haven’t done so already.

Zapier

There is also an option here to clear the build cache. Set this to yes if you’re encountering failed deploys.

Hit continue and your Zap is complete. Don’t forget to turn it on.

Zapier

Parting thoughts

By connecting these services together to automate workflow, we were able to deliver scheduling functionality typically reserved for content management systems to a static website, all with zero cost and minimal setup. See what else you can do with Netlify + Zapier on their integrations page.