YASSGen - Yet Another Static Site Generator

November 05, 2016

---

This time I decided to go though a bit more in detail how this blog's gulp.js build tool works. I named the tool as YASSGen and created own repository for it.

The repository is a working version with the default directory structure and some example templates and a post. By copying the repository it is fairly easy to get it up and running to build your own blog. I'm using the same tool, except yassgen version has been stripped from AMP build for now. I'll add it later into the mix, but if you want it now, an example how to do it can be found in my blog's gulpfile.js.

Installing

The magic of YASSGen is in gulpfile.js and package.json. For these things to run you need Node.js to be installed and gulp.js client.

1. Install Node
2. Install gulp.js client globally:

    npm install -g gulp-cli

3. Copy YASSGen from github. You can use git clone or .zip downloads.
4. Go to the folder YASSGen
5. Install YASSGen by running this command in its directory:

    npm install

Using YASSGen

After installing YASSGen it is good to get familiar how to use and configure YASSGen. All the configurations can be found from the root folder's gulpfile.js.

Directory structure

Config object defines the default directory structure that YASSGen uses:

var config = {
  build: 'build',
  assets: 'assets/**/*',
  styles: './styles/index.scss',
  sass: './styles/**/*.scss',
  index: './src/views/index.html',
  posts: {
    markdown: './src/posts/**.md',
    template: './src/views/post.html',
    build: './build/blog'
  }
};

1. The build is generated into build folder
2. Assets are copied as those are from assets folder
3. Styles are build by linking only styles/index.scss file, which should link to the other style files by importing.
4. Index is the main page of your site which doens't include separate markdown content. In this build configuration it is found under src/views/index.html. Blog posts list is generated with this template.
5. Posts have markdown content, template and build directory defined. In the default build markdowns are found under src/posts folder, the template that is used is src/views/post.html and the results are pointed to build/blog folder.

The default directory structure:

assets/
  *.html
  *.png
  *.js
build/
  <build result>
src/
  posts/
    *.md
  views/
    index.html
    *.html
styles/
  index.scss
  *.scss
gulpfile.js
package.json

Site configuration

In addition to the directory structure there is site object that should be configured.

var site = {
  URL: "http://mej.fi/",
  blogPath: 'blog/',
  posts: []
};

You should define the site URL as the main address of your website. blogPath should be the same path than what is used in config for building posts. the posts variable here is just to init a array for all the posts build for the site.

Building

Here are the main commands to use when building the website. More can be found from gulpfile.js.

    gulp          - runs the default build command
    gulp clean    - removes the build folder
    gulp watch    - runs a webserver for static content on http://localhost:3000

By default the build result of your website can be found from build folder. You should move all the content of that folder to where ever you host your website.