A guide to the best way to build fast, efficient websites.

Latest Showcase Sites

Article Count on upper-right corner
Contentful 9 Github Pages 17 Hugo 37 Jekyll 236 Metalsmith 39 Middleman 43
Directus ABE CMS Butter CMS Shifter NuxtJS Cosmic JS
  • Creating a staging environment for Jekyll
    by Eduardo Bouças Tutorial
    Feb 22, 17

    A staging or pre-production environment is a testing infrastructure that replicates as best as possible the setup of a live site. In the context of a Jekyll site, it can be used to share a new post or feature with a selected group of people before a roll out to the general public. In this post, I’ll show you how I created one and how I make use of it.

  • NPM scripts for building and deploying Hugo sites
    by Aerobatic Tutorial
    Feb 13, 17

    If you’re new to Hugo, one of the things you learn pretty quickly is that there’s no plugin system to extend beyond the core task of combining Markdown and templates to output a set of static .html files. Fortunately the npm ecosystem already has great tools for performing these tasks.

  • Hugo Npm
    Feb 12, 17

    title: “NPM scripts for building and deploying Hugo sites” source: Aerobatic date: 2017-02-12 12:00 link: https://www.aerobatic.com/blog/hugo-npm-buildtool-setup/ type: Tutorial tool:

    • hugo — If you’re new to Hugo, one of the things you learn pretty quickly is that unlike Jekyll, and some other popular static site generators, there’s no plugin system to extend beyond the core task of combining Markdown and templates to output a set of static .html files. For example, there’s no equivalent to jekyll-assets to compile Sass, concat JavaScripts, etc. Fortunately the npm ecosystem already has great tools for performing these tasks, it just means your build system needs to take a “best of breed” approach that combines the awesome HTML generation powers of Hugo with other tools to do the rest.
  • How to Setup a Jekyll Theme
    by Kezz Bracey, Tutsplus Tutorial
    Jan 11, 17

    Right now Jekyll themes are not self contained packages need to be applied through an installer. When you download a Jekyll theme you’ll actually also download all the files required to run an entire Jekyll site.

    This will be changing in a future version of Jekyll, but for now you’ll need to know how to deal with the fact Jekyll themes come with a whole site attached to them.

  • Alerts In Wyam
    by Digital Tapestry Tutorial
    Jan 08, 17

    Bootstrap has the concept of “alerts”, which are specially styled divs used to call out notes. I wanted to be able to add these alerts to a Markdown document processed by Wyam.

  • Serve static websites with Caddy web server
    by Peter Y. Chuang Tutorial
    Dec 30, 16

    Initially, I put this website on Github Pages, which is free and fast, but lacks flexibility. For months, I’ve been itching to migrate (the move to Firebase proved short-lived) while dreading the prospect of having to configure and maintain a server. Then I discovered Caddy web server, the easiest-to-set-up web server I’ve ever used.

  • Publishing Jekyll updates with gitlab-ci
    by Lars Olafsen Tutorial
    Dec 11, 16

    In short, the GitLab CI is a set of commands that can be run when a repository receives a push, when an API is called, or when it is triggered by someone through the GUI. The commands are specified in a given YAML formatted configuration file - .gitlab-cy.yml which contains a set of specific keywords and arguments.

  • Hutch Codes — Azure Search for Jekyll
    by Jeremy Hutchinson Tutorial
    Dec 08, 16

    I added Azure Search to my static site built with Jekyll through the use of Azure Functions. Best part, it’s free*.

    This example is for Jekyll, it will work with any static site. The only thing Jekyll specific is the JSON representation of the site, and any static site generator should be able to build that file.

  • The API-Based CMS Approach
    by Levi Gable, CSS-Tricks Tutorial
    Nov 23, 16

    There is a trend in the web development world toward the API-based CMS architecture. Also known as “decoupled” or “headless”, it allows developers to separate the content management from the frontend implementation and connect to the CMS via an API. This is an exciting approach to website and app development, offering more freedom and flexibility. I want to show you my process for setting up and connecting to an API-based CMS.

  • More Advanced Jekyll/Liquid Template Techniques
    by Brian Rinaldi Tutorial
    Nov 07, 16

    Working on a recent project, I’ve come across several items that were either not well documented or slightly complex - though perhaps calling them “advanced” overstates the case. In this case, we’ll cover using multiple filters on a single value, using Liquid in Markdown, custom sorting posts and displaying posts by category.