Static Websites Explained
What is the Modern Static Platform?
We see it is as a way of building websites that are performant and secure, along with the ability to scale up if the demand requires.
Today we have many ways to build a deployable static website, which can then be automatically deployed to a Hosting platform from a Git Repository.
- Q: What are StaticPages?
- A: Naming things is a tough nut to crack but we see StaticPages as a hybrid of static HTML, the website is then enhanced with Serverless Functions (APIs) to bring dynamic functionality such as adding forms, authentication, email triggers, and more - all possible with just a few lines of code. StaticPages can be deployed from a Git provider.
- Q: Is this not JAMstack?
- A: Well yes and no as JAMstack (JAM stands for "JavaScript, APIs, Markup") is a methodology for efficiently creating lightweight, fast-performing web applications. JAMstack applications are static, with APIs used for any backend functionality. So you mostly start with JavaScript or a Static Site Generator and not HTML. Stack refers to the combination of all these things in a way that allows developers to build websites.
- Q: What is Static?
- A: Static to us means that every web page of your site is a HTML file which is served to your customers browser unchanged, it may then include interaction using JavaScript. StaticPages are served super fast from a CDN to your users.
Static Site Generator
A Static site generator is a tool which generates a full static HTML website based typically on Markdown and a set of templates. Which means a static site generator automates the task of coding individual HTML pages preparing them ready to serve to users ahead of time. Because these HTML pages are pre-built, they can load very quickly in users browser.
Static site generators are an alternative to content management systems (CMS) — another type of tool for managing web content, generating webpages, and implementing templates. (A template is a reusable format for web content, developers use templates to avoid writing the same formatting over and over.) Static site generators are typically part of a JAMstack web development approach.
There are many Static site generators to chose from which offer different ways of working with them and provide a wide array of outputs and dependencies. So when choosing one it is important to give thought into its inputs (How you work with it) and outputs (What needs to be served to your customer).
We like Eleventy it is a static site generator that makes building static, performant websites a breeze. It uses JavaScript to build pages at build time, but does not require any JavaScript in the client to render them. However you do need to have Node.js installed on your machine to install and use Eleventy. However today with the development of great browser based coding editors and environments you can just open a browser tab to get started.
You can also use Static site generators that generate documentation websites or doc's sections within a website. We used StaticPages to build the docs section on JasmineWS, which guides someone through building a website using cloud based tooling.
Static Hosting
Over the last few years we have seen a growing new breed of web hosting packages becoming available, that are designed from the ground up to really offer a solid static hosting platform. The packages are developer focused with effortless Git integration for automatic deployment to staging or production. Staging environments are great to allow for production grade testing before pages or features go live to your customers.
Along with support for an integrated CDN, which helps you build performance fast websites that can handle scaling up easily. The features don't stop there, with integration of Serverless Functions or Workers you can offer Dynamic functionality within your website.
Extra features like Authentication, web analytics plus a lot more are available depending on your providers choice.
Content Delivery Network
Content Delivery Network (CDN) offers a global solution for rapidly delivering and improving responsiveness of website content with end points distributed around the world, this means your website content is closer to where your users are. They can also save bandwidth costs as your content can be cached on the CDN this means that your main server/hosting account, which is call the origin, is not serving every request which will mean your website scales up to met any increased load. Reduced load times plus increased performance for your website will increase user satisfaction globally, as everyone likes a faster website.
Publishing Pipeline
Defined, predictable and trackable workflows are what every business hopes it has. If that task is defined in code you get all three as standard.
Having a GitHub Action that watches for events on your GitHub repository then carries out its defined function and reports back to you. Means you never have to take care of those common reoccurring tasks.
A standard task might be to deploy your website to production if the main branch gets updated, or to create a new staging environment if a pull request is raised. Which could then lead into automated testing, with maybe Playwright, to test the website.
Plus with the addition of axe-core to automate accessibility tests, which will highlight and detect some common accessibility problems. Such as missing or invalid properties as a first stage of testing before further manual accessibility testing is carried out.
You could also add Googles Lighthouse into Playwright, to track Web Core Vitals or look for other issues before shipping updates to the live website.
