nathanhass/puppy

Starter kit and delivery system for building static prototypes

{{ Your Next Great Prototype }}

{{ Your next great prototype description }}

📜 About

• Pages are authored in HTML or, optionally, Twig and live in the src/pages directory.
• Twig templates and partials live in src/templates.
• Site data files live in 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.
• Styles are authored with Sass and live in src/scss.
• Javascripts live in src/js. They are transipiled at build time with Babel so that they can take advantage of modern JS syntax
• Any files in the public directory are copied to the web root recursively at build time.
• Static assets are bundled at build time using Webpack.
• All source assets are pulled together with Gulp and used to generate a static site in the dist directory.

✨ Install

# Install Node & NPM with [NVM](https://github.com/nvm-sh/nvm)
nvm install

# Install project dependencies
npm install

👩‍💻 Usage

Development

# 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

Production

# Build for production
npm run build

# Serve locally using `serve`
npx serve dist

Thumbnail Previews

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

Deployment

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

Examples & Links

• Blog Post: Read about the project, its philosophy and goals
• Demo: View the Puppy Demo to see a sample project https://puppy-demo.upstatement.com/
• Tutorial: Follow the tutorial to get up and running
• View the default template: this is the starting place once you clone and run Puppy for the first time

📝 License

Copyright © 2020 Upstatement, LLC

---

A Puppy 🐶 powered project