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.

Clone this project and use it to create your own Eleventy blog.

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 npm

Getting started

Run the following command on your local environment:

git clone --depth=1 https://github.com/ixartz/Eleventy-Starter-Boilerplate.git my-project-name
cd my-project-name
npm install

Then, you can run locally in development mode with live reload:

npm run 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

You can easily configure Eleventy Starter Boilerplate. Please change the following file:

public/assets/images/logo.png: your blog logo
public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png and public/favicon-32x32.png: your blog favicon, you can generate from https://favicon.io/favicon-converter/
src/_data/site.json: your blog configuration
src/_includes/layouts: your blog HTML layout
src/assets/styles/main.css: your blog CSS file using Tailwind CSS

Deploy to production

You can see the results locally in production mode with:

npm run 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:

npm run 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

Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.

License

See LICENSE for more information.

Made with ♥ by Ixartz

MertSenel/Eleventy-Starter-Boilerplate