A 5 minutes story written on Oct 2018 by Adrian B.G.

Most web developers are familiar with static web pages, it was the only way of publishing internet content before the cgi.

“A static web page (sometimes called a flat page/stationary page) is a web page that is delivered to the user exactly as stored.” Wikipedia

I want to take advantage of the fact that static websites are on the popularity train again and showcase other use cases, besides blogs.

I a fan of using the right tool for the right job, so I have never disregarded the static pages so far, and I am glad that they have returned in the current arsenal of tools of the modern web developer. I think I should thank Jekyll for this.

TL;TR

1. Blog
2. Documentation (manual, docs)
3. Website (presentation/personal)
4. Cache (templates/generate)
5. Communication cache (scrapping buffer)
6. Forms
7. Immutable content (newsletter, documents)
8. Maintenance page (disaster page)
9. Status page (recovering from disaster status)
10. Landing page/sales

Advantages

There are considerable advantages when using static web pages:

• raw performance (served as static assets or from CDN). A side-effect of a good performance is the SEO score, lower latency means better UX.
• spike traffic / hot load resistant — If a specific page or the entire website request count increases by a big factor, the load can be easily absorbed
• WhatYouSeeIsWhatYouGet. Only one version of the website means it is easier to test (QA).
• bulletproof security — no servers, injections, databases, data validation
• low maintenance/operation complexity (or none?)
• costs — you cannot get cheaper than an S3/Storage bucket and a CDN
• fast recovery — instead of backing up/restoring database and services, you just need to redeploy the app
• history changes (content undo/rollback)— property inherited from the source code version control solution (git).
• Availability (better up-time) — the operational complexity being so small, there are fewer things that can break

Most of the Static disadvantages (cons) will be fixed by a generator software:

• duplicate content (partials like header and footer)
• frequent update/deployment — similar to how dynamic websites are deployed today, instead of webpack you will use another tool: Static Site Generators

Another advantage of a CMS would be the ability to change the content, remote (without a local setup of a project). I think you can achieve that by using a cloud VM or IDE (like cloud9) and modify/deploy the project from there. The downside of this approach is that it requires a more technical person to achieve it.

Static web site

The most common example is to build an entire website without a back-end. I think the 3 most common usages are Blogs, Documentation and (normal?!) Sites. You can write them from scratch or use a generator.

One complete documentation example is https://manpages.debian.org/ which contains thousands of Linux packages man archives.

cache Very high traffic

When high traffic is involved with slow actions (like database queries), frameworks or bigger systems usually use HTML pages as a cache, to improve performance.

There are a few examples that I would like to showcase, where they export the dynamic content to static web pages.

I think craiglist (or another similar website) still uses a generate-HTML architecture, meaning when a user adds/update its content, a new HTML file is saved on the disk (as the opposite of dynamic website, that generates it on the spot, at each visit). Of course updating the template or a theme is a nightmare, but it works for them.

Amazon has a partner (I forgot which one), that provides some of the product descriptions. And because amazon has such a high traffic, they reached a consensus and provide a communication cache, the provider will output HTML files and let amazon scrape those, instead of hitting their servers with the full amazon mighty requests.

Peak traffic— Holidays, Sales, Black Friday, they are the bliss of a business and the nightmare of a DevOps. To tackle this, the shops usually generate static pages (newsletter like) and put them as landing pages/sale banners, at the main entry points of the e-shop. Because there are no requests hitting the servers (CDN caching), it can sustain a huge number of hits.

Forms and immutable content

Other types of static HTML pages are forms (that do not change often of course) which can submit data to a server (post) and content that does not change (like newsletters, sport results, historical events, papers).

Maintenance and status pages

I know that every client wants 100% SLAs but sometimes, when the sh** hits the fan, a maintenance page, hosted on a bucket somewhere, can be a life-saving jacket. A status page with a small dynamic content of the up-status can also save the day.

Tip: if you are using DNS providers like CloudFlare you can update your DNS entries and route the traffic to the maintenance page (that can be hosted on GitHub pages or an S3/DataStore bucket) until the service is restored.

Landing pages

I see this method as a mix of a static and dynamic web page. It can go well if you have the front of the website (entry-point) as a static website, and after the user is logged in, you can do a redirect to the dynamic part of the service, like a dashboard or administration panel.

Simple hosting solutions

• Hosting a Static Website | Cloud Storage | Google Cloud
• Hosting a Static Website on Amazon S3 - Amazon Simple Storage Service
• I usually use Cloudflare for the CDN and SSL features, on free tier: Our Plans | Cloudflare