Gatsby

Transform plain text into dynamic blogs and websites using the latest web technologies. A React.js static site generator.

Gatsby - a React.js SSB - Presented by creator Kyle Mathews (video)

Showcase Sites

  • Image Optimization Made Easy with Gatsby.js
    by Kyle Gill Tutorial
    Jan 10, 18

    Shave off hours of work with a simple to use React component built for images. Optimizing images hardly sounds like an ideal afternoon of work, but in today’s world it’s become a necessary evil. This post looks at how it can be done much easier using gatsby-image.

  • How I Added Additional Post Types to My GatsbyJS Site
    by Ben Newton Tutorial
    Jan 09, 18

    First things first, I needed to add the source for my new posts. The starter is already pulling data from markdown files in /content/posts utilizing gatsby-source-filesystem. I thought I could just add another reference to markdown files in a new directory and I’d reference that in a separate GraphQL query and have a separate array of posts to work with, but that is not how it works.

  • React YouTube Video Background
    by Hunter Chang Tutorial
    Dec 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.

  • Featured Blog Images In Gatsby.js
    by Hunter Chang Tutorial
    Nov 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.

  • GatsbyJS Tutorials #1 - Getting Started with Gatsby
    by LevelUp Tuts Tutorial
    Aug 07, 17

    Enjoy all the power of the latest web technologies. React.js, webpack, modern JavaScript and CSS and more are all setup and waiting for you to install and start building.

    Bring your own data

    Gatsby’s rich data plugin ecosystem lets you build sites with the data you want. Integrate data from one or many sources: headless CMSs, SaaS services, APIs, databases, your file system, and more. Pull data directly into your pages using GraphQL.

  • Creating a Blog with Gatsby
    by Dustin Schau Tutorial
    Jul 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.

  • Gatsbygram Case Study
    by Kyle Mathews Case Study
    Mar 09, 17

    Gatsby is a JavaScript web framework that let’s you build fast, very dynamic, mobile-ready websites without an advanced degree in JavaScript wizardry.

    It combines the fast performance of static websites with the powerful abstractions, tools, and client capabilities of the React.js world.

  • Static site generation with Gatsby.js
    by Scott Nonnenberg Presentation
    Apr 19, 16

    What is Gatsby? It’s a node module which weaves together React.js, React-Router, webpack, and webpack-static-site-generator. You get a nice development experience with hot-reload for page contents, styles and page structure, and you’re working with the same markup as what is generated to disk for production builds. It’s as simple as running gatsby develop or gatsby build on the command-line.

    VIDEO