๐ Eleventy Starter Boilerplate is production-ready with SEO-friendly for quickly starting a blog. โก๏ธ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS and Netlify CMS (optional).
Clone this project and use it to create your own Eleventy blog. You can check a Eleventy templates demo.
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
- ๐ Include a FREE minimalist blog theme
- ๐ Netlify CMS (optional)
- Minimal code (HTML, CSS & JS). Add what you need
- SEO-friendly
- ๐ Production-ready
- Node.js and npm
Premium Themes (Eleventy Themes)
Blue Dark Eleventy Theme | Blue Eclatant Eleventy Theme |
---|---|
Blue Modern Eleventy Theme | Blue Minimalist Eleventy Theme |
---|---|
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.
Netlify CMS locally uses the .env file to determine the port to run on.
Run:
npx netlify-cms-proxy-server
Open http://localhost:8080/admin to see the local Netlify admin, updates in the CMS will change your content files.
.
โโโ 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
You can easily configure Eleventy Starter Boilerplate. Please change the following file:
public/assets/images/logo.png
: your blog logopublic/apple-touch-icon.png
,public/favicon.ico
,public/favicon-16x16.png
andpublic/favicon-32x32.png
: your blog favicon, you can generate from https://favicon.io/favicon-converter/src/_data/site.json
: your blog configurationsrc/_includes/layouts
: your blog HTML layoutsrc/assets/styles/main.css
: your blog CSS file using Tailwind CSS
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.
Clone this repository on own GitHub account and deploy to Netlify:
If you don't use Netlify, you can easily remove all Netlify related files:
public/admin
, the entier foldersrc/_includes/layouts/base.ejs
, the loaded scriptnetlify-identity-widget.js
and the inline scriptif (window.netlifyIdentity) { ...
netlify.toml
, the entire file
Everyone is welcome to contribute to this project. Feel free to open an issue if you have question or found a bug.
Licensed under the MIT License, Copyright ยฉ 2020
See LICENSE for more information.
Made with โฅ by CreativeDesignsGuru