A static website contains pages stored and served as a series of HTML, CSS, and Javascript. There is no server in the back, creating the pages for each request. Static websites cut any generation time that we may have incurred with a dynamic page. With static sites, the cost is the increased storage demand of the application.
A dynamic website will build each page for each request, which costs time and saves storage space. A static website will sacrifice storage for the savings of build time on each call. People often describe static websites as simplistic. Instead of being negative, this is a very positive trait. Simplistic describes a technique that is accessible to a wide variety of people.
Where are all the pages written? ¶
We write the pages to a storage container connected to a content delivery network node. The node then distributes our pages throughout the network. When we are testing, though, we can write the pages to our hard drive and serve them through a web server.
Can static websites have JavaScript? ¶
Many people assume that a static website can’t use JavaScript or rather use it in a meaningful way. That is not true; the ability to use JavaScript is what makes it such a great tool! Although it would be wise to use CSS and HTML first and fall back to JavaScript when we need to. Although not a rule, it is a strong suggestion.
Can static websites be responsive? ¶
Static websites can be as responsive as any dynamic site. Most techniques used for dynamic websites are still valid with static websites. Progressive enhancements, media queries, and layouts would be the same.
Why build a static website? ¶
There are three main reasons to create a static website:
1. Operational Cost ¶
Static websites often have lower operating costs than traditional dynamic websites. The most significant expense of a static website is the attached storage. This type of room is usually cheap, costing only a few dollars for a gigabyte or more of storage.
2. Availability ¶
Static websites can take advantage of growing content delivery networks. All its assets are files stored on disk; this makes for simple caching. Many copies of the website are available around the globe in locations that are close to each user. CDN’s prevent the site from becoming unavailable from a catastrophic event. Including the loss of an entire data center.
3. Security ¶
Building a static website at deploy time allows it to have a smaller security footprint. Making static websites are far less susceptible to attacks. A static website is not impervious to attack, but it does have fewer moving parts to maintain and exploit.
Can a static website have dynamic content? ¶
Many people will tell you that a static website can’t have dynamic content, but that is untrue. API endpoints can provide real-time content to otherwise static websites. The JavaScript files are static, but they can load dynamic content. There is a growing number of services and providers targeting static websites. Some examples are databases, authentication, payment systems, and even CMSs.
Is there specialized static website hosting? ¶
There is! Several hosts specialize in hosting static sites. They generally have generous free tiers and deploy straight from your code repositories. Static hosts will handle configuration, DNS, SSL, and other details of your site. Are there Static website generators? Yes, there are, but they are not what most of you are imagining. These are not WYSIWYG tools. Instead, they are powerful templating engines and data manipulation tools. Once generated, the only thing leftover is the static pages for the website. They are zero-footprint frameworks. The best part is that the page build cost is only incurred once at build time. The pages are not re-build for every request to the page.
What are some uses of static websites? ¶
Static websites are everywhere. The engineers at Google introduced a pattern called the App Shell, which is a static website. The App Shell is everything that a web application could need, except for the data. After the shell launches, the app requests the data. A modern static web application would work the same way. This pattern underlays a vast majority of progressive web apps.