MetalSmith Starter

Check out the demo page.

Table of Contents

• Demo
• Features
• Dependencies
• Setup
• Development
• Deploy
• Directory Structure

Features

• SASS Support (just include your files in src/styles/main.scss)
• Watch file changes and rebuild ($ yarn dev)
• Serve build directory ($ yarn serve)
• Favicon example
• Manifest.json example
• Easy-to-use deploy script

Dependencies

To build and develop the project you will need the following dependencies:

• Node.js
• NPM
• Yarn (Optional)

Setup

I am using yarn throughout the docs, although you can safely use npm instead.

# Install dependencies
$ yarn

# Build site
$ yarn build

Development

# Build project
$ yarn build

# Serve built project (View on http://localhost:8080)
$ yarn serve

# Watch files for changes (and re-build on any change)
$ yarn dev

# Clean build directory
$ yarn run clean

Deploy

Deploy is made easy with ANSIBLE.

You need to install ANSIBLE first:

# OS X
$ brew install ansible

# Ubuntu
$ sudo apt-add-repository ppa:ansible/ansible
$ sudo apt-get update
$ sudo apt-get install ansible

Customise the following files first:

"ansible/hosts"
Change leventebalogh.com to your hostname, and also change the ansible_user to the user you use on your machine. Make sure you have the proper SSH keys loaded to login to the host.

[vps]
leventebalogh.com ansible_user=www

"ansible/playbook"
No need to touch this one.

"ansible/roles/deploy/tasks/main.yml"
Change ~/metalsmith to the directory where you would like to host the build output from.

- name: Copy build output
  synchronize:
    src: ../../../build
    dest: ~/metalsmith

Run to Deploy:

$ ./deploy.sh

Directory Structure

+- ansible/ # ANSIBLE config files
+- build/ # The static build output
+- gulp/ # Gulp task files
+- src/
    +- content/ # All the static content written in Markdown
    +- layouts/ # Layout components in Handlebars templates
    +- styles/ # Styling in SASS files
+- config.js # Going to hold project specific configuration
+- deploy.sh # Executable script to easily deploy the project