In modern development, there are so many great tools for developing websites, but often they are more than what’s necessary for a given project. In this article, we’ll explore how to take a humble HTML page and make its content editable in a CMS with no frameworks and no client-side JavaScript.

With the advent of the Jamstack movement, statically-served sites have become all the rage again. Most developers serving static HTML aren’t authoring native HTML. To have a solid developer experience, we often turn to tools called Static Site Generators (SSG).

These tools come with many features that make authoring large-scale static sites pleasant. Whether they provide simple hooks into third-party APIs like Gatsby’s data sources or provide in-depth configuration like 11ty’s huge collection of template engines, there’s something for everyone in static site generation.

Because these tools are built for diverse use cases, they have to have a lot of features. Those features make them powerful. They also make them quite complex and opaque for new developers. In this article, we’ll take the SSG down to its basic components and create our very own.

What Is A Static Site Generator?

At its core, a static site generator is a program that performs a series of transformations on a group of files to convert them into static assets, such as HTML. What sort of files it can accept, how it transforms them, and what types of files come out differentiate SSGs.

Jekyll, an early and still popular SSG, uses Ruby to process Liquid templates and Markdown content files into HTML.

Gatsby uses React and JSX to transform components and content into HTML. It then goes a step further and creates a single-page application that can be served statically.

11ty renders HTML from templating engines such as Liquid, Handlebars, Nunjucks, or JavaScript template literals.

Each of these platforms has additional features to make our lives easier. They provide theming, build pipelines, plugin architecture, and more. With each additional feature comes more complexity, more magic, and more dependencies. They’re important features, to be sure, but not every project needs them.

Between these three different SSGs, we can see another common theme: data + templates = final site. This seems to be the core functionality of generator static sites. This is the functionality we’ll base our SSG around.

Our New Static Site Generator’s Technology Stack: Handlebars, Sanity.io And Netlify

To build our SSG, we’ll need a template engine, a data source, and a host that can run our SSG and build our site. Many generators use Markdown as a data source, but what if we took it a step further and natively connected our SSG to a CMS?

• Data Source: Sanity.io
• Data fetching and templating: Node and Handlebars
• Host and Deployment: Netlify.

Prerequisites

• NodeJS installed
• Sanity.io account
• Knowledge of Git
• Basic knowledge of command line
• Basic knowledge of deployment to services like Netlify.

Note: To follow along, you can find the code in this repository on GitHub.

#javascript #html #web-development #programming #developer