Project Structure
Recommended way to structure your project when using MMPilot static site generator.
When building with MMPilot, you can refer to the following project structure for placing your files. Note that this is just a recommended project structure and you can override this using the _mmpilot.yml
configuration file.
assets
This folder contains all your static assets such as images, favicon and anything else that you want to be copied directly (without modifying) to the output folder.
data
You can place site specific data in this folder. Both yml
as well as json
files are accpeted. You can also export modules from this folder which dynamically fetch data before building the site.
html
Your HTML source files go here. You can either write .pug
(PugJS) files or .md
(markdown) files and they will get compiled into html files. URL structre is maintained same as folder strucutre. Moreover if you have clean URLs turned on, a file like about.md
will produce a file at /public/about/index.html
html/_includes
You can add PUG mixins here and any other include files that you may want to include inside pug templates such as SVG icons, inline CSS or JavaScript.
html/_layouts
This folder contains layout files used for rendering the pug templaces. A default layout _layout-default.pug
is required here when you don't specify any layout for your HTML source files. Alternatively, if you do specify a layout inside the front matter of your HTML source file then a corresponding layout (_layout-<layoutname>.pug
) should be placed in this folder.
html/blog
This folder can be used to write blog posts. The folder contains a _blog.yml
file to specify the blog configuration. Posts can be nested inside subfolders, however they will always follow the path specified by the configuration file. You can create multiple blogs by creating different folders (with different names) and adding a blog configuration file inside the folder.
public
This is the default output folder of your project where the built files are copied to. Generally, this is the only folder which is deployed to your webserver and is set as root of your website.
scripts
Add your JavaScript files here. By default, no processing is done on the JavaScript files and they get directly copied into the output directory. However, you can easily modify this behaviour to transform your JavaScript files in the way you want for example with Babel.
styles
Your stylesheets are written in SCSS format and placed in this folder. This allows you to write modular CSS. You can also add additional frameworks like Bootstrap or mmcss in your project.
_mmpilot.yml
If you need to override the default project structure then they can be specifed in the _mmpilot.yml
which is the main configuration file for MMPilot. This config file can also contain data in YML format which gets passed onto the pug templates.
Additionally, this config file can specify redirected URLs. An equivalent HTML file will be generated automatically for given redirect paths using the meta http-equiv="refresh"
tag.
A sample configuration is show below which overrides most of the project's default path, setup redirects and specified additional data in production as well as development environment.
## data for building web project
includes: "web/html/_includes"
layouts: "web/html/_layouts"
html:
src: "web/html"
styles:
src: "web/css"
assets:
src: "web/assets"
scripts:
src: "web/js"
data: "web/data"
## redirected URLs
redirected:
- from: /feed
to: /feed.xml
## additional data for site available as site.{key} in pug templates
site:
url: "https://mmpilot.kunruchcreations.com/"
title: MMPilot
icon: mmpilot
github: "https://github.com/kunruch/mmpilot/"
twitter: "https://twitter.com/kanishkkunal"
analytics: "UA-37350394-13"
## overrides when built with -d or --development option
development:
site:
url: "http://localhost:3000/"
analytics: "" #don't count hits from localhost in analytics