11ty

11ty is an excellent minimalists’ static site generator. The @enhance/eleventy-plugin is a cool way to build completely static websites with basic HTML, and pure custom elements.

You can deploy static sites to any place that supports HTML, CSS, and JavaScript which is every cloud vendor but the most popular choices for completely static sites are GitHub Pages, and Netlify.

Quickstart

Create a project.

mkdir -p myproject
cd myproject
npm init -y
npm install @11ty/eleventy @enhance/eleventy-plugin

Add some handy shortcuts to scripts in package.json.

{
  "scripts": {
    "start": "npx @11ty/eleventy --serve"
  }
}

Create the .eleventy.js config file:

let plugin = require('@enhance/eleventy-plugin')

module.exports = function (eleventyConfig) {
  let extension = 'html'
  eleventyConfig.addTemplateFormats(extension)
  eleventyConfig.addExtension(extension, plugin)
}

Create index.html, and write some HTML!

<my-header></my-header>
<strong>powerful html here</strong>
<my-footer></my-footer>

Create some custom elements in a folder named elements.

export default function header ({ html }) {
  return html`<header> my cool header</header>`
}
export default function footer ({ html, state }) {
  return html`
    <footer>
      <p>footer here</p>
      <pre>${JSON.stringify(state, null, 2)}</pre>
    </footer>
  `
}

Run npm start, and preview at http://localhost:8080.

Bonus: template with data

Add index.json with some default data, and preview result in the footer.

{
  "initialState": { "custom": "data", "is": "here" }
}

Community Resources

GitHub
Visit Enhance on GitHub.
Discord
Join our Discord server to chat about development and get help from the community.