How to build a static website (2023 guide)

Need a marketing site for a small business? A portfolio site to showcase your work? Perhaps you want to build a blog from scratch?

Whatever your use case, this guide will help you understand if a static website is the right choice for you—and cover everything you need to know to go from zero to online.

🔗 In this article 👨‍💻

• What is a static website?
• Why build a static website?
• Different ways to build a static site
• Getting your website online
• Back-end functionality for static sites
• Can you use a database with a static website?
• Tips for choosing technology as a beginner

🔗 What is a static website?

A static website—as opposed to a web application—is a site that is served as statically rendered HTML, instead of dynamically generated by a web server, or constructed by JavaScript in the browser.

Static websites can use JavaScript, but it is generally just used for enhancements and on-page interaction—not for constructing the entire page.

🔗 Why build a static website?

Static sites are known to be lightning fast, and work particularly well for either basic one-page style sites (think company marketing websites), or sites with a lot of pages that all have the same general structure (think blogs or news sites).

The page you're reading right now is actually a static website!

Due to their impressive page load times, static sites are a great choice if SEO is important to your project. Not only does a fast-loading page create a better user experience; it's also been a direct ranking factor for Google Search since 2018, and will continue to be into the future.

It used to be the case that static sites were mostly for static content, with interactive elements like forms being difficult to handle without significant extra work. But in recent years, advances in serverless technologies mean you can now do most things with a static site that you can do with a full-stack web app.

🔗 Different ways to build a static site

There are a couple of general approaches you can take when building a static website. The right one for you will depend on your technical knowledge and experience, and on the type of site you want to build.

🔗 1. Code your website from scratch

This is where the site consists of pure HTML, written directly in .html files, and those are what gets served to the browser once you deploy.

This approach is:

