You want the fireworks of a perfect Lighthouse score. You’re dreaming of blazing speeds. You’re planning to build a static site! But where do you start? What tools should you use? How should you deploy it? What about styling? Content? Everything else?
It's a lot. Planning out any new website is tricky. This article will show you the ins and outs of building a static website in 2023.
Static websites come with a lot of benefits, including a great developer experience, best-in-class page speeds, and enhanced security. Typically, static websites are built using a static site generator or frontend framework and then hosted on a content delivery network (CDN) like Netlify, Cloudflare, or Vercel. That means no traditional server or database to be hacked, and your code is as close to your users as possible to ensure those blazing speeds. Win, win!
Before you can even begin, you have to make some upfront planning decisions. You will need to choose a static site generator or the framework you want to work with, and you’ll have to figure out how to store your content, write your CSS and, finally, where to host your site.
There are many different ways to approach those decisions, and there is no perfect one-size-fits-all solution. And remember, it’s okay to go with what you know, even if it isn’t the trending hashtag on Twitter.
Regardless of your approach, we can all agree that the time for hand-coding websites has passed. There are just too many benefits to be gained from modern build tools and continuous integration/deployment (CI/CD) pipelines. And if no JavaScript is your thing, there are frameworks for that too!
Here are some variables to consider when making your decision.
- Static site generators: Is this site going to be fully static or do you plan on using some app-like features? Static site generators exist on a continuum with heavy-duty frontend frameworks like Next.js, Nuxt and Gatsby on one end and more purist static site generators like Astro, Hugo, and 11ty on the other end.
- Content management: Are you a solo developer with pretty straightforward content needs, like a developer blog? Markdown and MDX are a great choice for storing this kind of content. Or is there likely to be a team of people working with more complex content models? You’ll probably need a static site CMS like Sanity, which can give you a visual editing tool, publishing workflows, database-like content flexibility, and more.
- CSS: How to write CSS has gotten a bit controversial of late. The main options include standard CSS files, CSS-in-JS (e.g. Styled Components), and utility-first libraries (e.g. Tailwind). All are good and none are perfect—just pick the method that works best for you.
- Hosting: Static sites are generally very affordable to host, and some companies have generous free tiers that allow commercial use. Some hosts also have other features like Cloudflare’s free analytics, Netlify’s form handling, and Vercel’s tight integration with Next.js. It is worth doing a bit of shopping around before choosing.
There are two main ways to get started building your static site. You can begin with a template, which will get you up and running quickly, sometimes in just a few minutes. Or you can build your site from scratch, which is slower but easier in the long run. The main drawback of using templates, especially very complete ones, is that someone else has authored a lot of the code, making it trickier to modify later on.
Every major framework, hosting provider, and CMS offers open-source templates. Sanity is no exception. These can range from minimalist, easy-to-customize templates to almost complete websites that simply require you to swap out the final content. Keep in mind that while the more feature-filled templates can be appealing, the code is usually more complex to change later.
When you are evaluating a template, here are a few things to check.
- Is the code clear, logically organized, and well-commented? Look for things like readable variable names and reasonably sized components.
- How many GitHub issues are there and how long does it take for someone to respond to an actual issue? GitHub stars can sometimes be a false-flag, so peek into the issues to get a real sense for how the template is being maintained.
- How good is the readme? Does it give you enough information to work with and do you like the tone?
Creating a static website from scratch will always be slower than working with a template, but in the long run, it’ll pay off. You will know every detail of the codebase inside and out. You gain full control over how files are named, how folders are organized, and what libraries or tools are used.
Building from scratch doesn’t have to be painful. One strategy is to reverse engineer a template you like. This will let you easily recreate the most complex parts of a template, while giving you control over the code style and helping you to understand the trickier parts. In this scenario, copy and paste is your friend!
Another way to get started is to follow a step-by-step tutorial. This can be especially useful if you are learning a whole new framework, as you will pick up a lot of framework-specific concepts as you work through the steps of the tutorial.
Here are two of our favourite tutorials:
Building a website is a major undertaking, but the results will be worth it! Here are some tips to get you over the finish line.
Before you add flashy animations or beautiful illustrations, start with the basic HTML structure of your pages and layout. Every page should have an <h1> tag, the navigation should be inside of a <nav> element, articles should use the <article> tag, and so on. Using logical and semantic HTML elements makes your code easier to read, gives you some automatic accessibility wins, and improves your SEO scores. Think of it like building a home - you need to build the frame and the walls before you can paint and decorate.
Just build it. Seriously. Don’t get lost in creating the perfect button component or figuring out the ideal file naming convention. Those pieces can come as a project grows.
There is a lot of value in keeping things simple at the start. A big messy index.js file is a nightmare to refactor a year later but makes it easier to iterate on ideas quickly when you are just beginning.
If you’re working from a template, it can be helpful to keep an “originals” folder in your repository where you store unedited versions of the template files. This allows you to quickly cross reference, copy/paste, or even revert work without having to dig through your git history.
The beauty of the web is that you can make continuous improvements to your project over time as it grows.
We just told you not to optimize too early, but the opposite is true for deployments. Deploy early, and deploy often.
With static sites, every time you push a commit to your repository, you should be triggering a new build and deployment of your website. This can alert you to bugs and errors in production that you might not otherwise see in your local development environment. It is much easier to track these bugs down right away versus later on.
When you are just starting out you can use a robots.txt file to block all search traffic, which along with an obscure development subdomain keeps your site pretty hidden. Some hosts even allow you to password-protect your entire site at a root level if you need an additional layer of security.
Picking your brand voice, style, and design warrants a whole separate article, but one shortcut to great design is using a motif. A motif is a subtly repeated pattern or theme that helps to make a brand feel cohesive and connected. Sometimes this is a color, illustration style, or even just a shape.
For example, Sanity’s motif is the shade of red from the logo along with some translucent elements that play off the shading in the S. Apple has its classic white branding, exposed metal, and sleek industrial shapes; you know an Apple product when you see one.
Look for a subtle visual element that you can repeat across your brand to elevate the design of your site.
Finding a good .com is getting hard, if not impossible. Luckily, your domain name extension (this is called TLD, or top-level domain) doesn’t directly affect your search rankings, but it can affect brand perception.
You can try out service specific domains like .shop or .studio or add a prefix to your business name, something like trybusiness.com. Don’t forget about country codes if you’re creating a regional website.
Today, static websites can do everything a traditional, or dynamic, website can do. It is just a bit trickier to setup. Because static websites are hosted on a CDN, updating content on the site requires a new build (or in some cases just a partial rebuild). This works great for something like publishing a new blog post, but not so well if you want to show someone the current weather or load user profiles from a database.
Serverless functions and edge computing to the rescue! Serverless functions are run on-demand after page load to securely fetch information or perform tasks. Common examples include user authentication, database queries, online payments, and form submissions. Edge computing runs on every page request before page load, letting you do things like internationalization, redirects, and checking cookies
When combined, these two technologies let you build static websites that are fast and secure but still very interactive. This is sometimes called a “hybrid” site.
Here are some great resources if you want to do a deeper dive into these topics:
- What are Serverless Functions - video talk by Jason Lengstorf on egghead.io
- Edge functions example repo - examples of what can be done with edge functions
- Netlify Functions and Forms with Sanity - example of using Netlify functions (serverless functions) to submit data to Sanity via the frontend
You’ve picked your tech stack. Bought your domain. Found some design inspiration. Now it is time to write code!
We want to hear what you are working on and love to talk all things coding, static sites, and content! We have a very active community of developers on Slack who can help out if you get stuck and will cheer you on when the new site launches! Come join us, send us a tweet, and build in public!