Static Websites

A static Website is a legacy method of publishing a website. It consists of a bunch of HTML, JavaScript, and CSS files. Since only limited resources are required to load the content, static websites are lightning-fast.

Static Websites are ideal for use cases where static content is served and/or data bandwidth can be an issue. Static websites are not for everyone and your mileage can also vary depending on several factors.

What is a Static Website?

The basic building block of a website is an HTML file, which contains the desired content, its structure, links to several images and other pages, and page formatting is carried out using a Custom Style Sheet (CSS) file. These files, representing a classic website development approach, can be shared online as a static website.

How To Create a Static Website?

A Static Website is either generated using a Static Site Generator from Static Content Files or as a Cached/scraped version of a Dynamic website with a backend database.

Manual Approach

This is the most straightforward approach to creating a static website. All you have to do is create the following 3 files in a folder.

• Index.html
  • SEO tags
  • Schema tags
  • Cascade Style Sheets [ colors, styling]
• Script.js file to hold JavaScript
• Style.css file to keep all custom styles (CSS) in one file

You can merge them all into a single file and completely avoid the 3 file approach. However, it is recommended to keep your data (HTML), style (Custom Style Sheets) and manipulation (JavaScript) in separate files.

Static Site Generator

Static Site Generators (SSG) are computer programs that replace the manual approach of creating HTML, CSS, and JS files. SSG create those files (and additional associated files).

Almost all computer programming languages offer their way of generating websites. Here is a list of some of the Static Site Generators. This list is not final and only important projects are highlighted.

Table 1: List of Popular Static Site Generators and their Templating engines

Dynamic to Static Site Converter

A converter is a tool to convert the Dynamics website to a Static counterpart. These tools rely either on caching mechanisms or scraping techniques to go through each page of the dynamics website and save them as individual HTML files. Here is a list of some of the most famous converters for the completeness of this post. These converters are available as a plugin with WordPress. However, WP2GIT has been reported to work with other CMS e.g. Plone, and Joomla.

• Simply Static
• WP2Static
• WP2GIT
• Static WordPress

Where you can use Static Websites?

• Project Documentation
• Blogs
• Landing Pages
• Portfolio Websites
• Small Business
• Branding Websites

When not to use a Static Website?

• You need to be good with the tech suite behind a Static Site Generator, as tech support might not be readily available.
• There are hundreds of Static Site generators, so you need to know what you are looking for.
• Most Static Sites Generators rely on markdown files to read/write content. Although there are some new CMS for static site generation available e.g. Netlify CMS, they are not as crispy as WordPress.
• Default websites offered by Static Site Generators are limited, and an initial setup time can be longer than expected.
• It’s possible to use Serverless functions and other approaches to bring back server-side functionalities to a static website. However, they still do not replace the original idea/concepts of Dynamic Websites.
• If your website is large or expected to grow large, then a Static Website becomes difficult to manage. Most web admins device their large projects into several small projects for better website and content management.

What are the Benefits of Static Websites?

• Easy to setup
• Super Fast on Loading
• Low Cost
• Low maintenance required
• Not prone to getting hacked. …
• Better Suited for SEO

How to Host a Static Website?

Static Websites are easy to host and there are both free and paid service providers. Here is a list of some of the famous

• Netlify
• Cloudflare Pages
• Vercel