Hosting GatsbyJS — A React Static Site Generator
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:
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
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!
For your development machine, you’ll need the command line tool:
npm -g install gatsby
Creating your first Gatsby site
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
You need to create a separate ‘build-prod’ script that disables Babel’s cache. This is because there is not enough available hard drive space on the Amazon Lambda image to support a full Babel cache. Don’t worry, the build, and the resulting site, are still super speedy.
Here’s the configuration:
"dev": "gatsby develop",
"build": "gatsby build",
"build-prod": "BABEL_DISABLE_CACHE=1 gatsby build",
"lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
So we’ve created some npm build scripts, including the important build-prod for production. Then, from our Aerobatic config, we’ve specified that we are using the npm build option,build-prod is the script to run, and that the files it generates go in the public subdirectory.
Go ahead and make these changes to the package.json file in your blog directory. Commit the changes and push to your Bitbucket repo.
Visit your repo on Bitbucket and click on the Aerobatic icon. Here’s an example screenshot of how you should set up your configuration. Choose a new name for your site, and point to the public directory for your files.
After you click ‘Create website’, your site will be deployed and available on the web. If there are any errors in the deployment process, check the deploy logs. And please reach out to us at Aerobatic for support if you need it, we are happy to help.
The code in this blog post should be all you need. Just in case we’ve made our example code available here: https://bitbucket.org/aerobatic/gatsby-demo
Scott Nonnenberg has some must-see tips on using Gatsby. After you’ve deployed your site on Aerobatic, go check it out!
Ready to try Aerobatic?
Install the Bitbucket add-on, link a repo, and have your website live in 30 seconds!