Starter kit and delivery system for building static prototypes with Twig
{{ Your next great prototype description }}
src/pages
directory.src/templates
.src/data
. Drop any .json
, .yml
, or .js
file exporting a function into this directory and access the resulting data in Twig templates using {{ site.data['path/to/file.ext'] }}
. Powered by Puppy.src/scss
.src/js
. They are transipiled at build time with Babel so that they can take advantage of modern JS syntax
public
directory are copied to the web root recursively at build time.dist
directory.# Install Node & NPM with [NVM](https://github.com/nvm-sh/nvm)
nvm install
# Install project dependencies
npm install
# Start a local dev server
npm start
# Check for JS/SCSS style violations prior to commit
npm run lint
# Fix the fixable linter violations
npm run lint:fix
# Format code with Prettier
npm run format
# Build for production
npm run build
# Serve locally using `serve`
npx serve dist
This repository includes some automated tests that are not necessary when using Puppy as a starting template. To remove them, follow these steps:
npm uninstall --save-dev ava
test
npm script
ava
config from package.json
You can capture screenshots of your pages by setting the thumbnail
attribute to auto
in your page's front matter header:
thumbnail: auto
The next time you run npm run build
a screenshot will be generated for that page and displayed in the prototype index.
If the automated screenshots aren't cutting it, you can provide your own by dropping an image into the public/thumbnails
directory and referencing its name in your page's front matter header:
Page: src/pages/example.html
Thumbnail: public/screenshots/example.png
Front Matter:
thumbnail: example.png
The output of npm run build
is a static site. You can drop the resulting dist
directory on any web server.
An excellent choice is Netlify. You can deploy your work to Netlify with their CLI tool.
npm install netlify-cli -g
netlify init
netlify deploy
Copyright © 2020 Upstatement, LLC
A Puppy 🐶 powered project