Hosting GatsbyJS - A React Static Site Generator

April 27, 2016

Gatsby transforms plain text into dynamic blogs and websites using the latest web technologies. It's easy to get started with — and host on Aerobatic. I'll go over why you should consider it, and how to get it up and running quickly with Aerobatic.

Why Gatsby? The Advantage of React Over Templates

The current crop of content management systems (CMS) utilizes templates to organize content. Things like Liquid (Jekyll), [S|T]wig, etc. While these work, there is now a better approach — components. The leading web component framework is, of course, ReactJS. See what the React team says themselves about the advantages of components are over templates:

Traditionally, web application UIs are built using templates or HTML directives. These templates dictate the full set of abstractions that you are allowed to use to build your UI. React [and Gatsby] approaches building user interfaces differently by breaking them into components. This means React uses a real, full featured programming language [JavaScript] to render views, which we see as an advantage over templates for a few reasons:

By unifying your markup with its corresponding view logic, React [and thus Gatsby] can actually make views easier to extend and maintain.

Why GatsbyJS was created

I asked Kyle Mathews why he created GatsbyJS, and why he thinks React components are better:

Four main reasons. React components are perfect if you want a "progressive" website as it's trivial to layer in javascript-driven experiences on top of the static HTML version.

Second, React components are highly reusable/sharable. There's a huge number of fantastic React components already available on NPM (see js.coach) and it's very easy to abstract away parts of your site into your own components directory. I've seen very noticeable quality/velocity improvements by heavily relying on community components and my own components.

Third, React components solve nasty CSS problems better than anything else I've seen. The React community has come up with a number of very creative solutions leveraging the component model. My favorites are inline styles and CSS Modules.

Finally, if you spend most of your time working in React, working with Gatsby and React components feels far more comfortable than some other templating system. Gatsby is designed to feel completely natural to any dev who knows React.

The bottom line is that if you're already using React for developing sites, you'll probably want the same advantage for your blog or static site, too!

Creating your first Gatsby site

For your development machine, you'll need the command line tool:

$ npm -g install gatsby

Gatsby has some convenient starter templates. Try out the blog one: gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

This will create and install npm packages in a new directory called blog, one level below your current directory

Previewing your site locally

Take a look at your site on your local machine with this command: gatsby develop

Hosting and Deploying your GatsbyJS site

$ aero create
$ npm run build
$ aero deploy --directory public

Ready? Go!

If you're not already signed up for Aerobatic, get started!

Go farther

Scott Nonnenberg has some must-see tips on using Gatsby. After you've deployed your site on Aerobatic, go check it out!

Photo by Eva Rinaldi - http://flic.kr/p/bsTxXB