Latest Showcase Sites

Article Count on upper-right corner
Contentful 10 Github Pages 17 Hugo 46 Jekyll 244 Metalsmith 40 Middleman 45
Serverless Post Scheduler 1 Isso Disqus 1 Directus ABE CMS Butter CMS
  • Go static: 5 reasons to try JAMstack on your next project.
    by Tom Bennet, Builtvisible Article
    Mar 13, 17

    Whether you’re building a blog, setting up an ecommerce site, or developing a JavaScript-powered single page app, the days of defaulting to WordPress for all but the simplest projects are over. Static site generators and ultra-fast CDN-based distribution are powering a new generation of websites, and the time to embrace this is now. Before diving into the why, let’s quickly look at the what.

  • Enabling offline usage of a Hugo site (PWA)
    by Michel Racic Tutorial
    Mar 12, 17

    PWA (Progressive Web Apps) are pretty cool for certain use cases like users having flaky connections (e.g. from mobiles) or just to reduce the initial loading time (after the first visit to the page). I document my exercise adding offline capability to a small single page site with no frequent updates that I built with Hugo and the Dimension theme.

  • Gatsbygram Case Study
    by Kyle Mathews Case Study
    Mar 09, 17

    Gatsby is a JavaScript web framework that let’s you build fast, very dynamic, mobile-ready websites without an advanced degree in JavaScript wizardry.

    It combines the fast performance of static websites with the powerful abstractions, tools, and client capabilities of the React.js world.

  • Go offline! Service Worker and Hugo
    by gohugohq Tutorial
    Mar 08, 17

    After mobile first, offline first and progressive web apps (PWA) are the current trend at the moment. Service Workers are crucial for both of them. A service worker is basically a script acting like a proxy between the browser and the network. You will find a simple example how to install a service worker for your Hugo satic site to make it blazing fast.

  • 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.