Skip to content
Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Eleventy Origin

Origin Logo

Origin is an opinionated starter template for Eleventy. It was assembled using many of the tools and libraries I use often on Rails projects.


It is preconfigured with the following:

  • Webpack - for managing all of the assets
  • Tailwind - baked in for utility-first CSS
  • Tailwind Forms - a better starting point for form elements that looks good out of the box.
  • Stimulus - as a lightweight javascript framework
  • PurgeCSS - removes all unused CSS classes
  • Turbolinks - used to make navigating from page to page more efficient. No need to host a router/etc.
  • Syntax Highlighting - preconfigured syntax highlights
  • SEO - Under src/utils/seo.js is the basic starting point for a SEO plugin (similar to Jekyll SEO). It pulls data from the site.json file, but can be overridden with a seo.json file when want settings for bots.
  • Excerpt short code - extract an excerpt from your frontmatter or document body
  • Easily deploy to Netlify & Now


There is no true default template. However, the default layout is configured to have both a sticky header and footer.


  1. npm install

Directory Structure


All of the CSS, JS and images are stored in the src directory, which is managed by Webpack.

  • controllers - any stimulus controllers will automatically be picked up from the folder
  • images - all of your site's images. These will be copied to dist/assets/images when you build
  • styles
    • styles.scss - imports all other style sheets & sets up Tailwind CSS
    • main.scss - some minor styles to provide basic margins for markdown content.
    • sytax.css - the default CSS for code
  • templates - for now, a single template which contains the JavaScript and CSS packaged by webpack.
  • utils - JavaScript used to help build the site (such as the SEO custom tag)


All content and templates in in the site directory. This is managed and processed by Eleventy.


Both Webpack and Eleventy push content and assets here.

Webpack and Eleventy

Webpack generates a main.js file and main.css file. Both saved to a file called site/layouts/pack.njk. This file ignored in Git and based on the template src/templates/pack.html.



You need to have both Webpack and Eleventy running.

npm run dev

The first time you run this on a clean dist folder you may see an error about a missing pack.njk file. There is a bit of a chicken and egg. This file is generated by webpack (with hashed file names in production) may not exist when both are running concurrently. Longer term, I think we can drop this necessity by using Netlify build plugins to add hashes to assets.

You can also run them separately:

  1. npm run package (I recommend starting this one first)
  2. npm run serve


This starter is also preconfigured to be easily deployable to Netlify and Now. If you need to deploy somewhere else:

  1. npm run build
  2. Point your webserver and/or deploy/etc the /dist folder.

Prior Art

  • Eleventy Base Blog - good starting point. Borrowed lots from here.
  • Jekyll-fun - the core workflow (especially Webpack) is based off of Joey's original project.
  • Skeleventy - A good boilerplate for Eleventy and Tailwind. Having something simple to refer back to was a big help.
  • Deventy - A minimal 11ty starting point for building static websites with modern tools.


Thanks to everyone who contributes to Eleventy, the numerous packages it depends on.


An opinionated starter package for Eleventy




No releases published


No packages published