Development

Initial Setup

1. Clone the repository in Terminal
2. Run nvm install to install the correct version of Node
3. Run npm install to install all Node dependencies

Development workflow

1. Change to the project directory in Terminal
2. Run nvm use to ensure you're using the correct version of Node
3. Run npm start to start a local development server and resume building

Type Control-C to shut down the dev server and get back to your life.

Creating pages

Pages live in the ./src/pages/ directory.

There's a 1:1 correlation between the file path in ./src/pages and their URL:

touch src/pages/about.html
open http://localhost:3000/about.html

Want pretty permalinks? Use directories instead.

mkdir src/pages/about
touch src/pages/about/index.html
open http://localhost:3000/about/

Magic ✨!

The starter project comes with one page -- the prototype index -- which renders a list of all pages. If you don't need it or want to build your own, feel free to remove it.

Using Twig

Pages can be authored in Twig. They'll be compiled to HTML when you run npm start or npm run build thanks to Gulp and Twig.js.

The ./src/templates directory is aliased to the puppy namespace, giving you a clean way to separate your pages from your base layouts and partials:

{# Will extend the template at `./src/templates/layouts/base.twig` #}
{% extends "@puppy/layouts/base.twig" %}

{# Will load the partial at `./src/templates/partials/header.twig` #}
{% include "@puppy/partials/header.twig" %}

Front matter headers

You can annotate your HTML or Twig pages with YAML front matter headers (as popularized by Jekyll) if you like:

---
title: About
tags:
- Awesome
- Amazing
---

Attributes defined here will be exposed to Twig via the page variable:

<h1>{{ page.title }}</h1>
<ul>
  {{ for tag in page.tags }}
  <li>{{ tag }}</li>
</ul>

The default index will use the title attribute to label your page.

Author styles

• Sass
• PostCSS
• Referencing static assets
• Modernizr

Author Javascript

• Babel
• Third party dependencies

Linting your code

• eslint
• stylelint

Advanced: Modifying build pipeline

• Gulp
• Webpack