Mo Static

You want a static template? Because mo-static is how you get a static template.

Mo-static is a static project template with batteries included.

Features

• editorconfig
• convict
• Gulp
• Webpack (w/Babel)
• Standard
• SuitCSS (w/Autoprefixer)
• Stylelint (w/stylelint-config-suitcss)
• Nunjucks
• Browsersync
• UglifyJS
• CleanCSS
• html-minifier
• Critical
• Purify CSS
• Nightwatch Cucumber
• aXe Core

Usage

Create a new project from the mo-static template using cookiecutter:

brew install cookiecutter
cookiecutter gh:istrategylabs/mo-static

Follow the prompts to configure your project with the available options. When finished, cd into your project, installed npm dependencies with npm i, and quickly get started by running npm run dev. There is extended documentation for the project itself in the project README.md.

What to change

Favicon

Two favicon files are included and should be changed to be appropriate for the project. Follow the Favicon Cheat Sheet for best practices, and create at least these images:

| Sizes | Name | Purpose | |---|---|---|---|---| | 16x16 & 32x32 | favicon.ico | Default required by IE. Chrome and Safari may pick ico over png, sadly. | | 152x152 | favicon-152.png | General use iOS/Android icon, auto-downscaled by devices. |

You can use ImageMagick to generate .ico files for you which is detailed in the Helpful Tools section.

Structured Data

Structured Data tags are included to provide better data for search engine indexes. By default, the Logo's and Social Profile Links are included. Different tags will apply for every project, so they should be added when appropriate.

• Update the Logo's and Social Profile Links tags with the appropriate values.
• Add additional tags based on Google's Promote Your Content with Structured Data Markup guidelines.
• Use the Structured Data Testing Tool to verify the tags are set up correctly.
• Optionally, Ask Google to re-crawl your URLs after deploying to update your web page in Google's search indexes.

Facebook Open Graph Tags

Some Open Graph tags are included as defined by Facebook's Sharing Best Practices for Websites. If more tags apply, add them as defined by the Open Graph Protocol.

• Update the tags defined in the Use proper Open Graph tags with the appropriate values.
• Add an absolute URL to an image per the optimize images to generate great previews section, ideally 1200x630 pixels in size, but no smaller than 600x315 pixels and under 8MB.
• Use the Facebook URL Debugger to pre-cache the image and verify the tags are set up correctly.

Twitter Card Tags

Twitter Summary Card with Large Image tags are included to prominently display image content on tweets.

• Update the tags defined in the Reference section with the appropriate values.
• Add an absolute URL to an image per the twitter:image tag reference, at least 280x150 pixels in size and under 1MB.
• Use the Twitter Card Validator to pre-cache the image and verify the tags are set up correctly.

robots.txt

By default, the robots.txt file is configured allow search spiders. Depending on your project, you should change this to meet your needs, see robotstxt.org.

humans.txt

By default, the humans.txt file only lists ISL as a contributor. You should add project contributors to this list. Also, you should add any special thanks, and update the technology colophone to be appropriate for the project, see humanstxt.org.