JAMStack Static Site Generator template built with Eleventy and TailwindCSS.
Demo: https://11ty-starter-template.netlify.com/
- Build sites faster with the power of Eleventy, TailwindCSS and SCSS
- Laravel Mix (Webpack) to watch, concatenate and compile styles and scripts
- HTML minifier
- Tailwind Purge CSS for unused CSS
- SEO friendly pages
- Image lazyloading
- A simple blog with tags and featured images
common-tags
is used for shortcodesdate-fns
is used for date operations.- 404 page will display for browser-sync.
- Plugin for Code Syntax Highlight and RSS
- Author Info Card
- Supports both blog created and updated date
- Paginated Blog Page with responsive grid layout
- Page anchors and Table of Content support
- Support markdown/blockquote with information box
- Default config is used in tailwind.config.js
- Search feature using elasticlunr
- eleventy-plugin-inclusive-language plugin for linting the avoidable words in post
Node >=
v12.0.0
npm install
To start the development server (and Mix), run the npm run dev
on windows and npm run devl
on linux and iOS command in terminal. Eleventy has hot reloading baked in and will automatically watch your template files for changes. Mix will watch any changes to the JS and SCSS files.
The src
folder contains all the source. The dist
folder contains generated content. The src/site
folder contains all the templates, partials and content - which Eleventy will parse into HTML for us.
Within our site
folder, lives a _data
folder. Here you'll find a site.json
file - for general config stuff e.g site name, author, email, social media links etc.
You'll also find a navigation.json
file, which we use to loop over in our nav partial to generate our navigation. There's also a helpers.js
file, which just contains a simple environment helper.
Uncompiled SCSS and JS reside in the src/resources
folder - as mentioned above, Mix will be watching these folders for any changes (you should restart the server when creating new partials/folders).
In development mode, 11ty-starter-template will reference src/css/main.css
for it's stylesheet. This will be pretty chunky in file size (around 800KB!), due to the amount of Tailwind utility classes - but don't worry, 11ty-starter-template has you covered!
Type the npm run prod
command to minify scripts, styles and run Purgecss.
Purge will cross reference your templates/HTML with all those Tailwind classes and will remove any classes you haven't used - pretty cool huh?
11ty-starter-template will now reference main.min.css
as the new stylesheet (annoyingly, Mix also minifies main.css
as well - this bugs the hell out of me!).
-
Run
yarn add slugify markdown-it markdown-it-anchor markdown-it-table-of-contents -D
-
Add following code in
.eleventy.js
const slugify = require("slugify"); const markdownIt = require("markdown-it"); // Markdown function removeExtraText(s) { let newStr = String(s).replace(/New\ in\ v\d+\.\d+\.\d+/, ""); newStr = newStr.replace(/⚠️/g, ""); newStr = newStr.replace(/[?!]/g, ""); newStr = newStr.replace(/<[^>]*>/g, ""); return newStr; } function markdownItSlugify(s) { return slugify(removeExtraText(s), { lower: true, remove: /[:’'`,]/g }); } let markdownItAnchor = require("markdown-it-anchor"); let markdownItToc = require("markdown-it-table-of-contents"); let mdIt = markdownIt({ html: true, breaks: true, linkify: true, }) .use(markdownItAnchor, { permalink: true, slugify: markdownItSlugify, permalinkBefore: false, permalinkClass: "direct-link", permalinkSymbol: "#", level: [1, 2, 3, 4], }) .use(markdownItToc, { includeLevel: [2, 3], slugify: markdownItSlugify, format: function(heading) { return removeExtraText(heading); }, transformLink: function(link) { // remove backticks from markdown code return link.replace(/\%60/g, ""); }, }); mdIt.linkify.tlds(".io", false); eleventyConfig.setLibrary("md", mdIt);
-
Add following CSS
a[href].direct-link, a[href].direct-link:visited { @apply text-gray-500; visibility: hidden; } :focus > a[href].direct-link, :focus > a[href].direct-link:visited, :hover > a[href].direct-link, :hover > a[href].direct-link:visited, a[href].direct-link:focus, a[href].direct-link:focus:visited { visibility: visible; }
-
For table of content add
[[toc]]
in md file.
It won't be possible without skeleventy