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]
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?”
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>
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
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)