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.
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.
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.
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.