DEV Community

MizuhoOkimoto
MizuhoOkimoto

Posted on • Updated on

Pajama SSG - Simple Static Site Generator with Node.js

Hello again!
This week, I'm working on my first open source project which is creating a Static Site Generator(SSG) with Node.js. This SSG can convert a .txt file into an .html file and it's very simple and easy. So I named it "Pajama-ssg"💤 because you can start creating web pages right away, even in your pajamas!

I would like to introduce some details below:

Features

  • Generate static HTML file(s) from .txt file(s)
  • Read .txt files inside folder(s) and generate HTML file(s)
  • All generated HTML files are stored in the ./dist folder
  • Convert the file name as the title in the head tag
  • Convert the first line in the .txt file as an h1 tag

Option Features

  • type -s or -stylesheet on the command line, it will be converted to a style tag link.
  • By installing Prettier, the converted HTML will be formatted

    $npm install --save-dev prettier

I wasn't sure how to format the html file, so my professor suggested API·Prettier or html parser!

Installation

  1. Clone the repo

    $git clone https://github.com/MizuhoOkimoto/pajama-ssg

  2. Install Node.js

    $npm install

  3. Redirect to project directory

    $cd <your-directory\pajama-ssg>

Usage

$node pajama-ssg -i <path>
$node pajama-ssg -input <path>
$node pajama-ssg -i <folder name>
$node pajama-ssg -input <path> -stylesheet <URL>
$node pajama-ssg -i <path> -s <URL>
Enter fullscreen mode Exit fullscreen mode

Help

Options:
-h, --help      Show help                            [boolean]
-v              version                              [boolean]
-i, --input     Folder/File input file location      [array] [required]
-s -stylesheet  Specify the name of the stylesheet 
Enter fullscreen mode Exit fullscreen mode

Example

Input file: test.txt

Type on the command line (I used water.css) :

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

./test.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.”

I was not surprised. Indeed, my only wonder was that he had not already been mixed up in this extraordinary case, which was the one topic of conversation through the length and breadth of England.
Enter fullscreen mode Exit fullscreen mode

Tada-!🧙🌟

./dist/test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link
      rel="stylesheet" type="text/css"
      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
    />
    <title>test</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>
    <p>“To Dartmoor; to King’s Pyland.”</p>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

 

License

This project is licensed under the MIT License - see the LICENSE.md file for details

✔️"Pajama-ssg" GitHub repo: https://github.com/MizuhoOkimoto/pajama-ssg

There are still some issues, so I will try to improve this project and make it better(Coding is never finished!).
If you have any ideas to improve it, please feel free to comment or make suggestions. Hope to hear from you :)

Discussion (0)