Luke N's Blog

Luke N's Blog

Say Hello to MINI - A Nodejs Static Site Generator.

My first assignment from the open-source course is to build a command-line tool that generates HTML pages from text files.

After a week of head-scratching, constant Googling, and never-ending frustration, I managed to come up with MINI - a simple static site generator.

This article will give you an overview of its features, installation, and instruction to help everyone get started right away.

MINI's features include:

  • Automatically parse title from input. (A title is defined by being the first line followed by 2 blank lines)
  • All generated HTML files will be placed into a ./dist folder
  • All generated HTML files comes with Water.css by default.
  • Users can specify a URL to a CSS stylesheet.

Installing the tool:

  1. Make sure you have Nodejs installed on your machine.
  2. Locate the GitHub repo and clone the project to your prefer directory
  3. Inside your directory, open any CLI and install the tool using npm install

That's it! Now you are ready to use MINI.

Basic usage:

node mini-ssg.js -i ./someFolder/file.txt

For more options and examples, refers to the GitHub repo.

After running the command:

file.txt

Silver Blaze


I am afraid, Watson, that I shall have to go,” said Holmes, as we
sat down together to our breakfast one morning.

“Go! Where to?”

“To Dartmoor; to King’s Pyland.”

will be converted to

file.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <title>Silver Blaze</title>
        <meta charset="utf-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
        />
    </head>
    <body>
        <h1>Silver Blaze</h1>
        <p>
            I am afraid, Watson, that I shall have to go,” said Holmes, as we
            sat down together to our breakfast one morning.
        </p>
        <p>“Go! Where to?”</p>
        <p>“To Dartmoor; to King’s Pyland.”</p>
    </body>
</html>

Here's how it should look!

Conclusion:

There are still many more features that I want to add, and there is always room for improvement. If anyone is interested in this project, feel free to check out the GitHub repo. Any contribution is very much appreciated!

Happy coding! 💻

 
Share this