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.
- Webpack (w/Babel)
- SuitCSS (w/Autoprefixer)
- Stylelint (w/stylelint-config-suitcss)
- Purify CSS
- Nightwatch Cucumber
- aXe Core
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
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
| 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 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
- 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:imagetag 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.
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.
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.