Michael Rose, one of the most active webdesigner in the Jekyll community, shares his vision on static site generators.
Latest Showcase Sites
Popular ToolsArticle Count on upper-right corner
- React YouTube Video Backgroundby Hunter Chang TutorialDec 11, 17
For this demo, I’m going to be using Gatsby.js and a starter that I’ve created. In reality, you can do this with any React app, you don’t have to use Gatsby if you don’t want to. The starter just gives us some content and a layout to work with.
- Building a Photo Site With GatsbyJS Part 1 – Getting Setupby Jeremey DuVall TutorialDec 11, 17
In a recent post, I talked about some recent experimentation I did with GatsbyJS and the WordPress.com API. While it wasn’t quite a fit for rebuilding my personal site, I wanted to build something else with it. So, I elected to build an Instagram-esque photo sharing site.
- Running Jekyll with Docker and OpenShiftby Lars Olafsen TutorialDec 10, 17
OpenShift is currently en vogue in the company. The ease of use and scaleability found in a container based system allows us to automate the build and deployment steps of containers through software like Kubernetes/OpenShift.
- A CMS (or two) for Nikola: Dato CMS and Netlify CMS integrationby Nikola TutorialDec 05, 17
One of the many complaints users have about static site generators is the fact that non-tech-savvy users who don’t understand the command line or don’t want to learn Markdown/reST can’t use SSGs. We’ve tried to solve this before with Coil CMS, but that project is now dead, and was hard to configure properly. The problem was not solved, until now.
- Notes about migrating to Hugoby Fatih Arslan TutorialNov 30, 17
I’ve moved my blog to a new blogging platform. This time from Wordpress.com to Hugo. I took some notes about various parts of this migration. I wrote some of my thoughts on why I made the switch, ideas, improvements for the design and custom tooling for my editing workflow.
- Publishing Workflows for Jekyll Editorsby Mike Neumegen, CloudCannon TutorialNov 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.
- A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstackby Charles Ouellet TutorialNov 27, 17
- Featured Blog Images In Gatsby.jsby Hunter Chang TutorialNov 24, 17
With Gatsby.js, it’s pretty easy to get a static site up and running with one of their starter templates. The gatsby-starter-blog (https://github.com/gatsbyjs/gatsby-starter-blog) demonstrates how a Gatsby static site can function with blog posts written in markdown files. There is a list of blog posts on the homepage, but it would be nice to see a featured image with each post. Let’s dive into the gatsby-starter-blog and associate a featured or cover image to a markdown post.
- Setting Up a Continuous Deployment Pipeline with Gatsby.js, Contentful and Netlify | halfelectronic.comTutorialNov 23, 17
Ever since I published my first entry a couple of weeks ago, I have been asked a couple questions regarding the approach I followed to set up Gatsby.js, Contentful and Netlify, so I thought it would be a good idea to write a post about it.
- The most annoying thing about static site generators, FIXEDby Bill Miksich, Customer.io TutorialNov 21, 17
In order to get the level of control I craved over our lead forms, to fold our landing pages into the rest of the marketing site for a more consistent brand experience, and to do so in a way that fit into our current measurement ecosystem—I needed to find a point solution that would send form data directly where I wanted it.
- API-First CMS Primer with Directus’ Open Source Headless CMSby Maxime LaBoissonniere ArticleNov 20, 17
Directus is a “headless” CMS & API that decouples your content so it can be connected anywhere and everywhere. With a highly extensible DBaaS core elegantly wrapped with an intuitive admin web-application, Directus can mirror even the most complex database architectures. Best of all, this premium framework is completely free and open-source.
- Headless in love with Sanityby Knut Melvær, Hacker Noon ArticleNov 20, 17
When Netlife decided to rebrand, we didn’t only do so with a new visual identity that included our own typeface, but we also decided to explore new technologial frontiers. We’d been very happy with our previous website built on top of the versatile Craft CMS, but decided to explore if headless CMSes with a detached front-end on the web lived up to the hype (spoiler: they do)
- Contentful and Netlify: The Dynamic Duo of Static Site Managementby Malik Browne ArticleNov 15, 17
When it comes to blogging there are tons of platforms available for people to use. A blog could be using a static site generator like Jekyll, or a powerful content management system (CMS) like Wordpress or Drupal. Each of these tools has their own specific process for development.
- Speeding up our Jekyll site generationby Max Kleucker TutorialNov 07, 17
To figure out on which object Jekyll spends that time, the –profile flag can be used on most Jekyll commands. For example, jekyll build –profile returns a list of the most time consuming templates and rendered objects.
- Gatsbythemes - Beautiful and elegant Websites generated with Gatsbyby Sascha Jullmann TutorialOct 21, 17
Emotion is currently my favorite css-in-js library and fortunately there is a gatsby-plugin for that.
- A Guide to Static Site Generators Using Hexo and WordPressby Silvestar Bistrović ArticleOct 21, 17
In June of this year, Vitaly Friedman of Smashing Magazine introduced JAMstack in a workshop in my city. I’d never heard of it, and I was very intrigued. After the seminar finished, I studied this new concept for a bit, and I realized how awesome it is. I realized that my website doesn’t need a WordPress.
- How to Get 100/100 Google Page Speed Score with Middleman and Nginxby Mike Elliott TutorialOct 20, 17
I use the static site generator Middleman for the front end of the website you’re currently reading, and host it on a Digital Ocean Droplet in an Nginx server, so I’ll give some examples of how I achieved the perfect score in the context of this blog and its stack.
- Hugo and Madoko in a Custom Docker Image for GitLab CI/CDby Brian Klein ArticleOct 20, 17
TIPS FOR HOW TO SETUP HUGO AND MADOKO INSIDE OF AN ALPINE LINUX BASED DOCKER IMAGE FOR GITLAB CI/CD.
- Building static websites with Jekyll, VueJS & Bulmaby Daniel Lombraña, Scifabric TutorialOct 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.
- Awesome Hugo Boilerplatesby Josh Habdas TutorialOct 08, 17
In the fashion of Awesome React Boilerplates habd.as is comin’ atcha with an all new evergreen list of awesome boilerplates—this time for the one and only Hugo static site generator.
- Introducing React-Static — A progressive static-site framework for React!by Tanner Linsley TutorialOct 05, 17
At Nozzle.io, we take SEO, site performance, and user/developer experience very seriously. Over the last year, we’ve launched many sites using different static site tools that claim to solve these goals, but we have yet to find one that satisfies our requirements completely. Though each tool was unique and useful in its own way, we managed to pare down our list to the two following libraries:
- Hugo Templates for WordPress Designersby Leon Barnard, Treehouse Blog TutorialSep 30, 17
Last year I wrote an article introducing the general concepts behind static site generators. This time around I’d like to dive into some specific (yet still basic) details about a popular static site generator called Hugo, comparing it to its most well-known “dynamic” ancestor, WordPress.
- Creating a Static API from a Repositoryby Eduardo Bouças, CSS-Tricks ArticleSep 21, 17
The answer to these challenges almost invariably involves creating an API — a way of exposing data in such a way that it can be requested and manipulated by virtually any type of system, regardless of its underlying technology stack.
- Deploying Static Sites With SSLby terriblecode TutorialSep 14, 17
It had to have SSL which would be easy to setup. It had to use Docker. It had to work via git pushes
- Hugo Hosting with KeyCDNby KeyCDN TutorialSep 11, 17
Host Your Static Site as a Gitlab Page Behind a KeyCDN Pull Zone
- Creating dynamic layouts with Jekyllby Zander TutorialAug 13, 17
How we used YAML front-matter to massively change the layout for different posts on our agency’s new website
- Middleman Netlify Server Pushby Joost Baaij TutorialAug 07, 17
Last month, Netlify introduced their implementation of HTTP/2 Server Push. We started using this and have have noticed significantly faster websites. Here is how to configure Middleman to use this feature.
- Implementing a Series in Hugoby Joe Sacher TutorialAug 03, 17
In converting my Pelican blog over to Hugo, I needed to learn a new templating system. I miss a few things that Pelican did, like categories based on folders and not front matter. However, I can see advantages of allowing more organization in these folders, without affecting final position on the web.
- Creating a Blog with Gatsbyby Dustin Schau TutorialJul 27, 17
Gatsby is an incredible static site generator that allows for React to be used as the underlying rendering engine to scaffold out a static site that truly has all the benefits expected in a modern web application.
- Generating Comments on Static Sites with Staticmanby tosbourn TutorialJul 26, 17
In this article I’m going to go through the basics of setting up a Jekyll site, GitHub Pages and Staticman. If you’re just interested in Staticman please skip down a bit!