Eleventy Starter Boilerplate
π Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. β‘οΈ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS.
Features
Production-ready in mind:
- π₯ 11ty for Static Site Generator
- π¨ Integrate with Tailwind CSS (with PurgeCSS, remove unused CSS)
- π PostCSS for processing Tailwind CSS
- β‘οΈ Lazy load images with lazysizes
- β¨ Compress image with Imagemin
- π Syntax Highlighting with Prism.js
- β Minify HTML & CSS with HTMLMinifier and cssnano
- βοΈ Linter with ESLint
- π Code Formatter with Prettier
- π¨ Live reload
- π¦ Module Bundler with Webpack
- π¦ Templating with EJS
- π€ SEO metadata and Open Graph tags
- βοΈ JSON-LD for richer indexing
- πΊ Sitemap.xml
β οΈ 404 page- π Pagination
- β Cache busting
- π― Maximize lighthouse score
Philosophy
- Minimal code (HTML, CSS & JS). Add what you need
- SEO-friendly
- π Production-ready
Requirements
- Node.js and yarn
Getting started
Run locally in development mode with live reload:
yarn dev
Open http://localhost:8080 with your favorite browser to see your blog.
Project structure
.
βββ public # Static files
β βββ assets
β βββ images # Images not needed by Webpack
βββ src
βββ _data # Eleventy data folder
βββ _includes
β βββ layouts # HTML layout files
βββ assets # Assets folder that needs to be processed by Webpack
β βββ images
β β βββ posts # Images used in your blog posts (will be compressed by Webpack)
β βββ styles # Your blog CSS files
βββ posts # Your blog posts
Customization
src/_includes/layouts
: your blog HTML layoutsrc/assets/styles/main.css
: your blog CSS file using Tailwind CSS
Deploy to production
You can see the results locally in production mode with:
yarn serve
The generated HTML and CSS files are minified. It will also removed unused CSS from Tailwind CSS.
You can create an optimized production build with:
yarn build
Now, your blog is ready to be deployed. All generated files are located at _site
folder, which you can deploy with any hosting service.
Deploy to Netlify
Clone this repository on own GitHub account and deploy to Netlify:
Contributions
Feel free to open an issue if you have question or found a bug.
License
Licensed under the Apache 2.0 License, Copyright Β© 2020
See LICENSE for more information.
Template made with β₯ by Ixartz