Eleventy Origin

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

Features

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

UI

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

Setup

npm install

Directory Structure

`src`

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)

`site`

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

`dist`

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.

Usage

Development

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:

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

Production

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

npm run build
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

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

jamesgrubb / tailwindfonts