Static Site And Static Site Generator (SSG)

Explained With Examples

While WordPress is the de facto technology for creating a website or blog, static sites are a viable alternative that many people are moving to nowadays. This post explains static site and static site generator.

What Is A Static Site (Or Static Website)?

A webpage is primarily made up of:

  • Basic HTML (Hyper Text Markup Language)
  • CSS (Cascading Style Sheet)
  • JavaScript (JS for short)

CSS and JavaScript though optional nearly always accompany the webpage for styling and enhanced user interaction. Additionally, images might be used on the page.

A single webpage, or collection of webpages, on a file system comprises a static site.

Why Do We Call It Static?

Static because no processing is involved at the time of or before rendering (publishing) these webpages. Webpages are on the file system, complete and ready to be served to the browser. That’s why static site is also called flat, fixed or stationary site.

Static Website Demo

For demonstration, we can set up a quick static website on our own system:

  1. Create a folder example
  2. Add file index.html to it
  3. Add two more files contact.html and faq.html
  4. Paste the below content to the respective files and save
  5. From your file viewer, right click on index.html and select “Open With Chrome” (if the file has chrome icon, just double click)
  6. Move back and forth between Home, Contact and FAQ pages by clicking on the navigation links

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
</head>

<body>
  <h1>Home</h1>
  <header>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
  </header>

  <p>Welcome to example.com</p>

  <footer>
    &copy; 2021 example.com
  </footer>

</body>

</html>

contact.html

<!DOCTYPE html>
<html>

<head>
  <title>Contact</title>
</head>

<body>

  <h1>Contact</h1>
  <header>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
  </header>


  <p>You can contact us on admin@example.com</p>

  <footer>
    &copy; 2021 example.com
  </footer>

</body>

</html>

faq.html

<!DOCTYPE html>
<html>

<head>
  <title>FAQ</title>
</head>

<body>
  <h1>FAQ</h1>
  <header>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="contact.html">Contact</a></li>
      <li><a href="faq.html">FAQ</a></li>
    </ul>
  </header>

  <p>
    <b>What the hell is this?</b> <br>
    This is a static website.
  </p>

  <footer>
    &copy; 2021 example.com
  </footer>

</body>

</html>

These pages will appear on browser as:

Notice that the files are served as it is to the browser. Any modification we want in the content or the styling will have to be made in the fixed file itself, and that will be reflected in the browser on refresh after saving.

The above example has no styling, but for a real website we usually have a theme.

This is, in essence, a static site. No database, no API calls and no dynamic data. It remains stationary and shows the same on every browser visit, and to every user. The site can be deployed online and made accessible to the world the same way we see it on our local machine. The only difference would be a domain name that will point to the web server that will host and serve our website. For example, the above pages could be deployed and accessed at https://example.com/index.html, https://example.com/contact.html, and https://example.com/faq.html

Static Site Generator (SSG) And Content Management System (CMS)

In the above example, notice duplication across the files. Except for the text inside <title>, <h1> and <p>, all other things remain the same. That includes header and footer.

This is where Static Site Generators and Content Management Systems like WordPress come in. Both cut your manual work to minimum by letting you don’t repeat yourself (DRY) for adding or updating your content to the static website or blog. There’s a theme, that gives overall look and feel to your site, and templates (or partials), such as header, footer, sidebar, which your SSG or CMS puts together with the content you provide and output complete webpages.

What Is The Main Difference Between SSG And CMS?

The main difference between an SSG and a CMS is that SSG process the content beforehand for all the pages or posts in a website, while CMS (technically Content Delivery Application Or CDA, which is at the backend of the CMS) does this dynamically at the time the request for a page is made. An SSG builds a complete final website on the filesystem, ready to be served, whereas a CMS puts together everything at runtime by querying the data from database.

List Of Things An SSG Does

