maksidaindie / 11r

America's favorite Eleventy blog template.

11r

America's favorite Eleventy blog template.

View the demo 👀...

Features

• Eleventy for static site generation. See .eleventy.js.
• Nunjucks for templating.
• TailwindCSS for utility-first styling. See tailwind.config.js and src/styles/tailwind.css.
• markdown-it-anchor for generating anchors for headings.
• eleventy-plugin-nesting-toc for generating tables of contents from anchors. See this page for a demo.
• Prism syntax highlighting for code with copy button scripting included via clipboard.js. See src/styles/base.css for the theme; and src/scripts/copy.js, which is used by main.js.
• Rollup for bundling and compiling. See rollup.config.js.
• JavaScript-based privacy policy notice dismissal handling. See src/scripts/privacy-policy.js, which is used by main.js.
• Tags.
• Pagination.
• Deploy script for GitHub Pages via deploy.sh, using the gh-pages branch. Be sure to edit said script to work with your repository. Remember to also configure the repository appropriately.
• Exemplary Flexbox usage.
• SEO mostly done for you. Ensure you replace the data referenced in src/globals/site.json, including the images in public/.

Setup

1. git clone [email protected]:reeseschultz/11r.git
2. cd 11r && npm i
3. npm run dev to serve the site.
4. npm run build to build the site.
5. ./deploy.sh to deploy the site to GitHub Pages (includes build).

Tag Styling

Tags are styled in src/styles/tags.css. Coloring custom tags works as such:

...

.tag.beer {
  @apply bg-blue-500;
}

.tag.spirituality {
  @apply bg-indigo-500;
}

.tag.orcas {
  @apply bg-purple-500;
}

...

Credits

• The code copying script was adapted from https://codepen.io/wilbo/pen/xRVLOj by Wilbert Schepenaar.
• SEO handling was inspired from Skeleventy by Joseph Dyer.

License

All contributions to this repository are licensed under MIT.