Generating Static Sites With React

Articles & Tutorials

Optimizing static pages in your Next.js apps with Prisma (blog.logrocket.com)
May 27, 2020
In this post, we’ll mostly discuss next-gen SSG support and why integrating your Next.js app with Prisma makes this feature even more powerful.
  • Nirmalya Ghosh
Static Sites with Next.js 9.3 and Prisma (leerob.io)
Apr 08, 2020
Static sites are all the rage – and for a good reason. The JAMstack (i.e., JavaScript, APIs, and Markup) has emerged as an attractive alternative to traditional web apps.
  • Lee Robinson
Gatsby, Contentful, and Netlify Walk Into a Bar (alligator.io)
Aug 13, 2019
Static site generators like Gatsby are incredibly developer friendly and make super fast sites, but they’re almost completely inaccessible to non-developers. In this blog post I’ll show you how to change that.
  • Dave Kensell
Content Management with Gatsby, Contentful & Netlify (itnext.io)
Feb 18, 2019
Gatsby, Contentful, Netlify — The Triple Threat For Content Management Success.
  • Babs Craig
From Zero to Deploy: how I created a static website from scratch using Netlify + Gatsby (medium.freecodecamp.org)
Feb 18, 2019
After my first year working as a frontend web developer, I got the idea to have my own personal site. It’d be a platform to showcase my work, share content, and serve as a creative outlet for me outside of work. Here, I’ll walk you through my experience building the site from zero to deploy.
  • Eden Adler
Static website using NextJS and Markdown (vijayt.com)
Feb 17, 2019
This tutorial shows how to work with NextJS: add a new page, use CSS modules to style, navigate between pages, create a custom layout, process markdown files, create dynamic pages and export the app as a static website.
  • Vijay Thirugnanam
Building JAMstack Applications with Gatsby and AWS Amplify Framework (medium.com)
Feb 05, 2019
When it comes to performance these days, it’s not uncommon to hear the term “JAMstack”. JAMstack stands for JavaScript, APIs, and Markup. The idea being to create static markup with JavaScript that is powered by communicating with APIs.
  • Kurt Kemple
Start a Blog in 2019 with Gatsby.js and Netlify (daveceddia.com)
Jan 30, 2019
Here in Part 1, we’ll cover the nuts and bolts of getting a Gatsby blog set up and deployed.
Static vs. Server Rendering (frontarm.com)
Jan 15, 2019
Static rendering and server rendering both involve rendering HTML for each of your app's pages – but there's one major difference between them...
Creating a Static Site using Next.js and TypeScript (medium.com)
Dec 19, 2018
My goal here is to document the steps required to create a static site rendered using next and TypeScript. I'm specifically interested in a configuration that uses the export functionality of next to produce what is basically a static, server-side rendered web site that integrates dynamic functionality once loaded. If that interests you as well, read on.
  • Michael Tiller
9 React Static Site Generators for 2019 (blog.bitsrc.io)
Dec 13, 2018
Choosing a next-generation static site generator for React!
  • Jonathan Saring
Why you should use GatsbyJS to build static sites (medium.freecodecamp.org)
Dec 04, 2018
Gatsby has been growing over time, and I’m glad to see it in use by a huge number of sites like marketing sites, blogs, and generated static pages.
  • Ajay NS
How to leverage your React skills with static site generator Gatsby.js (medium.freecodecamp.org)
Dec 03, 2018
Sometimes a dynamic single-page app is overkill. You just need to get some attractive information on the internet. Welcome back to static sites.
  • Amber Wilkie
Migrating to Static Next.js and Now (dawnlabs.io)
Oct 01, 2018
I little over a year ago my friends and I released a little app called Carbon, and since then it has gone through a ton of development and upgrades.
  • Mike Fix
JAMstack with Gatsby, Netlify and Netlify CMS (medium.com)
Feb 01, 2018
I’ve recently migrated Dona Rita’s website from Jekyll to Gatsby. I’d like to share my process with you, as well as a few tips about building a JAMstack site with Gatsby, Netlify and Netlify CMS.
  • Pedro Duarte
Build a Static Blog using GatsbyJS (blog.manifold.co)
Jan 31, 2018
In this article, we will be building a static site using Gatsby.js.

Video Guides & Talks

Gatsby vs Next.js: Which does SSG Better? (youtube.com)
Mar 30, 2020
The battle you've all been waiting for! Which does static site generation better? Next.js or Gatsby?
  • Harry Wolff
Next.js Static Site Generation (SSG) Tutorial (youtube.com)
Mar 24, 2020
Learn how to use static site generation in Next.js in this tutorial where I show you how you can setup.
Beyond Static With Gatsby & Apollo (youtube.com)
Dec 05, 2018
In this talk, learn how Gatsby & Apollo help you build apps that combine the performance and workflow benefits of static sites with the flexibility and power of server-driven sites.
  • Jason Lengstorf
Gatsby JS Crash Course (youtube.com)
Apr 12, 2018
This is a 1 hour crash course on Gatsby JS which is a static site generator that runs on React and GraphQL. We will be creating a static site along with a Markdown based blog using a few plugins. We will also deploy our Gatsby site to Netlify.

Courses & Video Series

Gatsby And Contentful - The Headless CMS Approach (youtube.com)
Feb 04, 2019
In this tutorial we'll start from scratch building a blog with Gatsby and Contentful.
  • Sebastian Eschweiler
Gatsby - Static Site Generator For React - Complete Guide (udemy.com)
Jan 12, 2019
Build Awesome Ultra-Fast Websites With React And GraphQL, Get Started With JAM Stack And The Headless CMS Approach.
  • Sebastian Eschweiler
Pro Gatsby 2 (leveluptutorials.com)
Nov 02, 2018
Learn how to build the fastest websites on the planet with this Gatsby v2, a new static site generator using React.
Build a Blog with React and Markdown using Gatsby (egghead.io)
Dec 08, 2017
In this course, you’ll build a Gatsby site that transforms Markdown documents from your local filesystem into HTML
  • Taylor Bell

Podcast Episodes

Building Static Sites with Gatsby with Ajay NS (devchat.tv)
Apr 02, 2019
Ajay talks about his article "Why you should use GatsbyJS to build static sites" on Medium and why he felt the need to write it.
  • Lucas Reis
  • Justin Bennett
  • Charles Max Wood
  • Ajay NS

Libraries

gatsby (gatsbyjs.org)31808
v2.13.51
Aug 05, 2019
Build blazing fast, modern apps and websites with React
next (nextjs.org)34873
v9.0.3
Aug 01, 2019
Next.js is a minimalistic framework for server-rendered React applications
react-static (react-static.js.org)6855
v7.1.0
Jun 07, 2019
A progressive static site generator for React
  • Tanner Linsley