Dusty Candland | Sun Feb 04 2018 45 resources for learning about static sites

We love static site generateor and the JAMstack so we put together this list of resources for learning to use some of the top generators out there!

General

An Introduction to Static Site Generators

An Introduction to Static Site Generators

Build a Better Blog with a Static Site Generator

Make your blog load faster than your reader can blink with a static website generator without resorting to hand written HTML.

Getting Started with Static Sites

In this post, the author tells you what are static site generators, what’s the big deal, and what you need to know to build one.

Brunch

Getting Started with Brunch: The Ultra-Fast Simple-Config Build Tool

Getting started and setting up Brunch

Gatsby

Gatsby Video Tutorial

This course covers the basics of using Gatsby - Static Site Generator. Work your way through the videos and we'll teach you everything you need to know to create a professional and scalable website or blog!

Gatsby – Static Site Generator For React – Introduction

Gatsby is a static site generator for React and has just been released (version 1.0). This tutorial will take a look at this new project and show you how to install Gatsby and develop & deploy your first website.

Gatsby Tutorial - How to Use GatsbyJS for Static Site Rendering - Video

In this Gatsby tutorial, we introduce GatsbyJS and walk you through how to develop and deploy a static blog using GatsbyJS, React, GraphQL, and Surge.

GatsbyJS Tutorials #1 - Getting Started with Gatsby - Video

Tutorial on GatsbyJS

Static site generation with Gatsby.js - Video

Using GatsbyJS with React

GitBook

GitBook - Video

Short introduction on GitBook

Hexo

Hexo

Learn Hexo from this awesome Giraffe Academy course.

How to set up Free Blog using Hexo JS on Github - Video

In this video tutorial, we will go through how to set up a free blog using hexo static site framework. By the end of this video, we will have a blog that is hosted on Github for free using Hexo JS blog framework.

Hugo

Build Static Sites in Seconds with Hugo

Build a static web site from scratch with Hugo in less than an hour

Coding Modern Websites with the JAMstack, Part 1

In this tutorial, we will explore how to build a client-side application using modern tooling for a restaurant serving a modern cuisine

Coding Modern Websites with the JAMstack: Part 2

Coding Modern Websites with the JAMstack: Part 2

How To Create A Blog With Hugo

In this tutorial, I will show you how to install and use Hugo to build a static blog site on a CentOS-based Vultr LEMP server instance.

How To Install and Use Hugo, a Static Site Generator, on Ubuntu 14.04

In this guide, we will cover how to install and use Hugo on an Ubuntu 14.04 server. This will allow us to configure a static site, create content, and publish on the same server or deploy to a production location.

How to make a website and put it online 2017 tutorial - Video

How to make a whole website and put it online with Hugo and GitHub Pages.

Hugo - Course

This course covers the basics of using Hugo - Static Site Generator. Work your way through the articles and we'll teach you everything you need to know to create a professional and scalable website or blog!

JAMstack Tutorial - Full site using Netlify & Hugo

In this tutorial you will learn to build a client side application using modern tooling. You will build a restaurant site using Netlify and Hugo. Only basic knowledge of HTML, JavaScript, and CSS are needed.

Make Creating Websites Fun Again With Hugo

In this guide, I will show you how to setup your development environment with Hugo and build your first static Hugo website.

Zero to HTTP/2 with AWS and Hugo

In this tutorial you will learn how to go from Zero to HTTP/2 with AWS and Hugo, the fastest static site generator in existence.

Hugo Tutorial: How to Build & Host a (Very Fast) Static E-Commerce Site

We're going to prove how easy it is to set up e-commerce on static sites once again. And this time, we'll use an in-depth Hugo website tutorial to do so. :)

Jekyll

Building a static website with Jekyll and GitHub Pages

This lesson will help you create entirely free, easy-to-maintain, preservation-friendly, secure website over which you have full control, such as a scholarly blog, project website, or online portfolio.

Creating a Site - Jekyll - Static Site Generator - Video

This video is one in a series of videos where we'll be looking at building static websites using the Jekyll framework.

Getting started with Jekyll, a free and open source static site generator

Find out how to build your first static website with this Jekyll tutorial.

Introduction To Jekyll - Static Site Generator - Video

See how to make static websites more easily with the static site builder called Jekyll. This video is an introduction to the process of building a website with Jekyll.

Jekyll

This course covers the basics of using Jekyll - Static Site Generator. Work your way through the videos and we'll teach you everything you need to know to create a professional and scalable website or blog!

Jekyll: make fast, secure static sites and blogs with Jekyll

Do you want to learn to build sites and blogs with Jekyll? And have a simple solution without the overhead complexity? Site that is ultra fast and is immune to most common attacks?

Static Site Generator & JAMstack Intro: A Jekyll Tutorial - Video

In-depth introduction to static websites and static site generators with Jekyll. Speaker also talks about static web development and explains the benefits of working with static websites and the JAMstack for your projects.

Static Site Generators & JAMstack Intro: A Jekyll Tutorial

Here’s an in-depth introduction to static websites and static site generators with Jekyll. In this tutorial, Snipcart developer JS shows how to quickly get started with Jekyll. He also introduces static web development and explains the benefits of working with static websites and the JAMstack for your projects.

Why use a static site generator?

We’re looking at what static site generators are and how they’re different from dynamic content management systems like WordPress.

Metalsmith

A Step-by-Step Guide: Metalsmith on Netlify

In this tutorial we will set up a basic Metalsmith demonstration site, with a build file, static assets and some plugins. The aim of this site is to show a simple Metalsmith setup with continuous deployment on Netlify using GitHub.

How to build and deploy static websites using Metalsmith

Talks about process for building and deploying static websites using Metalsmith, a static site generator for NodeJS.

How to Create a Static Site with Metalsmith

Tutorial on How to Create a Static Site with Metalsmith

Mastering metalsmith: best practices for static sites

Lists some tips and tricks for using Metalsmith

Middleman

Middleman

Middleman - Static Site Generator This course covers the basics of using Middleman - Static Site Generator. Work your way through the videos and we'll teach you everything you need to know to create a professional and scalable website or blog!

Nuxt

A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack

Exploring: 1) Cockpit CMS, an API-first CMS recommended by a friend, and 2) Nuxt.js, a kickass Vue.js framework (we've wanted to use it ever since we fell in love with Vue).

Building a Personal Site with Nuxt.js

Using Nuxt to build a personal site

Getting Started with Nuxt.js - Video

In this video, we look at getting started with Nuxt.js

Pelican

How to Create Your First Static Site with Pelican and Jinja2

In this tutorial you will learn how to create your own static website from scratch using Pelican.

Making a Static Blog with Pelican

Brief tutorial on how to use Pelican

Pelican 3.7.1

Quickstart guide on using Pelican

Pelican tutorial Part-1 Basic setup - Video

Basic set up for Pelican

Spike

Crafting a Webpack-Powered Static Site with Spike

Discusses what sets Spike apart from other static site generators and shows a short tutorial on how to use Spike as a static site generator