- Notifications
You must be signed in to change notification settings - Fork4
Starter kit and delivery system for building static prototypes with Twig
License
Upstatement/puppy
Folders and files
Name | Name | Last commit message | Last commit date | |
---|---|---|---|---|
Repository files navigation
{{ Your next great prototype description }}
- 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 byPuppy. - Styles are authored withSass and live in
src/scss
. - Javascripts live in
src/js
. They are transipiled at build time withBabel so that they can take advantage ofmodern 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 usingWebpack.
- All source assets are pulled together withGulp and used to generate a static site in the
dist
directory.
# Install Node & NPM with [NVM](https://github.com/nvm-sh/nvm)nvm install# Install project dependenciesnpm install
# Start a local dev servernpm start# Check for JS/SCSS style violations prior to commitnpm run lint# Fix the fixable linter violationsnpm run lint:fix# Format code with Prettiernpm run format
# Build for productionnpm run build# Serve locally using `serve`npx serve dist
This repository includes some automatedtests that are not necessary when using Puppy as a starting template. To remove them, follow these steps:
- Remove ava from project dependencies
npm uninstall --save-dev ava
- Remove the
test
npm script - Remove
ava
config from package.json - Remove thetest step in the GitHub workflow
You can capture screenshots of your pages by setting thethumbnail
attribute toauto
in your page's front matter header:
thumbnail:auto
The next time you runnpm 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 thepublic/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 ofnpm run build
is a static site. You can drop the resultingdist
directory on any web server.
An excellent choice isNetlify. You can deploy your work to Netlify with theirCLI tool.
npm install netlify-cli -gnetlify initnetlify deploy
- Blog Post: Read aboutthe project, its philosophy and goals
- Demo: View thePuppy Demo to see a sample projecthttps://puppy-demo.upstatement.com/
- Tutorial: Follow thetutorial to get up and running
- View thedefault template: this is the starting place once you clone and run Puppy for the first time
Copyright © 2020 Upstatement, LLC
APuppy 🐶 powered project
About
Starter kit and delivery system for building static prototypes with Twig