Getting started with building static websites

In this post, you’ll learn essential things about static websites without going too in-depth.

What is a website?

Before we can talk more about static websites, let’s define; what is a website?

When we talk about a website, we usually refer to the final document we interact with through the browser, such as Google Chrome, when making an HTTP request. This document is accessed through a URL, which we type on the browser address field.

When we make an HTTP request from the browser address field by typing in an URL, we are sent a response from the DNS system configured to a specific IP that handles our request.

This IP that handles our HTTP request typically responds with a document, referred to as a website.

What makes a website static?

When we make an HTTP request to a specific URL, such as this website, we are sent a response that is typically a website.

Whether this website is dynamically created or not defines if the website is either static or dynamic.

In the case of a static website, the request is routed to a single document or a file, such as index.html.

For dynamic websites, which are the opposite of static websites, the request is routed to a web server that dynamically builds the document every time it gets the request.

In both cases, with static and dynamic websites, the final response is usually a website or a document sent to respond to the request.

The only difference is that a static website doesn’t require extra computing power or resources to re-build the response document every time requested, unlike dynamic websites.

What are the benefits of a static website?

Static websites have many benefits over dynamically created websites. Most of the advantages of static websites are due to the lack of need for a web server.

Security

Static websites do not require a web server, and therefore they are very secure by nature. The most significant security vulnerabilities that dynamically created websites poses are related to the web server in one way or another.

Cost

Most of the time, static websites are very lightweight and do not require much storage space or computational resources to run. This means that there is a significant advantage in the cost-effectiveness of static websites compared to dynamically created ones.

Sustainability

Static websites are better for the planet and the environment because they are more sustainable than dynamic websites. This is because there is usually no webserver involved when running a static website, which means much energy is saved compared to running a dynamic website that requires computing power to handle all incoming requests.

Maintenance

Some might argue that static websites are worse than dynamic websites, such as WordPress because they are harder to update or maintain. However, static websites have gained much popularity in the tech industry in recent years, and there are many tools these days that make the maintenance of a static website a lot easier than before.

Static websites are not any more complex than dynamic ones, and I would even say that static websites are easier to maintain than dynamic ones. This is, again, because of the lack of a web server and the overhead that comes with running a web server.

When should you use a static website?

Static websites are meant for showing and displaying content and information on a website and not so much for processing it. This means that static websites are not suitable for handling many user inputs and outputs.

If your website has many forms or requires your users to authenticate, it would be advised to look into more server-first solutions.

Static websites are most suitable for simple business websites, blogs, and landing pages.

How to build a static website

Static websites can be built by coding them yourself, but that can be much work and cost money. Typically the best way to make a static website is to use a static site generator (SSG).

A static site generator (SSG) is software that helps you build static websites. A static website does not use a database or server-side code, which means it’s much more straightforward and usually faster than a dynamic website. However, static websites can be more challenging to build because you must manually create each page. That’s where a static site generator comes in. It automates building static websites, making it easier and faster to develop high-quality websites. Many static site generators are available, so it’s essential to choose one that best fits your needs.

Once you’ve chosen an SSG, you can start building your static website! I recommend looking at GatsbyJS, Next.js, or Hugo if you’re just starting out. These are all popular options that are relatively easy to use.