Skip to content
An opinionated starter package for Eleventy
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
site Filters (trailing slash) Nov 12, 2019
src Filters (trailing slash) Nov 12, 2019
.eleventy.js Filters (trailing slash) Nov 12, 2019
.gitignore initial public commit Oct 28, 2019
LICENSE
README.md updated readme Nov 12, 2019
netlify.toml
now.json initial public commit Oct 28, 2019
package-lock.json setup Inter as a more reasonable default font Nov 12, 2019
package.json setup Inter as a more reasonable default font Nov 12, 2019
postcss.config.js
purgecss.config.js initial public commit Oct 28, 2019
tailwind.config.js setup Inter as a more reasonable default font Nov 12, 2019
webpack.config.js

README.md

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.

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

  1. 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:

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

Production

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

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

You can’t perform that action at this time.