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.
Info
This is an info box
Tip
This is a tip
Warning
This is a warning
Danger
This is a dangerous warning
Note
This is a note
Important
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.
Webmentions
No Comments Yet