Skip to content

Latest commit

 

History

History
91 lines (69 loc) · 4.39 KB

README.md

File metadata and controls

91 lines (69 loc) · 4.39 KB

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:
  • 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