It:

  • pre-builds or pre-processes the HTML pages from raw data/content you provide and generates a final static site (generally called a build).

  • removes the code duplication by providing a number of reusable code snippets such as layouts, partials, front matter, shortcodes, etc., and numerous helper methods and variables.

  • adds list pages to list down all the pages in latest-first order. After a certain threshold, it adds pagination too. This is mostly used in static blogs, where new posts keeps on coming. All of this is highly configurable.

  • provides cosmetics such as “reading time” and “word count” that you can make use of to enhance user experience on your page.

  • may also give the option to write your content in a more user friendly format such as markdown, instead of raw HTML

Example Directory Structure And Files Of A Static Site Generator

Very roughly, the above website would become the following file structure in a static site generator:

  - content
    - page
      - home.md
      - contact.md
      - faq.md

  - layout
    - index.html
    
  - partials
    - head.html
    - header.html
    - footer.html

The pseudo-code inside the files will be something like:

layout/index.html

<!DOCTYPE html>
<html>

<%- "partials/head.html" %>

<body>
  <h1><%- title %></h1>

  <%- "partials/header.html" %>

  <p><%- body %></p>

  <%- "partials/footer.html" %>

</body>

</html>

partials/head.html

<head>
  <title><%- title %></title>
</head>

partials/header.html

<header>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="faq.html">FAQ</a></li>
  </ul>
</header>

partials/footer.html

<footer>
  &copy; 2021 example.com
</footer>

content/page/home.md

---
title: "Home"
---
Welcome to example.com

content/page/contact.md

---
title: "Contact"
---
You can contact us on admin@example.com

content/page/faq.md

---
title: "FAQ"
---
**What the hell is this?** <br>
This is a static website.

From above, you can observe how the repetitive code from our previous example have gone into layout and partials. The part which depends on the content, such as title, heading and body are injected via variables that we define in our content files (example variables here are title and body. Title we define in the front matter at the top of the file, whereas body is rest of the text/code below the line).

Once the SSG processes it, the final build would be similar to our example website folder at the start, with complete HTML pages ready to be served.

How Much Work Do You Need Add New Pages/Posts Or Update Them with SSG?

For the most part, you’d just need to add or update files inside the content folder. Anything that is being repeated goes to one place, such as layout or partials, and is inserted at build time by the static site generator to output a complete, ready to be served page.

When Should You Have A Static Site Without Static Site Generator?

A pure Static Site is a great option if:

  • You just want a website, not blog (a static blog is nearly impossible without a static site generator, because of the amount of content you need to add and maintain)
  • Your website is only informative about your business, brand or person, and the updates to the website are expected to be few and far between
  • You’re comfortable with HTML, CSS and JavaScript OR you have a developer who can do that for you

When Should You Use A Static Site Generator?

An SSG is a far better option if:

  • You want to write a static blog
  • The website or blog requires frequent and easy-to-do updates
  • The constant addition and updates to the website or blog will eventually require list pages and pagination
  • You know basic programming and the technology/language of a static site generator or have a developer who knows one

Where Is A Static Site Deployed?

One of the biggest advantages of a static site is the ease of deployment. Although you can set up your own server on cloud and deploy the site there yourself, but much better is to deploy it on any of the content delivery networks (CDN), such as Cloudfare or Netlify.

What Are The Limitations Of A Static Site And Static Site Generator?

The limitation of using a Static Site for your website is that you need to be a little more than a layman in terms of knowing underlying technologies. To know HTML, CSS, and JavaScript is almost always must. Additionally, you should also have a know-how of CSS frameworks with which the theme is made, such as bootstrap or tailwind.

For Static Site Generator, you might be able to add, update and delete content with very little knowledge (such as of markdown, which is not that hard to learn), provided that you don’t ever need to tweak the theme or logic of your site. For any change related to theme, layout, or logic you’ll need to know the basic technologies and probably another language which the SSG uses.

Lastly, unless you want to maintain all the builds by storing them in google drive or dropbox, knowing git is highly recommended for version control. But that adds to the list of limitations!

See also