11ty Blog Starter

screenshot of 11ty Blog Starter
eleventy
tailwind

11ty v1.0, Tailwind v3. Works when JS is disabled

Overview:

This product is a blog starter template that can be hosted on platforms like Netlify, Surge, Firebase hosting, etc. It is designed to be a static site generated using Eleventy and styled with Tailwind CSS v2.0. The blog has a dark mode option and aims to still run without JavaScript. It has features like custom excerpts, a filter for read time, a 404 page, tags page, sitemap and robots.txt, image handling using shortcodes, draft posts functionality, ESLint integration, and a bash script to create new posts. The blog can be run locally on localhost:8080 after setting it up.

Features:

  • Static Site Gen - Eleventy: The blog is generated as a static site using Eleventy.
  • Tailwind CSS v2.0 / Tailwind Typography / Dark Mode: The blog is styled using Tailwind CSS v2.0 and includes a dark mode option.
  • Custom Excerpts: Excerpts for blog posts can be created using the <!-- excerpt --> tag.
  • Custom ReadTime Filter: A filter is available to calculate and display the estimated read time for each blog post.
  • 404 Page: The blog has a custom 404 page.
  • Tags Page: There is a separate page to view posts related to specific tags. All available tags are listed as buttons on the tags page.
  • Sitemap and Robots.txt: The blog includes a sitemap and robots.txt file for search engine optimization.
  • Image Handling: An image handling shortcode is available to add images to blog posts. Images can be stored in src/assets/img/posts and added using the asset_img shortcode.
  • Draft Posts: The blog supports the creation of draft posts using the published front matter.
  • Posts Pagination: The index.html page includes pagination for blog posts.
  • Change Size Front Matter Variable: The size front matter variable can be changed for individual blog posts.
  • ESLint: ESLint is integrated into the blog for code linting.
  • Bash Script to Create New Post: A bash script is provided to easily create new blog posts.
  • Running Locally: The blog can be run locally on localhost:8080.
eleventy
Eleventy

11ty is a static site generator that allows developers to build fast, modern websites using HTML, Markdown, and other templating languages, without the need for a complex build system.

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

postcss
Postcss

PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.