• Simple—you don't have to use any build tools if you don't want to
• Beginner friendly (a good learning experience if you're new to web development)
• Flexible, good for highly custom designs

You can either start with a pre-designed HTML template, a bare-bones framework (which you can modify with CSS to add your own styles), or a completely blank HTML page.

If you prefer to start with a pre-made design, there are thousands of templates online, both free and paid. Some popular options are:

• ThemeForest: Over 18,000 HTML templates created by a global community of independent designers and developers, starting at around $5.
• Templated: A collection of simple CSS, HTML5 & Responsive site templates, released for free under the Creative Commons license.
• HTML5 UP: Responsive HTML5 and CSS3 site templates also released under the Creative Commons license.

🔗 2. Use a static site generator

Static site generators (or SSGs) are a more advanced option. Unlike writing HTML pages directly, with this option you have data and content (such as Markdown files), and then separate page templates.

This is all combined to generate a static HTML website, with the help of a build process. Different SSGs use different programming languages to handle this process, and configure exactly how it works.

A static site generator is somewhere between a hand-coded static site, and a full CMS (like WordPress).

This approach is:

• Faster and more lightweight than a CMS (the resulting site is still just static HTML pages)
• Great for content management—you generally keep content separate from any layout code, so you don't have to deal with all your text being embedded in HTML, which can be difficult to maintain
• Suited to large sites with a lot of very similar pages

🔗 Popular static site generators

There are hundreds more, some of which may be a better fit for more specific use cases. Jamstack.org has an excellent comparison page of all the top open source SSGs.

🔗 Getting your website online

Once you have your site written or generated, you're ready to put it on the internet.

🔗 Buy a domain

The first thing you'll need is a domain. I like Namecheap because their prices are good, their UI is easy to use, and they have good support if you need it.

If you need help finding a good domain name, NameMesh has an excellent domain name search tool where you can enter a keyword or two, and it will suggest relevant available domains.

🔗 Deploy your site

The good news is there are a lot of cheap or free hosting options for static websites:

• GitHub Pages: If you use GitHub, this is one of the easiest ways to get a basic static site online.
• Netlify: A much more powerful option: you can also deploy on every code push, but there's a lot more tooling available if you need it.
• Vercel: Similar to Netlify in features, and you can also get started with zero configuration.
• Amazon S3: Not the most beginner-friendly option, but could be a good choice if you want to integrate with any of the other AWS offerings.

🔗 Back-end functionality for static sites

We've seen that static sites are great for pure front-end projects.

But what happens if you need functionality normally only available with the help of server-side code? Think contact forms, user logins, or collecting emails for a mailing list signup.

For handling form submissions, you could use a third-party service like Formspree, and mailing list providers like Mailchimp usually have their own integrations for handling signups.

But what if you want more flexibility, or something more custom?

I mentioned above how we can now implement back-end features using serverless cloud functions.

Serverless functions are essentially server-side code that you can trigger to run either on a schedule, or on certain events. They're very convenient because—as 'serverless' implies—you don't have to worry about managing your own servers.

Once you've set up serverless functions, your static site can then make HTTP requests to them, either to fetch or send any data as needed.

Some of the most popular providers are:

• AWS Lambda: natively supports Java, Go, PowerShell, Node. js, C#, Python, and Ruby, and is a good choice if you're also deploying your static site to Amazon S3
• Google Cloud Functions: single-purpose, stand-alone functions which you can write in Node.js, Python, Go, or Java
• Azure Functions: Microsoft's serverless offering, supporting C#, JavaScript, F#, Java, PowerShell, Python and TypeScript

🔗 Can you use a database with a static website?

If we can add back-end functionality to a static website, what about storing data?

Similar to how serverless functions—or Functions-as-a-Service (FaaS)—provide managed server-side code, Database-as-a-Service (DBaaS) platforms are the data storage equivalent. They give you a full-fledged database without you having to maintain any infrastructure yourself—a perfect choice for static websites.

These are some popular databases for use with static sites:

• Amazon DynamoDB: A serverless key-value and document database that's part of the AWS ecosystem.
• Firebase Realtime Database: A cloud-hosted NoSQL database from Google's Firebase platform.
• FaunaDB: A developer-friendly serverless database with a web-native API, which also integrates well with Netlify.

🔗 Tips for choosing technology as a beginner

Once you've learned about all the different options for building more advanced static sites—from front-end tech to hosting, deployment, back-end functionality and databases—you probably still have one question: how do you decide what to use when you don't have much experience?

🔗 Plan everything out before you start coding

You know you need a static site, but think about other features beyond just the HTML. Do you need users to be able to sign up to a mailing list, or contact you through the website? Do you need to display any data pulled from APIs or other external sources?

Draw a diagram of all the different parts, and how they should fit together. Then think about how each piece will work, and how any data flowing into or out of your site will be handled.

🔗 Use languages you already know

If you know JavaScript, maybe look for a static site generator written in it, rather than having to learn about Go or Ruby tooling before you can get up and running. If you know you want to write serverless functions in C#, be sure to check the supported languages before choosing a FaaS provider.

Of course it's also fine to pick something different if you want a learning experience, but you'll be able to go faster if you use existing knowledge to your advantage.

🔗 Stick to one ecosystem

You may have noticed that the main providers all have equivalent products for each type of service (e.g. AWS Lambda is Amazon's version of Google Cloud Functions). Once you have an idea of what general components you need, it's time to think about which provider you should go with.

By sticking to all the products built or recommended by a single company, you'll generally have an easier time getting everything to integrate properly and work together. You'll also be able to stick to the documentation of a particular vendor, rather than having to switch between them.

For example, this is a diagram from Amazon showing what a static site (with serverless functions and a database) built using products from their ecosystem could look like:

🔗 Pick tools that are designed to be easy to use

If you're relatively new to building websites, you'll want to start simple.

Some of the platforms in this space provide a lot of powerful tools (especially Amazon and Google), but you won't need most of them, and it'll likely just be confusing and overwhelming to a beginner.

Expect a learning curve whatever you decide. But platforms like Netlify that focus heavily on developer experience and are good at abstracting away complexity as much as possible can be a better choice for beginners. They tend to have clear, plain English documentation and modern, user-friendly UIs.