Have ideas to improve npm?Join in the discussion! »

    kiss-ssg

    1.4.2 • Public • Published

    kiss-ssg

    Kiss Static Site Generator, is an open-source MVC html website builder (for node), that leverages handlebar templates to make quick, simple and blisteringly fast websites.

    Kiss-ssg uses handlebar partials and handlebar-layouts to help you make DRY static websites.

    Install with npm install kiss-ssg --save-dev, or just drop kiss-ssg.js somewhere.

    Usage

    kiss-ssg has 3 methods

    • .page()
    • .pages()
    • .scan()

    The simplest usage is to use .scan() to scan your 'pages directory' for *.hbs files and outputs them to the 'build folder'.

    const Kiss = require('kiss-ssg')
    const kiss = new Kiss()
    kiss.scan()
    kiss.generate()

    Note: kiss will generate the default folders for you when you first run the script. You can overwrite the folder locations bay passing a config to the kiss constructor.

    The default config options are:

    {
      dev: false,
      verbose: false,
      cleanBuild: true,
      folders: {
        src: './src',
        build: './public',
        assets: './src/assets',
        layouts: './src/layouts',
        pages: './src/pages',
        partials: './src/partials',
        models: './src/models',
        controllers: './src/controllers'
      }
    }

    Partials: Cam be a .hbs, a .html file or a .md file, Note: .md files are automatically parsed

    Option Default Purpose
    dev false Dev mode will start a local live-reload server and rebuild on file change.
    verbose false Enables additional output on the terminal, when set to true
    cleanBuild true Removed all files from the build dir before generating.
    folders see above A JSON object of alternative folder locations

    Note: All config settings are available in the view under "this.config"

    Assets

    Any static files you have in the assets directory will be copied to the build directory

    .page()

    Instead (in in conjunction) of using the .scan() method you can pass a model to the view using the .page() method. This allows you to name the view and pass a model to that view. The model is then available in the handlebar template under the model property, e.g. {{model.name}}

    const Kiss = require('kiss-ssg')
    const kiss = new Kiss({ dev: true })
    kiss
      .page({
        view: 'index.hbs',
        model: 'index.json',
        controller: 'index.js',
        title: 'My Page Title',
      })
      .generate()

    Note: The file locations of the models, views, and controllers are relative to the folder locations defined in the kiss configuration. Alternatively, instead of passing a file location you can pass a native object for that setting.

    Views: can se a .hbs file or a string Models: can be a .json file, a http api endpoint, or a JSON object Controllers: can be a .js file or a function that returns a page option JSON to be merged into the page options

    The options that you can pass to .page() & pages() are:

      {
        view: 'index.hbs',
        model: {}
        controller: ({model})=>{return {model: model}},
        title: 'Page Title',
        description: 'A description of the page (useful for meta data)'
        path: '/',
        slug: 'index',
      }

    These options are both used internally by kiss and are available in view.

    • view = A handlebars view.
    • model = A json object, the name of the json file relative to the models folder or a URL for an API endpoint.
    • controller = A function that returns a page options object - used for manipulating data in the model.
    • title = The page title
    • path = the folder path to the page
    • slug = the name of the file without the extension

    page and path create the url, i.e. /{path}/{slug}.html

    Note: If you don't pass a path or a slug they will be inferred from the view

    .pages()

    In addition to passing page options you can also pass a option mapper to act as a controllers to the .page() and .pages() methods:

    const Kiss = require('kiss-ssg')
    
    const kiss = new Kiss()
    kiss
      .page({
        title: 'My Team Page',
        view: 'about/index.hbs',
        model: 'departments.json',
        controller: ({ model }) => {
          return {
            model: model.sort(
              (a, b) => parseInt(a.sort_order) - parseInt(b.sort_order)
            ),
          }
        },
      })
      .generate()

    Controller

    The option mapper is really useful for mapping a slug from the model. This is great for dynamic slugs and a necessity when passing an array of models to the .pages() method to generate a series of pages.

    const Kiss = require('kiss-ssg')
    const kiss = new Kiss({ test: '123' })
    
    kiss
      .page({
        title: 'Page Title',
        view: 'index.hbs',
      })
      .pages({
        view: 'course.hbs',
        model: 'https://{my-cool-api}/courses',
        controller: ({ model }) => {
          return {
            slug: model.slug,
          }
        },
        path: 'courses',
      })
      .generate()

    Helpers

    Kiss-ssg registers a few useful helpers by default including:

    You can parse markdown like this:

    <div>
    {{#markdown}}
    # Heading
    
    > this is markdown
    
    foo bar baz
    {{/markdown}}
    
    or
    
    {{markdown model.introduction}}
    </div>

    If you want to take a peek at whats properties you have available to to in a handlebars file you can use this helper:

    {{{stringify this}}}

    Kiss exposes the handlebars object so you can register your own helpers, e.g.

    kiss.handlebars.registerHelper('stringify', function (obj) {
      return JSON.stringify(obj, null, 3)
    })

    Install

    npm i kiss-ssg

    DownloadsWeekly Downloads

    56

    Version

    1.4.2

    License

    Apache 2.0

    Unpacked Size

    95.5 kB

    Total Files

    68

    Last publish

    Collaborators

    • avatar