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.
- 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.
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.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
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:
npm run package(I recommend starting this one first)
npm run serve
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
- 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.