@amlopez333/mrhyde NPM

MrHyde

A simple implementation of a static page builder like Jekyll.

Installation

    npm install --save-dev @amlopez333/mrhyde

Usage

    mrhyde init
    mrhyde serve

Basic functionality is mapped to two commands init and serve. init will create a brand new project with config files and default layouts. serve builds your project and launches a dev server. It also watches the src/ directory for changes.

Project Structure

The project's structure generated by init is defined as follows:

    public/
    src/
        assets/
            css/
            sass/
        config/
            site.config.js -> this contains global information
            project.config.js -> this contains information relevant for build
        data/ -> here goes your JSON data files
        layouts/
        pages/
        partials/

The public/ folder is where the site is going to be built. This is the default name, you can otherwise specify a name for this directory in the project.config file. The src directory and it's subdirectories will contain all that's necessary in order to build your project. The assets folder will contain all your css/sass and aditional assets such as images. The config file contains all the relevant configuration for your site. Layouts contains the templates for your pages. These templates are built using EJS. The pages folder will contain all your content, and these files can be written in Markdown, plain HTML, or EJS. The partials folder will contain reusable components that you want to use across your pages, like your nav, or your head. They sort of resemble Server Side Includes.

If you use a different directory from public/, you will have to specify that directory to serve.

    mrhyde serve ./dist -> serves content in ./dist

Exposing data globally

You can define data in JSON files and expose these data globally to your site using site.config, as follows.

    const someData = require('../data/someData')   
    module.exports = {
        site: {
            title: "Statistics",
            description: "I got payed after doing someone's statistic homework and my life was never the same",
            someData
        }
    }

This is what the data directory is for.