DEV Community

Cover image for Node.js static site generator (Release 0.1.0)
Kevan Y
Kevan Y

Posted on • Updated on

Node.js static site generator (Release 0.1.0)

For the first assignment in OSD600, we have to create a CLI static site generator using any language of ours choice. I went with node.js, because I need some projects in my GitHub in node.js.
Throughout this lab, I learned how to uses some new packages such as yargs, chalk, figlet.
The concept seems to be simple to implement, but there is a lot of challenge to go through implementing all the core and optional features.
One of the challenges was to learn how to use async/await. It was a bit tricky but playing with the code and watching some tutorials helped me a lot.
The second most challenging was to write a function to get all the .txt files names recursively.

Installation

  • clone the repo
  • open the folder
  • run npm i
  • run npm install -g .

Usage

ssg --input <path>

ssg --input <path> --output <path>

ssg --input <path> --output <path> --stylesheet <URL>

ssg -i <path> -o <path> -s <URL>
Enter fullscreen mode Exit fullscreen mode

Command option / feature

-i or --input accept a .txt file or folder to read data from. If it is a folder it supports deep tree of files and folders. (Required)

-o or --output accept an existing directory to output generated html to. If option not specified, it will create and output files to dist folder. (Optional)

-s or --stylesheet accept a CSS URL. If option not specified, it will uses default stylesheet. (Optional).

-h or --help shows list of option, usage, and examples.

-v or --version shows the version of the CLI

If the first line of the .txt is followed by two blank lines, it will populate the <title>...</title> and <h1>...</h1>.

Generate a menu page index.html which has relative links to each of the generated HTML files.

New paragraph is separated by a line.

Example

Input file test.txt

This is the title


Hello world,
2021

This is a static site

I love programing
Enter fullscreen mode Exit fullscreen mode

Command run

ssg -i test.txt -s 'https://cdn.jsdelivr.net/npm/water.css@2/out/water.css'
Enter fullscreen mode Exit fullscreen mode

Output file

dist/test.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Home</title>
    <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>Home menu</h1>
    <h2>Summary</h2>
    <ul>
        <li><a href='test.html'>test</a></li>
    </ul>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

dist/index.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>This is the title</title>
    <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>This is the title</h1>
    <p>Hello world,2021</p>
    <p>This is a static site</p>
    <p>I love programing</p>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Project Links

Sample of file generated: https://text-ssg.vercel.app/
GitHub Repo: https://github.com/Kevan-Y/text-ssg

Discussion (0)