A guide to the best way to build fast, efficient websites.
It’s all about Jekyll and journalism: Find out how ProPublica uses Jekyll and Grunt to report some of its biggest stories, including everything from helping a network of over 1,000 journalists cover Election Day in real time (on the site “Electionland”), to telling the sordid tale of how a U.S. company helped aid a notorious warlord—and everything in between.
Latest Showcase Sites
Popular ToolsArticle Count on upper-right corner
- Creating a staging environment for Jekyllby Eduardo Bouças TutorialFeb 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.
- How to Create a Fast, Secure, and Scalable Open Source Blog with React + Markdownby David Wells TutorialFeb 17, 17
Most companies look to WordPress, SquareSpace, or Medium for their company blogs. While these sites work for hosting blog content, they come with a number of downsides, especially if your target audience is develo
- Using Hexo and AWS to build a fast, massively scalable website for pennies – Mediumby Ted Yavuzkurt ArticleFeb 14, 17
I built myself a website that can handle front page of Reddit traffic. I’ve paid 50 cents a month in hosting so far. You can too.
- Deploy a Hugo site to Aerobatic with CircleCIby AerobaticFeb 14, 17
With the recent introduction of our new CLI, you can now host your Hugo sites on GitHub and using a Continuous Deployment tool like CircleCI, deploy to Aerobatic.
- NPM scripts for building and deploying Hugo sitesby Aerobatic TutorialFeb 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 NpmFeb 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:
- Automating Jekyll deployment to S3 using CircleCI in codeby Ricky Smith TutorialFeb 01, 17
I’ll guide you through the configuration steps I’ve taken to get my site automatically deploying to S3 (hosted by CloudFront) using CircleCI whenever you push to your master branch.
- Adding 'Minutes to read' to your Jekyll blogby Àlex Rodríguez Bacardit TutorialFeb 01, 17
I created a code snippet to calculate reading time on a given blog post for Jekyll. I got this idea from Medium’s interface, where you can see each post’s reading time, as you can see below.
- Middleman Tutorial (v4): Enable Static E-Commerce on a Ruby Site Generatorby Snipcart TutorialJan 27, 17
- How to build and deploy static websites using NodeJS & Metalsmithby Tilo, Node Web Apps tutorialJan 15, 17
My process for building and deploying static websites using Metalsmith, a static site generator for NodeJS.
- Setting Up Jekyll for GitHub Pages in 60 Secondsby CJ Melegrito, Tutsplus TutorialJan 11, 17
Jekyll can be used with GitHub Pages to create simple, blog-aware, static websites. This video will show you how to setup the bare-bones Jekyll flat file structure in 60 seconds!
- How to Setup a Jekyll Themeby Kezz Bracey, Tutsplus TutorialJan 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.
- Build a Custom CMS for a Serverless Static Site Generatorby John Polacek, CSS-Tricks TutorialJan 09, 17
- Alerts In Wyamby Digital Tapestry TutorialJan 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.
- JAMstack for Clients: Benefits, Static Site CMS, & Limitationsby Charles Ouellet, Snipcart TutorialJan 05, 17
Today, I want to discuss one of the changes we, as web professionals, are going through: the rise of the JAMstack & “static” sites. A change that’s affecting not only us, but clients too.
- A publishing workflow for teams using static site generatorsby Keybits TutorialJan 02, 17
If your team is semi-technical, and writes content for a static site generator such Jekyll or Hugo, you may have wondered how to approve new content before deploying it to production.
- How to show related posts in Hugoby Peter Y. Chuang TutorialDec 30, 16
The ability to show related posts is not yet a feature in Hugo. At present, one way to achieve this is by showing posts that have common tags or categories with the intersect function, as described in Hugo’s documentation.
- Serve static websites with Caddy web serverby Peter Y. Chuang TutorialDec 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.
- Creating responsive video embeds in Jekyllby Eduardo Bouças TutorialDec 26, 16
Making video embeds responsive is not always straightforward. Ideally, we’d have a way of making the embed take up the full width of a container (no more, no less) whilst maintaining the original aspect ratio of the video.
- Moving your blog from WordPress to GatsbyJS - Chiedo Labsby Chiedo TutorialDec 15, 16
Last week, I moved our entire website from WordPress to GatsbyJS. For those curious as to my thought process, it was this.
- Publishing Jekyll updates with gitlab-ciby Lars Olafsen TutorialDec 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.
- How to Create a Fast, Secure, and Scalable Open Source Blog with React + Markdownby David Wells TutorialDec 11, 16
Serverless.com’s blog is 100% open source content driven by a GitHub repo and Markdown files. Blog content is fed into our site and rendered with our static website generator of choice Phenomic. Let’s explore the benefits of our blog setup and how they address the problems outlined above.
- Improving Static Comments with Jekyll & Staticmanby Michael Rose TutorialDec 09, 16
In the months after ditching Disqus for a static-based commenting system, Staticman has matured with feature adds like threaded comments and email notifications.
- Hutch Codes — Azure Search for Jekyllby Jeremy Hutchinson TutorialDec 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.
- Using a Cloudfront CDN for Jekyll Without S3by Joe Buhlig TutorialDec 07, 16
I chose Cloudfront because I’m a fan of AWS (Amazon Web Services) and they are fairly cheap in comparison to the other big names in industry. I’ve worked with AWS enough in the past to trust it. But here’s how I set up Cloudfront to work with Jekyll:
- Dynamic looping in Liquid to build an advent calendarby Leon Paternoster TutorialDec 04, 16
This is one of the best things about Jekyll and Liquid. The syntax is easy to learn and well-documented, which means that, with a bit of thought (and Zapier), you can create some dynamic events on a static website.
- The API-Based CMS Approachby Levi Gable, CSS-Tricks TutorialNov 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.
- Speeding up metalsmith with incremental builds | Mograblogby Guy Mograbi TutorialNov 15, 16
I love metalsmith. Since I transitioned to it I write more on my blog. The only thing that annoyed me is that it became a bit slow. I found myself waiting several seconds between changes. So yesterday I decided to do something about it and I reached to a 500ms build on change. I’d like to share with you what I did.
- Add live reloading to Jekyll with Gulp and Browsersyncby Vladimir Iakovlev TutorialNov 11, 16
Live reloading is a very useful feature and it’s very popular in web development, but why don’t use it for writing blog articles and seeing changes in the real time?
I use Jekyll for this blog, and I already familiar with Gulp and Browsersync, so I decided to use them.
- More Advanced Jekyll/Liquid Template Techniquesby Brian Rinaldi TutorialNov 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.