About
A Static website is a web application that is composed of static resources. (ie the web site doesn't need to generate dynamic pages at runtime)
The first reason to create or generate a static website is to improve performance because the pages:
Management
Resource
Caching
CDN can cache and serve static resource.
Dynamic web site can:
- create a snapshot and save it optionally in a CDN. Example: https://github.com/pluginkollektiv/cachify
- add a gateway proxy for the web server that will cache the page
Serving
static content must be served from a cookieless domain in order to lower the network traffic. In other words, static components should be requested with cookie-free requests.
Why ? When the browser makes a request for a static resource (image,…), sending cookies with this request is not needed because the content is not dynamic. (Cookies will not be read)
Another benefit of hosting static components on a cookie-free domain is that some proxies might refuse to cache the components that are requested with cookies.
On a related note, if you wonder if you should use example.org or www.example.org for your home page, consider the cookie impact. Omitting www leaves you no choice but to write cookies to *.example.org, so for performance reasons it's best to use the www subdomain and write the cookies to that subdomain.
Web Site Conversion
Static to Dynamic
A static website can be turned into a dynamic web application by adding client-side JavaScript that makes AJAX calls to APIs.
Dynamic to Static
A generator transforms a dynamic website to a static one.
A dynamic website can be turned into a static web application with a generator.
A generator will generate static resources (pages, image, …) from dynamic component (sort of template engine for instance, one page is generated by product)
Server Needed | Method | When will the static generation occurs |
---|---|---|
No | Web - Prerendering / Snapshoting (Dynamic to Static Web Site Generation) | build time |
Yes | Cache | runtime |
Template to static
Generator from template create in a markup language such as markdown.
- https://gohugo.io/ - Go
- https://jekyllrb.com/ - Ruby
- https://hexo.io/ - NodeJs
- http://octopress.org/ - Ruby