Get started

$ npm install -g sssg
$ cd [work folder]
$ sssg try

See more detail for installation.

Overview

SSSG(Simple Static Site Generator) is a super-lightweight framework for composing static website with live preview.

Don't forget what you start creating. You create your website, not gulp tasks.

Many people creates similar gulp tasks everywhere for developing static website. By SSSG, you don't need to spend your time debugging gulp, instead you should crash your head for what you are truly creating.

The purposes for this framework are:

• to code less and proactive with Pug, Stylus, ES6 Javascript.
• to preview web page on coding. (WYSIWYG)
• to generate portable static web files.

I originally wanted prototyping tool for website and found some wireframing services. Those services are useful in that users don't need to code anything to outline site design.
However, as a programmer myself, I needed CODE to spec out web designs.
By the reason above, this framework is targeting coders who want to share prototype design based on text.

Simple = The rest is yours

SSSG does only simple tasks.

In summary, it

• compiles *.pug in source folder into *.html in destination folder.
• compiles main.styl in source folder into main.css in destination folder.
• compiles main.js in source folder into main.js in destination folder.
• copies image files and other misc files into destination folder.

This is so simple, isn't it? Actually SSSG is not a framework but kind of a convention of folder structure.
SSSG itself does just a few things. It relies on some useful npm modules such as gulp, babel and so on.

You even do not need SSSG and write your own task to generate static web site with gulp. However, to generate static website with gulp task, everyone will write similar codes everywhere.

I believe I could save many of your time by SSSG, which is a collection of common gulp tasks for static websites.

Believe my sense and you will spare your time handsomely.

While SSSG does just simple works, you can fully take advantages of pug/stylus/es6 features without concerns.

Pug is equipped with code templating system. If your website utilizes the same layout over several pages, you should split the pages into static components(sidebar, header, footer, etc) and variable contents.
Pug encourages you to do so.
Anyway, how you structure your website components is up to you.

Haven't you ever heard DRY coding? If no, you've got a chance to learn it. As well as Pug, Stylus makes you code less, by representing parent-child relationship as an indent. To fully speed up coding, you should try IDE that supports Stylus.
Additionally, Stylus also supports modular system. It can import any other stylus files. You can construct your own modular structure as clean as you feel comfortable.
Of course, you can write all style information only in main.styl.

Unlike Pug/Stylus, ES6 itself is not equipped with DRY syntax. But it has asynchronous system with Promise, native class support, and like Stylus, import statement.
With class and import feature, you can fully modularize your front-end business logic into reusable and structured framework.
Be notified that SSSG adopts babel, meaning you can use ReactJS/JSX to write SPA by custom .babelrc.
Get detail in Build Mechanism.

Try it out

Requirements

You need to have NodeJS 6.x installed on your computer.
Check out official installation manual for details.

* For Windows Users.
Global npm modules location %AppData%\npm must be added to PATH environment variable.

Install

After you installed these requirements, install SSSG globally on your computer.

$ npm install -g sssg

Let's try

$ cd [work folder]
$ sssg try

After dispatching the command above, browser will launch and open ./docs/index.html created in your working folder.

Let's edit ./src/html/index.pug and see what happens.

Tips

You can try customizing this page by the command below.

$ sssg try --readme

Debug

Debug your web design with element outlining by accessing http://localhost:3001

This debug feature comes from  BrowserSync