Skip to content

Static sites

It is often the case that developers suggest "static sites" as a solution to a problem. What is a static site, and why should you care?

Static sites are websites composed of plain HTML, CSS, and JavaScript files that can be hosted as-is on a standard web server. These sites can be crafted by hand, or they can be compiled from other sources to create the final site. This hosting approach has a lot of benefits that make it extremely usefu

Why static sites

This arrangement has a lot of benefits from the perspective of the developers crafting the site and operators maintaining it.

Developer native tooling

Developers like creating static websites because they can be authored using all the same tools they are already comfortable using:

  • Site content, style, and functionality is implpmented with plain text editors,

  • Version control provides an established workflow for collaboration, and

  • CI/CD automates predictable, accurate site publishing.

Because they are simply text files, all developers are equipped to work on them in some capacity and without investing in additional tooling.

Low cost of ownership / portability

Many companies offer static site hosting essentially for free for all but the busiest websites. Static sites can also be hosted in object storage, on a vanilla web server, or packaged as a container.

Once online, very little ongoing investment is required to keep static sites online. Often, the only expense might be the domain renewal.

Portability

The wide array of options and ready availability of tooling lowers the risk of vendor lock-in, and means websites can be produced for things that might not otherwise have one.

Secure

Static sites are far safer to operate because they have far fewer attack surfaces than a dynamic website.

Ease of automation and data integration

Since static sites are just flat files, they are easy to generate using a variety of tools that would be difficult to incorporate in a dynamic web application.

This also makes it easy to incorporate a variety of data sources in the build process. Data can be pulled from third party APIs, spreadsheets, and other sources as part of the build process. Updating the data is as simple as rebuilding the site, so rebuilding on a schedule produces a website that looks and feels like a dynamic web application.

Where to host static websites

This includes code forges:

And specialty hosting providers:

And cloud providers:

Minimal static site

A minimal static site can be constructed with as little as a single GitLab CI/CD file and the pages component:

# .gitlab-ci.yml
include:
    - project: saferatday0/library/pages
      file: pages.yml

build-site:
    stage: build
    image: ${CONTAINER_PROXY}alpine
    script:
        - mkdir public
        - |-
            cat public/index.html <<EOF
            <html>
              <head>
                <title>hello world</title>
              </head>
              <body>
                <p>Hello world!</p>
              </body>
            </html>
            EOF
    artifacts:
        paths:
            - public/