Ruby-based static site generator with blogging and collections

Showcase Sites

  • Speed up your Jekyll builds
    by Mike Neumegen Tutorial
    Dec 08, 17

    Having a short Jekyll build time helps you iterate faster while developing and goes a long way to improving the experience for editors on CloudCannon. In this post, we’re going over how to identify bottlenecks in your Jekyll build and tips on how to address them.

  • Publishing Workflows for Jekyll Editors
    by Mike Neumegen, CloudCannon Tutorial
    Nov 29, 17

    Our main goal at CloudCannon is to make collaboration between developers and non-technical editors seamless. To an extent we’ve achieved this with editing a Jekyll site; editors can update HTML, Markdown, front matter, blog posts, collections and data files without knowing anything about Jekyll or HTML but what about Git? Recently we’ve been working to achieve the same level of integration for Git workflows. In this post I’m going over some of the new workflows CloudCannon supports.

  • Building static websites with Jekyll, VueJS & Bulma
    by Daniel Lombraña, Scifabric Tutorial
    Oct 13, 17

    You are probably building your site already with Jekyll, and while this is cool, sometimes you want to add some magic into the mix to have some fancy JS frameworks like VueJS or React for developing cool stuff. Also, you got so used to Babel and Webpack that you don’t know how to write JS code anymore without this toolchain. Hence, you have a question: can I still use my Jekyll site and add as toppings VueJS + Babel + Webpack? Yes, you can! Let me explain how.

  • Automating Static Website Deployment, Part 1
    by AlphaGeek Tutorial
    Jun 28, 17

    Now that I have 8 static websites deployed into AWS using S3 and CloudFront I need to automate the deployment process so that I can make changes quickly and get them to production with less effort. To that end I have developed some scripts and configurations that automate the deployment of this site to a QA environment and production when changes are pushed to either branch.

  • Generating static AMP pages
    by Paul D'ambra Tutorial
    Mar 22, 17

    AMP or Accelerated Mobile Pages is a Google-backed project that allows you to use restricted HTML to delivery static content quickly. Since AMP HTML is restricted it isn’t a fit for every site. Since this blog is published as static HTML artiles it is a good candidate for publishing an AMP version. An open source AMP jekyll plugin was amended to add AMP versions of pages.

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

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

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

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

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

  • Switching to Google AMP and back
    by Evert Pot Tutorial
    Oct 25, 16

    This website is built with Jekyll, hosted on Github pages, and behind a Cloudflare proxy. Why cloudflare? Same reason for using AMP! Websites are pretty much my business, and I want my own home to be powered by both TLS and HTTP/2!

    What this meant for AMP though is that I had to change my main site into an AMP site. Dynamic websites unlike this might be able to create both an AMP and non-AMP website.

  • Using Travis CI to build a Jekyll site
    by Paul D'ambra Tutorial
    Sep 18, 16

    Travis is an online continous integration system that hooks very neatly into Github. It’s free for open source projects and adds build status to commits. It can be set to automatically build pull requests and adds output to those PRs so that people can see if it is safe to merge a request without building it locally themselves

  • Archiving Jekyll Websites with Sitemaps
    by Ryan Baumann Tutorial
    Sep 09, 16

    If you run a Jekyll blog (like this one!), you might be interested in having your blog posts saved in a web archive like the Internet Archive Wayback Machine. In this post, I’ll show you how you can use an auto-generated sitemap to get a list of all URLs on your Jekyll blog, then feed those URLs to a web archiving process.

  • Does Varnish Make Jekyll Sites Faster?
    by Matthew Simpson Tutorial
    Sep 07, 16

    I started reading about Varnish a while ago and decided to give it a go on my server. I was curious to see if it would do anything to speed up delivery of my site even though it’s built using Jekyll, so is completely static. I only realised once I’d set it up (which took longer than expected do to the site using SSL) that I could notice a difference myself, and would have to jiggle some stuff around so that I could performance test it. I’ll explain how it Varnish works and how I tested it compared to going straight to Apache.

  • Adding Siteleaf to a GitHub Pages site
    by David Darnes Tutorial
    Aug 25, 16

    I’ve been using Siteleaf a lot recently, for both my day job and personal projects. In light of this, I decided to create a screencast of myself going through the process of adding Siteleaf to a pre-existing site running on GitHub Pages. As additional reference, I’ve documented the process below.

  • Setting up a Living Styleguide in Jekyll
    by Hugo Giraudel Tutorial
    Aug 17, 16

    I was recently working on a small Jekyll project and wanted to see whether it would be possible to have a very component-ized approach driven by a styleguide, despite the fact that Liquid (the template engine behind Jekyll) is not meant to do that.

    I found it out it is doable (not without some struggling though) and I’d like to show you how so you can consider using a similar approach in your next Jekyll project.

  • Plugging Webpack to Jekyll Powered Pages
    by Jonathan Petitcolas Tutorial
    Aug 12, 16

    I chose Jekyll to power this blog. It allows a blazing-fast display (as rendering is just composed of pure HTML static files) and a free hosting on GitHub Pages. Yet, when I started to build these pages a few years ago, I didn’t know about Webpack. Better late than never, let’s see how to plug these two powerful tools together.

  • How To Deploy A Jekyll Blog In Docker
    by Emmet O'Grady Tutorial
    Aug 10, 16

    The biggest advantage of using Jekyll is that we can put our blog posts in a GIT repo. This means that all changes to the posts will be recorded and we don’t have to worry about backups when the site is live, since we can regenerate the entire site at any moment from the source code in the GIT repo. Also, it gives us complete portability, it will be easy to move the posts to another blogging platform if needed since we have all of the posts in markdown in the GIT repo.

  • Page Sections in Jekyll - Seperating Content from Layout
    by David Egan Tutorial
    Aug 10, 16

    Achieving separation is pretty straightforward with single page/post/collection views - just define a custom template and inject the content from a markdown file (from yaml frontmatter and the main content field).

    But what about displaying section content in a single page context? This is a common requirement for landing pages, home pages and single page sites.

  • How to handle multiple authors in Jekyll
    by Adrian Matei Tutorial
    Aug 09, 16

    One of my main concern when I considered the migration from Wordpress to Jekyll was how would I be able to handle multiple authors, because this plays an important role in the website supporting our Coding Friend Program. Fear no more, I have found a satisfactory way to handle multiple authors with Jekyll1 and in this short post I list the main points concerning that.

  • Develop sites over HTTPS from static site generators (like Jekyll)
    by Paul Bakaus Tutorial
    Aug 05, 16

    If you’re using a static site generator like Jekyll or Grow (recommended), you know that commands like jekyll serve or grow run will spin up local web servers that allow you to live develop and preview your static site. Unfortunately, these generators don’t create a secure context behind an HTTPS domain, something I need often to test PWA features or certain AMP tags.

  • Jekyll article sell-by dates
    by Kevin Hougasian Tutorial
    Aug 03, 16

    So much work has gone into, and we like to keep content fresh, or at least let you know you may be reading an old or outdated article. Enter the freshness scale.

    Leading every article on is a heart rate icon (hover over it for our rating scale). Doesn’t seem that difficult, so how did we get there using Jekyll?

  • Creating an asset pipeline with Jekyll-Assets
    by Phil Nash Tutorial
    Jun 28, 16

    Bundling, minifying and caching the static assets was high on the priority list. The site is built on Jekyll so I went looking for (and ultimately found) a plugin that would perform the following: Bundle static files together, Minify the resulting files, Generate a hash of the content of the file as the production filename

  • Serving Jekyll with Grunt | MrLoh
    by Tobias Lohse Tutorial
    Jun 03, 16

    If you are running a Jekyll blog, you might find that simply running jekyll serve to generate all your files is not enough. I for example want to minify/uglify my CSS and JavaScript files and I totaly depend on Autoprefixer. So if you have done some serious front-end Web Development before you probably have used Grunt for things like that — if you haven’t heard of it, go check it out now. But running grunt watch and jekyll serve parallel is really slow, since a change in any grunt-processed file (e.g. your main.scss) will trigger several Jekyll builds, because Grunt will most likely creates several new files which will each trigger a Jekyll build. That’s no good! To solve the problem we will instead handle the compiling for any CSS/Sass and JavaScript/CoffeeScript ourselves with Grunt and only trigger Jekyll builds — also with grunt — if other files change and serve the whole thing with Grunt as well.

  • Inline CSS in Jekyll
    by Hugo Giraudel Tutorial
    Jun 02, 16

    You may have heard of critical CSS. The idea behind the concept is to provide critical styles (the ones responsible for the look of the top and main content areas of the page) as soon as possible to the browser so that there is no delay before accessing the content.

  • Cracking FaceBook Instant Articles With Jekyll
    by Amit Tutorial
    May 19, 16

    Hello All, Recently I got access to Instant Articles from Facebook for my Jekyll based blog. The interesting part is that as far as I know, Instant Articles RSS Feed are not supported by Jekyll - yet! But no worries, I have done this and I am going to share how :)

  • Syncing a site between GitHub and Jekyll
    by Hugo Giraudel Tutorial
    May 10, 16

    The thing is, I did not want to make the GitHub repository non-usable anymore. Basically, I wanted everything to work both on GitHub and on Tricky! I eventually found a way, not without a struggle though so here are a few lines to explain the process.

  • Elasticsearch for Jekyll
    by Allison Zadrozny Tutorial
    May 06, 16

    Elasticsearch, at its core, is an open-source search engine. Just like Solr, it is based on Apache’s Lucene search library. Elasticsearch gives developers access to an enterprise-grade engine that is distributed, scalable, and has a rich API.

  • Using Webpack and React with Jekyll
    by Allison Zardrozny Tutorial
    May 02, 16

    Enter Webpack and npm, which gives me access to node modules that were previously something I’d only look at wistfully. I find trying to let Jekyll handle javascripts annoying and tedious, so I like that with this I’m able to use an ecosystem that is specifically designed to do major lifting in compilation, testing, and minification.

  • How to add Table of Contents to Jekyll
    by Webjeda Tutorial
    Apr 20, 16

    Table of contents is the index of your blog post. It provides a quick look at what the article is all about. Also, users can skip to any topic they like just by clicking on it. Learn how to add Table of Contents (TOC) to your Jekyll blog.

  • Github Pages Best Practices
    by Matt Allan Tutorial
    Apr 12, 16

    Github Pages is a really nice (free) service for hosting static HTML websites. You can push simple HTML files, but you can also push a Jekyll site and Github will build it. This site is built with Jekyll and hosted on Github Pages, and I use it for all of my code projects too.

    The Jekyll setup for Github pages is a little weird, and there are a lot of gotchas to making it run correctly.

  • Jekyll: detect Github build
    by Tomas Dvorak Tutorial
    Mar 23, 16

    Github exposes repository metadata inside Jekyll’s configuration under site.github namespace. This can be used to render some interesting data like repository name, organisation members, releases, contributors or repositories

  • Consider Jekyll
    by Oliver Pattison Article
    Mar 18, 16

    Jekyll is a tool that builds fast, simple, secure websites. It is an alternative to a conventional content management system (CMS). The key difference between Jekyll and most CMS software is that Jekyll has no database and is made of plain text and HTML files. Fundamentally, it is a publishing system that generates HTML markup from plain text Markdown files.

  • Switching to Aerobatic Static Site Hosting
    by Ryan Brown, Serverless Code Tutorial
    Mar 13, 16

    Aerobatic runs on AWS, so features like their CDN (actually CloudFront) and free SSL certificates (issued by ACM) are backed by familiar tools. The hugo-lambda templates cover some of the same ground, but Aerobatic also comes with a wealth of knowledge and best practices in its configuration. They set cache lifetimes, do URL rewriting, and build Jekyll or Hugo sites automatically.

  • Making Jekyll multilingual
    by Sylvain Durand Tutorial
    Mar 01, 16

    Jekyll has a very flexible design that allows a great freedom of choice, allowing the user to simply introduce features that are not integrated into its engine. This is particularly the case when one wants to create a multilingual website: while CMS remain very rigid and often require plugins, few filters are sufficient to achieve it with Jekyll.

  • Improving typography on Jekyll
    by Sylvain Durand Tutorial
    Feb 29, 16

    Observing typographical rules on the Internet is not always easy: although Unicode reserves many areas of characters for typographic symbols, many punctuation marks and spaces are most of the time unused.

    With Jekyll, the articles are written very simply with Markdown before being generated in HTML by the engine: we can add automatic rules to improve typography on our site without carrying about it when writing articles.

  • How to implement Tags at Jekyll website
    by Pavel Dmytrenko Tutorial
    Feb 25, 16

    Recently I have finished adding tagging infrastructure into this website. That’s was a bit tricky since Jekyll does not fully support this feature from the box. It is possible to add tags into the post’s YAML front matter and then access them using page varialbes via page.tags. However, there are no built-in means to generate tags page which collects all tags from the posts, sorts them alphabetically and builds a list of the posts assigned to every tag. Let’s take a look at one possible way to implement described functionality.

  • Using Gulp with Jekyll
    by Aaron Lasseigne Tutorial
    Feb 04, 16

    Jekyll handles Sass out of the box and supports CoffeeScript with a gem but I demand more. I want Sass, file concatentation, minification, automatic prefixing of CSS, live reloading, and dancing unicorns! Ok, that last one might not be available. For the rest… enter Gulp.

  • Travis CI deployments to DigitalOcean
    by Mxime Kjaer Tutorial
    Jan 28, 16

    In my continuous quest to make this site lean and mean, all of the above have led me to set up automatic deployments to my server. This means that my workflow now just consists of creating content and committing it — the rest is done automatically. Travis CI builds the site, compresses assets, runs a few tests, and deploys it all to DigitalOcean, where Nginx serves it.

  • A new Siteleaf
    by Siteleaf Article
    Dec 18, 15

    Siteleaf v2 brings full compatibility with Jekyll, the same open source technology GitHub uses to power over half a million websites.

  • Static sites go all Hollywood
    by Phil Hawksworth Video/Presentation
    Sep 22, 15

    The popularity of building web sites with static site generators is on the rise. Their reduced complexity, easier compliance, cheaper hosting, and other benefits are getting people’s attention, but they do have limits.

    This talk will explore how we can break through some of those limits with the use of a new breed of hosted tools and services. We’ll look at practical examples of how a static site generator can help deliver a modern web development workflow, support a living styleguide, and also pack the kind of dynamic punch that you’d only think possible from bigger application stacks.

  • It's time to drop your CMS
    by Owen Williams, The Apartment Article
    Sep 10, 15

    Every time I’ve had to build a marketing site for a company, large or small, the debate rages over which CMS should be used. Usually it comes to the conclusion that every CMS is terrible, so we’ll run with the least-awful one.

    It’s time to drop that way of thinking entirely, and move to a CMS-less model. Static sites, which require no database or complex configuration to scale massively, are far easier to maintain and develop for, yet they’re often ignored.

  • Integrating Gulp into Your Jekyll Workflow
    by Rob Wise Tutorial
    Aug 01, 15

    This is a walk-through demonstrating how to integrate Gulp.JS into your Jekyll site’s workflow. This is especially geared towards sites deployed on GitHub Pages because I will show how to use Gulp without sacrificing GitHub’s Jekyll integration support.

  • Jekyll and Git Hooks
    by Jonathon Klem Tutorial
    Jul 19, 15

    I’ve recently been introduced to Jekyll and with the help of git hooks I would argue that it’s even easier to add and manage content with Jekyll and Git Hooks than with WordPress AND it has the added benefit of not requiring a database or even PHP.

  • The Changelog #162: Octopress 3.0 with Brandon Mathis
    by The Changelog Resource/Website
    Jun 26, 15

    This week Brandon Mathis joins the show to tell us all about the much anticipated 3.0 release of Octopress, his Jekyll-based blogging framework for hackers.

    Octopress 3.0 is a complete rewrite and has been in the works for quite a while. We find out why Brandon decided to go for The Big Rewrite and what’s been taking so long (hint: it’s not because the dude’s been slackin’).

  • Automatic Archives for Jekyll on GitHub Pages
    by Tobias Lohse Tutorial
    Jun 14, 15

    Static sites are pretty cool. Not just, because they’re so fast, but also because they are pretty intuitive. After all it’s just a bunch of files in a folder structure — just like you know it from your local filesystem. But while they are cool, they also have some drawbacks when compared to database driven sites. One is that it’s hard(er) to generate query driven sites like archive pages by month, year and day or by things like tags and categories. There are a bunch of plugins for that task, but those don’t work well with GitHub Pages. But there are other ways to solve the issue, after all we just need to generate some files.

  • Jekyll Tips
    by Jekyll Resource/Website
    Jun 10, 15

    This guide will give you a step-by-step introduction to Jekyll. We’ll download a free HTML 5 template, convert it into a Jekyll website, add a blog and make it so clients or non-technical users can update content. Let’s get started!

  • Supercharging Jekyll with a ServiceWorker - Eduardo saying things
    by Eduard Boucas Tutorial
    Jun 04, 15

    From a performance point of view, it puts the developer in control of how local caching works — what files to cache, when to cache them, serve them and update them. Because it runs in the background, it can silently fetch and cache all the files for the About me and Contact sections of a website whilst the visitor is still scrolling about on the landing page. When they do visit those pages, they will be served instantly because the files are already on disk, there’s no need to wait for a trip to the server.

  • A Case for CMS-Free Ecommerce
    by Max White, Pigeons and Creoles Article
    Apr 21, 15

    …it’s worth taking the time to re-examine the assumptions these [CMS] systems are predicated on, and evaluate whether they generate enough value to justify their complexity. This is especially true in the light of a growing abundance of dedicated external services and the maturity of client-side solutions.

  • CloudCannon as the CMS to your Jekyll Site
    by CloudCannon Video/Presentation
    Mar 04, 15

    Getting non-technical users to confidently add content to a static site has been a barrier in the past, but we’re increasingly seeing solutions for a variety of needs. In beta now, Cloudcannon is soon to release a backend for Jekyll, the most popular static site generator in the land. Check out the video as it looks like a thoughtful and polished product.

  • Introducing Poole
    by Mark Otto News
    Jan 02, 14

    It’s a fully furnished Jekyll setup, designed to be a consistent and flexible starting point for Jekyll projects. It’s available today, and I’m releasing two open source themes with it.

  • Introducing Jekyll-hook: Run your own GitHub Pages
    by Dave Cole, Development Seed Article
    May 01, 13

    For those cases where we need the simplicity of GitHub Pages’ workflow but have to host on our own infrastructure, we built Jekyll-hook. It’s an extensible server that builds Jekyll sites on each commit to a GitHub repository, just like GitHub Pages. It provides a ton of additional flexibility, while preserving the benefits of static site generation, like needing no server-side processing to serve webpages.