DEV Community

Cover image for Dodo Static Site Generator (v0.1)
Francesco Menghi
Francesco Menghi

Posted on • Updated on

Dodo Static Site Generator (v0.1)

For release 0.1 of OSD600, the goal was to create a Static Site Generator (SSG). An SSG can be a really useful tool to avoid having to manually write HTML code since it can be automatically generated from a simple txt file.

To complete this little project I used NodeJS and Yargs. Yargs is a Node library that allows to parse arguments to a command line interface. It was my first time using it and I found it pretty intuitive (I also like its pirate theme!)

I am relatively new to NodeJS so I found myself going through the docs a lot to learn how to work with files.

The tool is called static-dodo and is pretty simple to use. Here is the --help menu:

Usage: static-dodo [options]

Options:
  -i, --input       Load input file or directory  [required]
  -s, --stylesheet  Provide stylesheet
  -h, --help        Show help                      [boolean]
  -v, --version     Show version number            [boolean]
Enter fullscreen mode Exit fullscreen mode

Example

Here is a sample text named Silver Blaze.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?”
Enter fullscreen mode Exit fullscreen mode

And here is the output after running the command ./static-dodo -i
Silver\ Blaze.txt
:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Silver Blaze</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</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>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Additional Features

The first line of the text is used as a h1 header and the output file is saved into a new dist folder.

Another feature I have added is the ability to add a CSS stylesheet using the option -s or -stylesheet.

For example:

./static-dodo -i Silver\ Blaze.txt -s https://cdn.jsdelivr.net/npm/water.css@2/out/water.css
Enter fullscreen mode Exit fullscreen mode

will create the following HTML page with beautiful CSS.

To write this program it took me longer that I expected but I am happy with the results and I know things can always be improved. The code can be viewed on Github and I welcome any suggestions for improvements!

Top comments (0)