Journal Archives About Books Talks

Supercharge your static site with Netlify

I've enjoyed using static site generators since discovering Webby nearly ten years ago. Not only do static sites perform better, they're often simpler to set up and deploy.

GitHub pages is perhaps the easiest — push to your Git repository and GitHub will serve your site with some basic CDN fronting, thanks to Fastly. It's also free.

For a bit more control, you can also roll your own static host using services like Amazon S3 and Cloudfront at minimal cost.

Yet I've built enough blogs, brochures, and documentation sites to know the gaps and when to reach for an application server. Even with sophisticated JavaScript-powered frontends, applications often require authentication, server-side redirects, proxied API access, custom security headers and other needs beyond serving static content.

I recently discovered Netlify, which adds some features that make static sites more viable in many cases.

The basics

If you're using GitHub Pages because it's free, you'll enjoy some benefits from Netlify's free tier as well.

SSL. I've long wanted to serve this site over HTTPS. Previously, I hosted via GitHub Pages and while GitHub supports HTTPS for sites that run on *.github.io, there's no official support for configuring SSL for sites with a custom domain name. Netlify made it simple to set up.

Broader generator support. While GitHub will build your Pages site using Jekyll, Netlify supports practically any static stite generator. Just push your changes up to GitHub and Netlify will take it from there.

Live build output. Ever wonder what went wrong with your Jekyll build on GitHub? Netlify streams live build output so you're never in the dark.

Atomic deploys. Each build gets its own URL, letting you preview, publish, and rollback to any build with a single click.

Multiple deploy contexts. You can configure build options based on the context, giving you the flexiblity to alter the output for a deploy preview.

Redirects. Link rot is a real problem. Purely static sites don't have an elegant way to redirect users when content moves without resorting to JavaScript or <meta> tag tricks. Netlify supports flexible server-side redirects to point users to moved content, change your permalink format, or provide pretty URLs, even for push state.

I uploaded a list of redirects to a _redirects file in my site root and fixed a ton of broken links on wynn.fm, my vCard domain which I previously used as a custom URL shortener for Twitter.

A Command Line Interface. Many of us use static site generators because we like dealing with text files and a CLI. The Node-based CLI lets you manage and deploy sites from your terminal.

Webhooks and an API. Netlify supports both incoming and outgoing webhooks and a REST API to integrate your publishing process with other tools.

Paid features

Beyond the free tier, Netlify offers some advance features that stretch the capability of a static site and might save you from rolling your own backend.

API proxying and OAuth. JavaScript frontends often consume third-party APIs. Calling these APIs directly from the browser requires the API to support Cross-Origin Resource Sharing or JSONP. Otherwise, you have to proxy calls to these APIs off your own domain. Using Netlify's robust support for redirects, you can proxy all API calls from your own site. This can also be handy for making authenticated requests to that API to get a higher rate limit.

Netlify also integrates with GitHub and Bitbucket to provide authentication flows to allow your users to authorize your app so you can make API calls on their behalf.

Password protection. Want to protect a site before it's published? On the paid plans, you can password protect content via Basic Authentication.

Branch deploys. On the paid plans, you can map branches to subdomains, allowing you to test in a staging enviornment or a single branch deploy.

Form submissions. Need to capture information and route it somewhere else? Netlify offers basic form submissions that let you render forms to post content and retrieve data via the API and webhooks.

Bonus: Free Pro plans for open source

If your site is open source, you can enjoy all the paid features of the Pro plan gratis.

It's only been a couple of weeks, but since moving my vCard and blog sites over, I've been pretty happy with Netlify so far.

# Posted on