What is a Static Website?
A static website is a website that doesn't generate webpages using a program (e.g. via PHP) when a request is made. What this means is that the webpages are saved inside the web server as complete HTML files, and when a user accesses a webpage, the web server just gives them the file just like they would give them an image file. The opposite term is dynamic website.
Notable Features
Performance & Cost: static websites are lighter and faster compared to dynamic websites. You can often host a static website for free in some platforms, such as Neocities [neocities.org] and Netlify [netlify.com]. They can also be easily cached. You can configure dynamic websites to be cached, but people often forget to do this.
Not Very Dynamic: static websites by definition do not contain anything generated by the web server in real time (also called SSR, Server-Side Rendering). They can be somewhat dynamic if they load things in the browser with Javascript (CSR, Client-Side Rendering). But this would be limited to resources that are static. For example, you could have a sidebar that looks dynamic in the web browser, but this sidebar must be a static HTML file in the server, or generated by a static Javascript file served by the server.
No Cookies: static websites don't have any use for cookies. You can't sign up or log into a static website.
No Comments: static websites can't host user comments. It's possible to have comments in static websites if you embed a third-party platform like Disqus or Facebook Comments in every webpage. It's also possible to receive comments via e-mail and just update the webpages to include them later.
Extensions in URLs: static websites may have URLs that end in the served webpages' file extension, e.g. .html
, which may be considered ugly by some and create some issues with permalinks.
By default, if there is a file called index.html
in a directory, Apache will serve it for a URL ending in a forward slash (/
) for that file's directory. For example, if you have a file called /movies/index.html
, it will be served when a user accesses /movies/
. Many static websites make use of this default configuration to avoid having file extensions in their URLs.
This means that instead of the URL /contact.html
, which they consider ugly, a static website has a file called /contact/index.html
that is served when you access /contact/
, which I consider ugly, because by convention if a URL ends in a trailing forward slash, that means it's a directory, like /movies/
which would list movies, but /contact/
isn't a directory, so it should be just /contact
, and if you can't make it /contact
, just use /contact.html
. Nobody is going to type contact
into the address bar anyway. I very much doubt there is any SEO benefit to this; there's just no way that Google can't figure out .html
is a file extension.
How to Create a Static Website?
There are three ways to create a static website.
Manually: you can simply write the HTML files by hand, one by one. This is a terrible idea and I don't recommend this. If you do choose to do this, you probably want to run a basic web server, e.g. through python -m http.server
, so you can use relative URLs.
Using a Static Site Generator: you can use a specialized software for creating static websites, called a Static Site Generator (or SSG). Such software is often aimed at developers, like Hugo, Jekyll, Pelican, etc. In the past, we had applications like Microsoft FrontPage that provided a WYSIWYG interface for creating websites. I'm not sure if there exists something similar nowadays.
SSGs aren't particularly difficult to use. You just need to install the language, install the tool, learn the templating language, run a few commands in the terminal, and you're done.
Using a Scraper: you can create a static version of a dynamic website using a scraper, which is a program that automatically downloads webpages. Depending on what was used to create the website, there might even be some tool available that creates the static version automatically. For example, I'm sure there is some WordPress plugin for creating a static version of a WordPress website. If you created a website with Flask, you can use Frozen-Flask to "freeze" the website into a static version.
After generating the static website, all you would need to do is upload the files to your web host as-is.
Leave a Reply