This is a static site generator for pushred.co, built with JavaScript.

How It Works

Templates located in /server are named and organized as desired to appear in URLs — each corresponds to a page. Files named index or the same as their parent directory are served as / wherever they exist in the hierarchy. Content defined in a YAML file (managed outside of this repo) defines a rendering context. Some properties may be run through a Markdown renderer.

Here’s a diagram of how everything is organized:

├── .build
│   └── generated static site, Browsersync root
├── blocks
│   └── JS, CSS, and templates for each UI/design element
├── config
│   └── Configuration for the gulp workflow
├── gulpfile.js, helpers, and tasks
│   └── JavaScript modules that compose the gulp workflow
├── node_modules
│   └── third-party code installed from the npm registry and GitHub
└── server
    └── page templates and any static files

Dependencies

• node.js and npm generate new versions of the site and run a local preview server.
  These can be installed together with easy installers downloadable at nodejs.org.

• Install node.js dependencies with npm install.
  If this runs into any trouble, please try npm’s recommendations on fixing permissions.

Static Site

• gulp runs tasks written in JavaScript that generate versions of the site from various files in this repo and the specified content folder

• markdown-it parses text formatted with Markdown (following the CommonMark specification) and renders it to HTML

• Handlebars templates and it's (mostly) built-in helpers traverse the rendering context and render markup

Frontend

• autoprefixer prefixes newer CSS properties that aren’t quite evenly supported yet with their vendor prefixes as defined by caniuse.com

• browserify bundles all JavaScript into a single file, traversing all of the files and resolving any required modules defined in the CommonJS style.

• gulp-svgstore bundles SVG assets in the site and content folders for access as a sprite. gulp-svgmin cleans the files up with SVGO and replaces fill colors with currentColor for styling.

• postcss compiles all CSS into a single file. It also implements some features that don’t exist in CSS yet while outputting browser-friendly code.

Hosting

• gulp-s3-upload uploads any new assets found in the content folder to the pushred-files S3 bucket, accessible via CloudFront at http://files.pushred.co/*

• surge

Local Editing

$ gulp --content <path to folder>

This will:

• Generate a new version of the site with the specified content
• Launch a preview server for viewing it
• Open a browser with the preview URL

<path to folder> is an absolute path to the Dropbox content folder.
For example: ~/Dropbox/pushred.co/website.

The content path can also be defined in /config/content.json with the property path