Managing a Static Site with GatsbyJS

09 October, 2018 — Read time: 5 Min. — Category: Front-End

This is the first of several blog posts derived from my experience building a portfolio site. This post is a basic overview of the site stack - intended to provide context for the tutorial series.

I had a lot of fun building this website. By good fortune, I avoided the myriad hells developers erect for themselves and found myself with a blazing fast site that's easy to maintain. Most of that good fortune came from picking the right tools for the job. Essentially, it's fortunate that I was able to capitalize on the hard work of countless others. A heart felt 'Thank You' to everyone who's contributed to the tool and dependencies used by this website. I find it incredible that such a performant website can be created and served for free.

Architecture

There are a lot of parts that go into even a simple static website. This is intended as a birds-eye architectural view, covering only the highest-level services.

Built with GatsbyJS

Gatsby is a JavaScript framework for creating blazing-fast static websites built on React.js and Webpack. I'd certainly vote it the most cutting edge JAMstack framework currently available.

Gatsby starts by making it easy to reuse your old components (if you develop in React) - this was the primary reason I originally decided to complete the tutorials. It continues to make the development experience a delight with its smooth Webpack integration. Like instant visual feedback while writing your code? Of course you do. Simply typing the command gatsby develop will compile a site, serve the content locally using a dev server and automatically hot-swap in changes on save. Like calling imports by module instead of using relative OR absolute paths? Of course you do. Calling a directory as a module is a simple as setting the desired Webpack configuration using the gatsby-node.js file at the project root.

exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
        resolve: {
            alias: {
                portfolio: __dirname,
                config: path.resolve(__dirname, 'config/'),
                content: path.resolve(__dirname, 'content/'),
                scripts: path.resolve(__dirname, 'scripts/'),
                static: path.resolve(__dirname, 'static/'),
            },
            modules: [path.resolve(__dirname, 'src'), 'node_modules'],
        },
    });
};

Now this config file is the only place that has to be updated if a directory is moved. Imports to these directories don't have to worry about where they're actually located.

// SomeComponent.jsx
import theme from 'config/theme';
import OtherComponent from 'components/OtherComponent';
// ...code cont'd

Gatsby also provides an out-of-the-box GraphQL data layer to pull in data from wherever it's stored and does most of the PWA (Progressive Web App) heavy lifting for you.

Hosted on Github

All code and versioning is hosted on github. I won't say much about github here - I'm guessing you already know what it is. If you're not familiar with git and github, check them out - they form the backbone of the modern open-source community.

Served by Netlify

Netlify is a continuous deployment service for static websites. Any changes committed to a github repo can be automatically pulled and used to created a new versioned build within Netlify. Builds are served on an impressively fast system of CDNs with out-of-the-box DNS management and a TLS certificate from Let's Encrypt.

Netlify is the only tool in this chain that isn't inherently free. They're a business - they have a competitive, but very much not free pricing scheme. Fortunately, they have a very generous free tier. Personal sites like this one managed by one user won't cost a penny.

Result

After a handful of tweaks, the site gets a near perfect score from Google's Lighthouse Audits tool using simulated 3G throttling.

Here's a desktop testing example:

Alt here

And here are the results of the mobile audit:

managing static site gatsby audit mobile

It's a beautify thing to see those scores considering how little effort was required to optimize the site. PWA and Accessibility come headache-free. Google's web crawler loves the site. And a lot of paying site-owners will want to fire their CMS after looking at the speed index. In this case, it didn't cost a penny. And bonus, I didn't have to learn PHP!

Conclusion

This site is built using the Gatsby framework, hosted on github and served with Netlify. These services form a fast, free and scalable JAMstack for any small to medium website. Bigger sites will still get the speed and scalability, but may move into Netlify's paid tiers.

Each one of these services is built on lower-level services that are also worth exploring in depth. I will explore a few in future posts, but I want to start with a few basic tutorials showing how to develop your own static site using this stack. The Gatsby tutorials do a good job of getting through the hello world phase, so I'll leave that to them.

I want to focus on putting the pieces together, including:

  • Dockerizing your development for a consistent build environment that doesn't pollute your local machine with dependencies
  • Configuring Netlify to serve your static site from github
  • Auditing you site with Google Lighthouse Audits to optimize performance

I plan to refer back to the tutorial on containerizing a development environment in a lot of future tutorials. If you're not developing in a container now, just know that you probably should be. My next tutorial will show how easy is can be to step into the container world.

Containers will be old news for you by the time we're serving distributed Tensorflow machine-learning models using Kubernetes. We're not there yet. Come back next week and we'll get started on this static site.

Like this post? Read other posts from the category Front-End