By Liz Osterloh, on Jul 26, 2019

Fly lighter with static sites: a packing list

Static sites are gaining popularity for good reason. With static sites, content is pre-built and served without calls to a database, so you get a lot of benefits: faster load times, simplicity, lower cost and few dependencies. You even get built-in protection against common security issues because of the much simpler architecture. After all, you can’t hack a database that's not there. And thanks to static site generators like GatsbyJS and hosting providers like Netlify, the ecosystem (and possibilities) are growing.

You can probably tell we’re big fans. We’ve written a lot about static sites over the last couple of years to help you on your way. Read on for a packing list of resources to get started, or learn some new ways to stretch its capabilities.

Static site basics

Not convinced about static sites? Healthy skepticism is a good thing. Static sites have had some drawbacks in the past, like… well, how static they are. Typically, dynamic functionalities like personalization and interactivity had to be run client-side. But there have been a lot of developments in the last few years, and it’s now possible to create dynamic-static hybrids. If security is your main concern, read this breakdown on how static sites can reduce the attack surface of your web app.

If you’re just getting started and want to build your first static site, we’ve created tutorials to set you off on the right foot. This guide runs you through the basics of creating a simple test app with React and Gatsby. More of an audio-visual learner? One of our Javascript ecosystem developers, Khaled Garbaya, created a four-part video series that runs you through the process step-by-step.

React isn’t your flavor? There are resources for other frameworks and languages too. Find a list of our supported static site generators in the docs, and a tutorial for building a Ruby site with Middleman or Jekyll. For Vue applications, check out how to build a blog or website with NuxtJS, courtesy of our community contributors. And how about a little (Python + Frozen-Flask) chocolate cake for dessert?

Don't forget your running shoes

Performance is one of the big benefits of static sites, and we have a few tips for how to take it further. To aim for faster build times, even when you’re generating thousands of pages, consider implementing a preview cache.

Fewer dependencies keep your projects simpler to maintain and ship, and make it easier to collaborate with teams. With static sites, you can keep your dependencies as close to zero as possible with zero config toolkits – read up on the 0x toolkit here.

Whether you have a final destination in mind, or you’re just planning a short visit to static site country: sign up to Contentful for free and get ready for departure!

Liz Osterloh

Technical writer at Contentful and friend to engineers. Liz has spent the last 5+ years turning tech and data-heavy topics into stories that speak to both developer and non-developer audiences. Find Liz at Contentful community meetups reporting on your awesome projects.