krissrex / krex.no

A personal blog

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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:

Netlify Deploy button

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

About

A personal blog

License:Apache License 2.0


Languages

Language:JavaScript 43.8%Language:EJS 35.0%Language:CSS 17.0%Language:Shell 3.6%Language:HTML 0.6%