The static site CMS is compiled using ‘roots static site generator’ and jade as its primary template engine. In this exercise, we use ‘Roots’ as the underlying compiler, however, you are free to use other compilerS such as Jekyll, Hexo, and Pelican.

Understanding File Structure:

Open the template folder using your favorite text editor then you will see familiar structure below.

Admin Folder

This is where you can add an ‘editable contents’ by defining new collections details. There are two files in this folder namely.

• config.yml
  

  You will basically need only to add/modify/remove the collection list. Other settings found in these documents needs not editing, unless otherwise you know what you’re doing.

• index.jade
  

  You can customize the preview of the entries in collection by adding a handlebar template.

Media folder and Public folder

Use the public_folder setting in config.yml to tell the CMS where the public folder is located in the sources. A typical Middleman setup would look like this:

media_folder: "source/uploads" # Media files will be stored in the repo under source/uploads
public_folder: "source" # CMS now knows 'source' is the public folder and will strip this from the path

Data

The default folder in storing .json files it can be modified in collections & app.coffee file.

Posts

The same with data folder, but this one is dedicated in storing all your posts file eg blogs, articles, & pages. It can also be nested if you wanted to be more particular in your files.

Views

Where all your pages and template are stored.

The Real Stuff

In order to do some changes in the template you must at least have basic knowledge in how jade template works. The best way to start is by reading some jade tutorials here.

Having learned basic jade templating you should be able to alter and do some heavy editing to the template. Once you are done with the changes you are now ready to update the live site. See next page for updating live site.