11ty-Site-Boilerplate

Common boilerplate for creating 11ty static sites at Ideas On Purpose.

Getting Started

• git clone https://github.com/ideasonpurpose/11ty-site-boilerplate.git . - downloads a copy of this repository into the current terminal location.
• npm install - install project dependencies, then
• npm run start - start the development environment at //localhost:8080
• npm run build - build the site for production delivery.

Edit the src directory.

After npm run build, the dist directory is ready to be published.

Structure

• 11ty - SSG configuration, plugins, shortcodes etc.
• src - source folder, edit files here.
  • data - variables store, preferably JSON.
  • includes - reusable Nunjucks templates.
  • layouts - base layout templates.
  • pages - site content storage.
  • assets - store website assets here:
    • favicon - all files generated by Real Favicon Generator go in here
    • fonts
    • img
    • js
    • pdf
    • sass
    • svg
    • video
• dist - distribution, ready for production.

Tooling

• 11ty - a simpler SSG
• Dart Sass - hot recompiled CSS
• require('modules') via Browserify
• JS hot recompile via Watchify
• Uglify and Babel for ES6 builds
• on the fly browser reload via built-in 11ty support for Browsersync
• image optimization, transformation and rescale via Sharp

Plugins

github

• @11ty/eleventy-img - Provides image transformations and the {% img %} shortcode for <picture>
• eleventy-svg - local plugin. Provides the {% svg %} shortcode for inline <svg>'s

Tests

github

• Lighthouse: npm run lighthouse runs a live URL check (extranet or client production URL) on all pages crawled from sitemap.xml. Outputs results to /reports/lighthouse
  • tests configuration such as the url to check and optional login credentials are pulled from config.js

Shortcodes

github

• Image: {% img 'folder/test.jpg', 'alt text' %} (file, alt text)
• SVG {% svg 'folder/test.svg', 'custom-class' %} (file, css class)
• Link {% link "/test/", "Relative link text Here" %} (url, link text)
• YouTube embed {% youtube "UsFCsRbYDyA", 40 %} (id, aspect ratio)
• Vimeo embed {% vimeo "336812660", 40 %} (id, aspect ratio)

Formatting Links

• External with Shortcode (preferred): {% link "http://example.com", "External link text Here" %}
• Relative with Shortcode (preferred): {% link "/test/", "Relative link text Here" %}
• Relative with Nunjucks Filter: <a href="{{ '/test/' | url }}">Test</a> - with / in front and after the path
• Absolute with Nunjucks Filter: <a href="{{ '/test/' | url | absurl }}">Test</a> - with / in front and after the path (used for favicons, canonical links etc.)

Using Images

• Image with Shortcode (recommended): {% img 'folder/test.jpg', 'alt text' %}
• SVG with Shortcode (recommended): {% svg 'folder/test.svg', 'custom-class' %}
• Simple image embed: <img src="{{ '/assets/img/folder/test.jpg' | url }}" />
• Simple SVG embed: <img src="{{ '/assets/img/folder/test.svg' | url }}" />

Favicons & Meta Information

• Generate favicons using Real Favicon Generator and drop all the files into src/assets/favicon/
• Global meta variables can be set in src/data/global.js
• Page specific meta variables can be set in the frontmatter section of each page
• site_name: "Company Name"
• meta_title: "Lorem ipsum"
• meta_description: "Dolor sit"
• meta_image: "amet.jpg"

Quirks

• While changing node versions (by nvm use for example), Sharp may fail te re-register. Fix with: npm rebuild