11ty logo

I finally got around to deploying this site on netlify.

I'm hoping to move everything over in the future and use this site as my main blogging site.

Features #

I used eleventy-base-blog as a start which has a large number of features already.

11ty/eleventy-base-blog - Github

I have added:

Info on how development has gone so far can be seen in blog post

📝Blog Using Eleventy (June 10, 2023)

I still have a todo list of new features I am looking to add.

Frontmatter #

  title: -required-
  date: -required-
  draft: -required-
  author: -required-
  tags: -optional-
  image: -optional-
  imgAuthor: -optional-
  imgAuthorURL: -optional-
  permalink: -optional-

Post permalinks are generated using title & date fields.

Resulting in /YYYY/MM/DD/slugify-title

Project Structure #

This is the base folder structure.

    ├── netlify
    │   └── cache-plugin
    ├── public
    │   ├── img
    │   ├── media
    │   └── users
    └── src
        ├── _assets
        ├── atom
        ├── _data
        ├── _includes
        ├── _media
        ├── pages
        ├── posts
        ├── _scripts
        ├── sitemap
        └── _styles

Markdown files for posts & pages are located in src/.
Images for posts are kept in src/_media/images/.

Site generation outputs to dist/.

Asset Bundling & Processing #

The site uses esbuild to optimize & bundle clientside javascript.
The site uses postcss to optimize & minify css.

esbuild #

  • input: src/_scripts/
  • output: src/_assets/js/

Javascript is inserted inline.

postcss #

  • input: src/_styles/
  • output: src/_assets/css/

Styles are inserted inline.

Image Optimization #

Image optimization is automatic in markdown & image shortcode is used in templates.

  • input: src/_media/images/
  • output: dist/img/

The site is setup to output optimized webp images as well as the original input format.

📝Markdown Image Optimization In Eleventy
📝Image Optimization In Eleventy

Callouts #

Custom callout elements using custom markdown-it plugin.


This is an info box


This is a tip


This is a warning


This is a dangerous warning


This is a note


This is a important block

Commenting #

Comments are based on webmentions using webmention.io & brid.gy to pull in mentions from mastodon.

This includes likes & boosts received via mastodon.

📝Adding Webmentions in Eleventy

Syndication Feed #

Syndication feed generation is setup to output an excerpt of the latest 10 posts.

📝Generating Summary For Atom Feed In 11ty

Sitemap #

Sitemap generation is based on posts & pages only (ignores pagination & tag pages).

Source Code #

The source for my 11ty blog is available on github.