What is Static Site Generation?

Static Site Rendering is the process of generating web pages and contents ahead of time. The process is often automated using:

  • HTML templates (so that we don't have multiple copies of repeating content such as the header, nav bar or footer)
  • and a framework

Some frameworks that support SSG are:

  • React
  • Next.js
  • Angular (not Angular JS)
  • SolidJS
  • EJS

SSG is perfect for contents that only changes infrequently. Example use cases would be: restaurant menus, blogs, magazine articles. document libraries.

Another advantage is that it can be hosted on low level web hosting services and does not require server apps or processes to be running.

When content changes. The site content is simply "rebuilt" automatically instead of editing the code by hand, similar to compiling a program.

What are the alternatives?

  • Client side rendering: generate the contents for every request on the client side.
  • Server side rendering: generate the contents for every request on the server side before sending it to the clients.

Putting it All Together

This website is statically generated periodically using this system. Since I do not need the sophisticated features such as code splitting, I opted for EJS for simplicity. This also gives results that are still very readable and not cryptic and optimized.

The steps that take place automatically are as follow:

  1. Articles to be published are dropped in designated directories in Markdown format.
  2. Node module Grey Matter to extract the metadata of each article. These go to the links to the articles in the home page, as well as to the article pages themselves.
  3. Node module Remark generate HTML code from the markdown of the bodies of the articles. These will goes on the article pages.
  4. EJS templates to generate the home page, the links on the home page, and the article pages.
  5. Run time hydration code to manupulate and polish the pages (e.g. add navigation icons or captions).

In this diagram you can see the templates in light green.

Static Site Generation Diagram

The Bottom Line

When contents are changed or I have new articles to publish. I simply run the generation code. It takes about 5 seconds. Then I just upload the file to the web server. What a time saver!