Write a Simple Static Site Generator to Convert HTML hardcoded values into Dynamic Values

Write a Simple Static Site Generator to Convert HTML hardcoded values into Dynamic Values

Write a Simple Static Site Generator to Convert HTML hardcoded values into Dynamic Values. I was given a task where I had to convert an HTML website with a lot of hardcoded data. Read Input files - Modify the content of Input files - Copy the input files folder to the Output directory - Replace the modified content from step 2 and merge it with the output file that you created in step 3

Today, I am going to write about how we can create our own static site generator easily.

Recently, I was given a task where I had to convert an HTML website with a lot of hardcoded data. I was asked to remove it and use a data source that can be contentful or prismatic.

Writing a generator that takes your code, changes the content as a pre-requirement, and outputs the project is quite easy thanks to Node.js and file system (fs).

But to make it very easy, I have come up with a solution that is digestible for every person. So here are the steps that are required.

Steps

  1. Read Input files
  2. Modify the content of Input files
  3. Copy the input files folder to the Output directory
  4. Replace the modified content from step 2 and merge it with the output file that you created in step 3

Four steps that can do wonders but are not that easy. Read input files means we are going to have a folder filled with all kinds of junk. We will only be targeting just the HTML files. We are going to find all the HTML in the root of the source folder or nested regardless.

The next step will be to modify the content of the input files. To modify the content of the input files, we will have to use some kind of templating engine that Node.js can parse, and which, in our case, is going to be handlebars, considering its popularity and support and stars on GitHub.

The next step is pretty straightforward. You will just have to copy and paste all the files from src to output (src -> output), and we will do that with the help of the files system provided by Node.js.

The final step will include merging a complied modified code and replacing it in the output files. And to replace it in the output files, we need to know the exact location of the files that needed to be replaced.

programming javascript nodejs coding

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Principles of Functional Programming in JavaScript That Will Make Your Coding Life Easier

Who else loves to write side-effects-free functions? I think we, as programmers, all do. Today, in this story, I will walk you through the basic principles of functional programming that will make your coding life easier.

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript

4 Ways You Can Get Rid of Dirty Side Effects for Cleaner Code in JavaScript. Bugs are born in many ways. Creating side effects is one of them. Some people say side effects are evil, some say they’re not.

Who Else Wants to Write Clean JavaScript Code?

Who Else Wants to Write Clean JavaScript Code? 7 Tips to Make Your Coworkers Fall in Love With Your Code.

Code Formatting with Prettier in Visual Studio Code

Formatting code consistently is a pain, especially when working on a team. The beauty of modern-day web development is that the tooling has gotten so much better! In this article, we will look at setting up Prettier to automatically format your code in Visual Studio Code.

Top 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript

Don’t waste time writing long code while you can make it short, yet clearer and easier to read. In this Javascript tutorial, we'll discuss 15 Simple Coding Techniques to Get Your Tasks Done with Shorter Code in JavaScript