neener/persona-eco

Eco Persona

Buffy Persona

Installation

if you to play with yarn:

yarn

or if your more of an NPM girl...

npm install

Tools

metalsmith

• metalsmith-assets to copy webpack files
• metalsmith-markdownit to render markdown
• metalsmith-layouts to apply layouts

Webpack Middleware

webpack-dev-middleware... styles get included via require within page.js and extracted to a css file with ExtractTextPlugin

File Structure

Pattern	Description
./content/*	content files, mainly markdown
./layouts/*.html	metalsmith-layouts layout files
./src/config/paths.js	path configuration
./src/assets/css,js	page javascript and stylesheet files
./src/scripts/*.js	build process & dev environment scripts
./dist/assets/**/*	webpack output directory
./dist/site/**/*	metalsmith output directory

Server

Just run:

yarn dev

or if you like...

npm run dev

this will spawn http://localhost:3000 with browser-sync!

Live Reload

Browser sync spawns a basic webserver with the webpack-dev-middleware injected.

• browser-sync: Rebuilds metalsmith when content or layouts change.
• webpack-dev-middleware: Triggers browser-sync when webpack files like scripts or styles change
• nodemon: Restarts dev server when build scripts or config changes

Extras

1. The dev server supports the rs command to restart the server manually
2. The metalsmith-helpers.js in the scripts folder exports two metalsmith debugging plugins: A StatisticsPlugin for a general overview and a DebugPlugin
3. The metalsmith-layouts config contains a little helper for handlebars to output variable content. Usage: <pre>{{debug YOUR_VARIABLE}}</pre> (Hint: use this as variable to debug display the whole file metadata)
4. Check npm run for an overview of all available scripts.

Build

You can run a fresh page build via yarn build (or npm run build)

1. npm-scripts: Set DEBUG environment variable to metalsmith* to enable metalsmith debugging
2. npm-scripts: Clean up ./dist/* directories
3. webpack: Build javascript and stylesheet files via webpack
4. metalsmith: Copy webpack assets to site directory
5. metalsmith: Fingerprint webpack assets
6. metalsmith: Compile markdown files
7. metalsmith: Apply layouts
8. metalsmith: Show statistics

everything generated in ./dist/site/

Deploy

With yarn deploy (or npm run deploy) you can deploy to GitHub pages via gh-pages

Running yarn server (or npm run server) will spawn a production server so you can see how the deploy turned out!

woof!