Jellybean
From one small program, you can create an entire website. Jellybean is a static site generator created in JavaScript and Node.js that lets you easily convert your text/markdown files into HTML.
Main Features
- A single text/markdown file or folder containing multiple files can be converted into HTML files.
- The title of the page, which is the first line of a file if followed by two blank lines, will be automatically generated.
- Generated files are stored in a dist folder and style is provided by a style.css file. The default language is set to en-CA. Custom folders, styles, and languages can be specified using optional flags.
- Markdown files will be parsed for markdown syntax in order to generate the proper HTML.
Installation
- Download Node.js (version 14+)
- Run the following command
npm install -g jellybeanRunning the Program
Path to an existing text/markdown file
jellybean --input <file>
jellybean -i <file>Path to an existing folder containing multiple files
jellybean --input <folder>
jellybean -i <folder>The input path to either an existing text/markdown file or a folder containing multiple files is required. Please specify the input path using the --input/-i flag or by adding it as "input" in a JSON config file.
The contents of each file will be converted into an HTML file with the same name and stored in the output directory specified or in the dist directory if no output directory is specified. If a folder contains non-text/markdown files, these files will not be converted into HTML.
Optional Flags
| Flag | Description |
|---|---|
--output/-o <folder> |
Path to an output directory where generated pages will be stored |
--stylesheet/-s <URL> |
Stylesheet URL to be used to style the generated pages |
--lang <string> |
The lang attribute for the <html> tag of each page, describes the language of a page, set to 'en-CA' by default |
JSON Config File
Instead of passing options through the command line, a path to a JSON config file can be provided. This JSON file needs to contain at least "input" with the path to the file or folder.
| Flag | Description |
|---|---|
--config/-c <file.json> |
Path to a JSON config file containing options |
Example JSON file
{
"input": "Sherlock-Holmes-Selected-Stories",
"output": "./web",
"stylesheet": "https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
}Getting Help
jellybean --help
jellybean -hGetting the Version
jellybean --version
jellybean -vExample Using a File
jellybean -i Sherlock-Holmes-Selected-Stories/The Adventure of the Six Napoleans.txt -l en-US -o customoutput -s https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.cssOriginal File:
Sherlock-Holmes-Selected-Stories/The Adventure of the Six Napoleans.txt
THE ADVENTURE OF THE SIX NAPOLEONS
It was no very unusual thing for Mr. Lestrade, of Scotland Yard,
to look in upon us of an evening, and his visits were welcome to
Sherlock Holmes, for they enabled him to keep in touch with all
that was going on at the police headquarters. In return for the
news which Lestrade would bring, Holmes was always ready to
listen with attention to the details of any case upon which the
detective was engaged, and was able occasionally, without any
active interference, to give some hint or suggestion drawn from
his own vast knowledge and experience.Generated File:
customoutput/The Adventure of the Six Napoleans.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/tufte-css/1.8.0/tufte.min.css"
/>
<meta charset="utf-8" />
<title>THE ADVENTURE OF THE SIX NAPOLEONS</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div>
<ul>
<li><a href="./index.html">Home</a></li>
<li>
<a href="./The Adventure of the Six Napoleans.html"
>The Adventure of the Six Napoleans</a
>
</li>
</ul>
</div>
<h1>THE ADVENTURE OF THE SIX NAPOLEONS</h1>
<p>
It was no very unusual thing for Mr. Lestrade, of Scotland Yard, to
look in upon us of an evening, and his visits were welcome to
Sherlock Holmes, for they enabled him to keep in touch with all that
was going on at the police headquarters. In return for the news
which Lestrade would bring, Holmes was always ready to listen with
attention to the details of any case upon which the detective was
engaged, and was able occasionally, without any active interference,
to give some hint or suggestion drawn from his own vast knowledge
and experience.
</p>
</body>
</html>Example Using a Folder
node src/index.js -i Sherlock-Holmes-Selected-StoriesIn the Sherlock-Holmes-Selected-Stories folder, if you have the files:
- notatextfile.js
- Silver Blaze.txt
- The Adventure of the Six Napoleans.txt
In the dist folder, the following files will be generated:
- index.html
- Silver Blaze.html
- style.css
- The Adventure of the Six Napoleons.html
Additional Support for Markdown Files
For markdown files (.md), the program will parse markdown to HTML tags. Full markdown support is provided through markdown-it.
Example Using a Markdown File
Original File:
README Excerpt.md
# Jellybean
From one _small_ program, you can create an **entire** website. Jellybean is a static site generator created in Node.js that lets you easily convert your text/markdown files into HTML.
## More Info
For more information, please visit [the GitHub repository](https://github.com/lyu4321/jellybean).Generated File:
README Excerpt.html
<!DOCTYPE html>
<html lang="en-CA">
<head>
<link rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="nav">
<div>
<ul>
<li><a href="./index.html">Home</a></li>
<li><a href="./test.html">test</a></li>
</ul>
</div>
</div>
<h1></h1>
<h1>Jellybean</h1>
<p>
From one <em>small</em> program, you can create an
<strong>entire</strong> website. Jellybean is a static site
generator created in Node.js that lets you easily convert your
text/markdown files into HTML.
</p>
<h2>More Info</h2>
<p>
For more information, please visit
<a href="https://github.com/lyu4321/jellybean"
>the GitHub repository</a
>.
</p>
</body>
</html>Contributing
Please see the Contributing Docs for more information.
Live Demo
https://lyu4321.github.io/jellybean