11ty Site Now Live

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:

• postcss integration
• esbuild integration
• blog post permalinks from title & date
• date filters without luxon
• excerpt filter for syndication feed
• livereload that works with inline styles
• automatic image optimization in markdown
• optimized post feature image
• image attribution link
• post list pagination
• darkmode support (localStorage & prefers-color-scheme)
• opengraph meta tags
• seo related meta tags
• create new posts from cli
• markdown checklists
• eslint with prettier
• favicon generation
• webmentions (comment using mastodon)
• custom callouts plugin for markdown-it

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 #

• Resize images
• Output optimized formats
• Responsive image sizes
• Browser based lazy loading

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.

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.

11ty-equk