11ty from SimonCox.com

Alternate main heading and title in 11ty templates

Simon Cox — Sat, 17 Jan 2026 24:00:00 GMT

11ty templates set up

In my 11ty templates I generally use the same content for the title and the h1 tags. In the frontmatter I always have a title field as the title tag is actually the only required html tag in a html document, did you know that? So it makes sense to have the title tag as a requirement in my frontmatter.

With the h1 headings you can have as many a you like, technically, but I think this can be confusing to both humans and machines when trying to understand a page's content. The argument has long been that if you have a list of articles you can use the h1 tag for the articles title in that list.

My reply to that is that a page with a list of articles should have the article titles as h2s and only one h1 at the top of the page to let the user know what is on the page.

SEO practicalities for title and headings

There is absolutely nothing wrong with having the same title and h1 on a page as far as SEO goes and this is often the easiest to set up as you just repeat the frontmatter title as the h1.

Yes it is potentially not optimal, as having differing titles and h1's can cover more ground. This still will not mean overnight success and stardom for most sites. It could tip the balance in your favour in some cases though.

11ty templates title set up

Here is the title tag in my base template for the site:

<title>{{ title }} | Simon Cox</title>

This picks up the title data from the front matter and adds a pipe and Simon Cox to the end of it for the title. That's not best practice if you are concerned about title length in the search engine results pages - though that's becoming less of an issue these days for other reasons - so you shoudl consider if you need your brand on the end of your titles or not.

Here is my article template for the title and the h1:

<h1>{{ title }}</h1>
	{{ content | safe }}

This picks up the title frontmatter data and inserts it into the h1 tag and then the rest of the content I have in the markdown file follows.

Optimising the h1 for seo

So having said that it doesn't matter if the title and the h1 are the same, there are indeed occasions where I don't want exactly the same title and h1 content. My favoured way of approaching this is to add h1 content in the frontmatter, usually the row after the title so that I can see what's going on when I return to the page to fix typos and rewrite the content as I realise my writing can be rubbish at times (like exactly now, to be extra meta about it).


---
title: Alternate main heading and title in 11ty templates 
h1: Having a different title and h1 text using templating in 11ty
---

I have set up a conditional in the 11ty article template - note that I use nunjucks for my templates:

<h1>{% if h1 %}{{h1}}{% else %}{{ title }}{% endif %}</h1>
	{{ content | safe }}

If there is a h1 frontmatter data entry then it will be input into the h1 tag. If there isn't one then the template defaults to using the title - simple and easy to manage.

This way if I want to add a different h1 then I can add it to the frontmatter, build and deploy.

If you look at the source code of this page you will find that the title and h1 are indeed different!

Creating a modular approach to json schema in an eleventy website

Simon Cox — Tue, 28 Oct 2025 24:00:00 GMT

Having enjoyed Kaj Kandler’s presentation at the 25th 11ty meetup July 2025 I wanted a modular and automated way to add json schema to my personal website so built a set of templates and some simple logic.

Schema files Structure in 11ty

I have created a schema directory in the includes directory and keep all the files associated with this in there.

This has a main schema.njk file that is pulled into my base template which I use for all pages. src/_includes/base.njk

In the base.njk I have this following include after the pages footer and before the body closes. {%- include "schema/schema.njk" -%}

The schema.njk file

The file that pulls the schema all together is

The full schema file:

{%- set graph = [] %}



{# Include SiteNavigationElement #}

{%- set sitenavSchema %}{%- include "schema/SiteNavigationElement.njk" %}{%- endset %}



{# Include base fragments #}

{%- set websiteSchema %}{%- include "schema/website.njk" %}{%- endset %}

{%- set personSchema %}{%- include "schema/person.njk" %}{%- endset %}

{%- set organizationSchema %}{%- include "schema/organization.njk" %}{%- endset %}

{%- set webpageSchema %}{%- include "schema/webpage.njk" %}{%- endset %}

{%- set graph = graph.concat([sitenavSchema,websiteSchema, personSchema, organizationSchema, webpageSchema]) %}

	

{# Conditionally include article or blogpost schemas #}

{%- if page.url.startsWith("/post/") %}

{%- set articleSchema %}{%- include "schema/article.njk" %}{%- endset %}

{%- set graph = graph.concat([articleSchema]) %}

{%- elif page.url.startsWith("/short-articles/") %}

{%- set blogpostSchema %}{%- include "schema/blogpost.njk" %}{%- endset %}

{%- set graph = graph.concat([blogpostSchema]) %}

{%- endif %}

	

{# CollectionPage for /post/, /short-articles/, or /narrow-gauge-modelling/ list pages #}

{%- if page.url == "/post/" %}

{%- set collectionPostSchema %}{%- include "schema/collection-post.njk" %}{%- endset %}

{%- set graph = graph.concat([collectionPostSchema]) %}

{%- elif page.url == "/short-articles/" %}

{%- set collectionShortsSchema %}{%- include "schema/collection-shorts.njk" %}{%- endset %}

{%- set graph = graph.concat([collectionShortsSchema]) %}

{%- elif page.url == "/narrow-gauge-modelling/" %}

{%- set collectionNGMSchema %}{%- include "schema/collection-ngm.njk" %}{%- endset %}

{%- set graph = graph.concat([collectionNGMSchema]) %}

{%- endif %}

	

{# Breadcrumb #}

{%- set breadcrumbSchema %}{%- include "schema/breadcrumb.njk" %}{%- endset %}

{%- set graph = graph.concat([breadcrumbSchema]) %}

	

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@graph": [

{{ graph | join(",\n") | safe }}

]

}

</script>

Initial set up

The file starts with an initial set up

{%- set graph = [] %}

This creates an empty array called graph that will hold all the schema objects.

Including Base Schema Components

{# Include SiteNavigationElement #}
{%- set sitenavSchema %}{%- include "schema/SiteNavigationElement.njk" %}{%- endset %}

This pattern (repeated for multiple schemas) does three things:

{%- set sitenavSchema %}...{%- endset %} captures the output of the included template into a variable
{%- include "schema/SiteNavigationElement.njk" %} includes the contents of an external template file
The - in {%- removes whitespace before/after the tag for cleaner output

The same pattern is then repeated for:

websiteSchema - Website information
personSchema - Person/author information
organizationSchema - Organization/company information
webpageSchema - Basic webpage information

{%- set graph = graph.concat([sitenavSchema,websiteSchema, personSchema, organizationSchema, webpageSchema]) %}

This adds all the base schemas to the graph array.

Conditional Article/Blog Post Schemas

Then I start setting up schemas for types of page. All my article pages are in the post directory so anything in there will need the article schema.

{%- if page.url.startsWith("/post/") %}
  {%- set articleSchema %}{%- include "schema/article.njk" %}{%- endset %}
  {%- set graph = graph.concat([articleSchema]) %}

and for the Shorticles in short-articles i decided to use a blog schema instead of article.

{%- elif page.url.startsWith("/short-articles/") %}
  {%- set blogpostSchema %}{%- include "schema/blogpost.njk" %}{%- endset %}
  {%- set graph = graph.concat([blogpostSchema]) %}
{%- endif %}

Collection Page Schemas

For the top level collection pages of lists - such as the articles list and shorticles list pages I have set a collections schema:

{%- if page.url == "/post/" %}
  {%- set collectionPostSchema %}{%- include "schema/collection-post.njk" %}{%- endset %}
  {%- set graph = graph.concat([collectionPostSchema]) %}

These conditions check for exact URL matches to collection/listing pages:

/post/ - Main posts listing page
/short-articles/ - Short articles listing page
/narrow-gauge-modelling/ - A specific category listing page

Each gets its own collection schema added to the graph.

Breadcrumb schema is a tricky one to fathom and the logic is in the breadcrumb.njk file

{%- set breadcrumbSchema %}{%- include "schema/breadcrumb.njk" %}{%- endset %}
{%- set graph = graph.concat([breadcrumbSchema]) %}

This adds breadcrumb navigation schema to every page.

Final JSON-LD Output

Finally it pulls together the elements into a JSON-LD script

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {{ graph | join(",\n") | safe }}
  ]
}
</script>

Creates a script tag with type="application/ld+json" (tells search engines this is structured data)
Sets the Schema.org context
Creates a @graph array containing all the collected schemas
{{ graph | join(",\n") | safe }} joins all array elements with commas and newlines, and marks it as safe HTML (won't be escaped)

The result is a single script tag containing all relevant structured data for the current page, helping search engines understand the content and potentially enabling rich snippets in search results.

Individual Schema files

The individual schema types have their own file in:

src/_includes/schema/

which contains these files

article.njk
blogpost.njk
breadcrumb.njk
collection-post.njk
collection-shorts.njk
contactpage.njk
copyright.njk
faqpage.njk
imageobject.njk
organisation.njk
person.njk
schema.njk – the main file
webpage.njk
website.njk

Each of these files created the schema JSON so more can be added as you require. I have listed the code for a couple below to give you the general idea of how they go together.

Article schema file

The article.njk schema file in full

{

"@type": "Article",

"@id": "{{ site.url }}{{ page.url }}#article",

"headline": "{{ title }}",

"datePublished": "{{ page.date.toISOString() }}",

"dateModified": {% if dateUpdated %}"{{ dateUpdated.toISOString() }}"{% else %}"{{ page.date.toISOString() }}"{% endif %},

"image": {

"@type": "ImageObject",

"url": "{{ site.url }}{{ image }}",

"inLanguage": "en-GB"

},

"author": {

"@type": "Person",

"@id": "{{ site.url }}/#person",

"name": "Simon Cox"

},

"mainEntityOfPage": {

"@id": "{{ site.url }}{{ page.url }}"

}

}

I am pulling frontmatter data as well as global data - though top make it more transferrable items like name: Simon Cox could have used a placeholder instead of being hardcoded. i should clean that up so I can use this on other sites!

The collection-post schema file

I'm sure I could use some logic to simplify the number of files but this works for me at the moment.

{

"@type": "CollectionPage",

"@id": "{{ site.url }}/post/#webpage",

"url": "{{ site.url }}/post/",

"name": "Articles",

"description": "A collection of in-depth articles by Simon Cox.",

"isPartOf": {

"@id": "{{ site.url }}/#website"

},

"hasPart": [

{%- for post in collections.Post -%}

{

"@type": "Article",

"@id": "{{ site.url }}{{ post.url }}#webpage"

}{%- if not loop.last %},{% endif %}

{%- endfor -%}

]

}

I hope that helps someone put together their own schema on an 11ty site!

To check your progress you could install my schema chrome extension.

Creating Cloudflare redirects

Simon Cox — Wed, 08 Oct 2025 01:00:00 GMT

I was having issues sorting out the redirects on Cloudflare and have learnt a few things on the way so am documenting them here – because I will forget it all whilst in the pursuit of happier things.

Directory migration

I made a major change to the structure of a section of my site /shorts/ has reverted back to /short-articles/ as I am testing out a possible issue with this sites current lack of SERP visibility in Bing. As such I needed to revert the redirects from /short-articles/ to /shorts/ back again. Not usually an issue for my skills but I thought I'd make some notes.

Cloudflare hosting

This site is currently hosted on Cloudflare pages, auto deployed from its github repository. I can use the inbuilt redirect solution that Cloudflare provides but that has a very limited capacity so I have created a file named _redirects that Cloudflare recognises (as does Netlify) and uses for redirects. This is in my 11ty setup and has a passthrough so that it is output in the build exactly the same as I have written it.

This file can have up to 2,000 redirects if properly formatted. I have had issues with only being able to use 120 redirects but this was because I had built some of them incorrectly.

Deployment logs

One source of info that is really useful is the deployment log files. Find it here: Cloudflare > Compute (Workers) > your site > View details

Now scroll down in the Build log and it will tell you all sorts of interesting things such as time and what happened. This includes parsing the redirects file.

10:41:26.990	Parsed 83 valid redirect rules.

The log helpfully tells you redirects that have not been implemented and also provides some optimisation suggestions such as the order of the redirects.

Notes on Cloudflare redirect rules best practices

Exclamation mark on the end of the rule

I think this was a leftover from Netlify's redirect rules

http://simoncox.com/*   https://www.simoncox.com/:splat  301!
Valid status codes are 200, 301, 302 (default), 303, 307, or 308. Got 301!.

I did a find and replace and removed the exclamations marks.

There was another issue with this particular rule though!

Only relative URLs are allowed

I had some domain redirects in place, because you can't have enough domains, but Cloudflare doesn't like them as the source URL, they have to be a part of the directory structure, so I had to take them out.

https://www.tagsoup.net/*  https://www.simoncox.com/:splat  301!
Only relative URLs are allowed. Skipping absolute URL https://www.tagsoup.net/*.

I am now forwarding those domains using an external method.

Redirect rule spaces and or tabs

Cloudflare is quite particular about the number of spaces - it looks for gaps in the redirect rule of 2 and 3 sets of spaces or tabs. If there are 4 or more sets of spaces and the rule will be ignored.

/blog/category:Model Railways /narrow-gauge-modelling/ 301
Expected exactly 2 or 3 whitespace-separated tokens. Got 4.

This means if your URL has a space you will need to use %20 in place of the space:

/blog/category:Model%20Railways /narrow-gauge-modelling/ 301

Colons interpreted as placeholders

I have some URLs with colons in them, such as /blog/category:things, and have put these under section 2 as the colon is interpreted as a placeholder, or you can URL-encode the colon of course!

/blog/category%3AModel%20Railways /narrow-gauge-modelling/ 301

Order of redirect rules

For performant reasons it is better to list static redirects before dynamic ones so that Cloudflare’s systems can run these more effectively:

Static rules - /home, /about, /contact
Rules with placeholders - /blog/:slug, /users/:id
Rules with splats - /old-site/*

I split these up using # comments in my redirect files.

Final thoughts about the Cloudflare redirect file rules

I originally thought I could switch the sites hosting between Cloudflare and Netlify hosting by just changing the DNS, a very handy and quick solution, but I am not going to have to keep two sets of redirect files if I want to do this as the rules are quite different between them.

Having learnt more about the Cloudflare redirect rules If am much happier running the rules from this file. Also, this started off as a shorticle but is long enough to be a full article.

You can read more on Cloudflare’s full documentation on redirects and let me know if I have missed anything important out!

Creating a blogroll page from Mastodon bookmarks

Simon Cox — Fri, 04 Apr 2025 01:00:00 GMT

Why did I want a bookmarks page?

A thing that has been on my ideas list for quite some time is to create a links type page from the Toots I bookmark on Mastodon. The mastodon bookmarks are really handy for items that I want to go back to, to read more or as a prompt to get me to do something. Having them actually on my website makes it more like a blogroll of old and here is my bookmarks page.

Mastodon API

Mastodon has an API that you can pull many interesting things out of and this was what got me thinking about this idea in the first place. It has been on the ideas list for a few years because I can't really write Javascript. I can look through it and make some good assumptions to whats happening but coding this is still a dark art to me. The Mastodon API docs are available to peruse and I had a glance at one point.

Down the rabbit hole of code I go

So I turned to AI. Of course I did, and if you think less of me for it then that's just fine with me and no doubt you will give me some grief on Mastodon. Off you toddle.

Meanwhile for those of you that are still interested I went through a fair bit of prompting and trial and error to get this working in the first place and then how I wanted it to work. It wasn't 5 mins time of ChatGPT and there it was. No, it was a week of spare moments pulling out hair, trying to understand things and then trying again. In the end I got there and I did learn a lot from it.

With the Mastodon API you can pull out 40 bookmarks in one go - you can pull out more but then you have to call the API again asking for pagination and I have not had time to work out how to do that properly yet. I may not ever bother as 40 takes me back quite a while as I don't bookmark that often, though I might do more of it now!

The environment file

First I had to set up a .env file with my Instance and Access token at root level in my 11ty folder so that the script to make the authenticated call. In this file I added the following two lines (I have not filled in the instance or token in this example!): MASTODON_INSTANCE=https://your.instance MASTODON_ACCESS_TOKEN=your_access_token

My instance being the Mastodon server I am on. The Mastodon Access Token I needed to create by going to my Mastodon Preferences > Development to create New application. I give the Application a name and then at the top of the page I found my access token - it's a long string. Next I choose the Scope - read:bookmarks is all that I needed for this and then I saved the application down at the bottom with the Save Changes button.

I added those two values to my .env file.

The bookmarks Script

Next I created a bookmarks.js file in my _data folder and this is my current script:

// Load environment variables from the .env file
require("dotenv").config();

// Import EleventyFetch for fetching remote data and caching it
const EleventyFetch = require("@11ty/eleventy-fetch");

// Get Mastodon instance URL and access token from environment variables
const MASTODON_INSTANCE = process.env.MASTODON_INSTANCE;
const MASTODON_ACCESS_TOKEN = process.env.MASTODON_ACCESS_TOKEN;

// Helper function to check if an image URL is valid (it will try to fetch only the header)
async function checkImageExists(url) {
  try {
    // Send a HEAD request to check if the image exists without downloading it
    const response = await fetch(url, { method: "HEAD" });
    return response.ok; // If the response status is 2xx, the image exists
  } catch (error) {
    // If there's an error (network issue, or image doesn't exist), return false
    return false;
  }
}

// Helper function to extract the 'next' page URL from the Link header (used for pagination)
function getNextPage(linkHeader) {
  // If the link header is missing, there's no next page
  if (!linkHeader) return null;

  // Regular expression to extract the 'next' link from the pagination header
  const match = linkHeader.match(/<([^>]+)>;\s*rel="next"/);
  return match ? match[1] : null; // Return the next page URL or null if not found
}

// Main function to fetch and process Mastodon bookmarks
module.exports = async function () {
  // Check if the required environment variables are set, otherwise log an error
  if (!MASTODON_INSTANCE || !MASTODON_ACCESS_TOKEN) {
    console.error("Missing Mastodon credentials in .env file");
    return []; // Return an empty array if credentials are missing
  }

  // Construct the URL to fetch bookmarks from Mastodon API
  const url = `${MASTODON_INSTANCE}/api/v1/bookmarks?limit=40`; // Fetch up to 40 bookmarks
  // Add the authorization header with the Mastodon access token
  const headers = { Authorization: `Bearer ${MASTODON_ACCESS_TOKEN}` };

  try {
    // Use EleventyFetch to fetch the bookmarks with caching for 12 hours
    const data = await EleventyFetch(url, {
      duration: "12h",  // Cache the result for 12 hours
      type: "json",     // Expect JSON data from the API
      fetchOptions: { headers } // Include the headers (with the access token)
    });

    // Process the fetched data (map over each bookmark and handle the media)
    return await Promise.all(
      data.map(async bookmark => {
        // Check for images in the media_attachments array and validate them
        const images = await Promise.all(
          bookmark.media_attachments
            .filter(attachment => attachment.type === "image") // Filter only image attachments
            .map(async attachment => {
              // For each image, check if it exists by using the checkImageExists function
              if (await checkImageExists(attachment.url)) {
                return attachment.url; // Return the image URL if valid
              }
              return null; // Return null if the image doesn't exist
            })
        );

        // Return a simplified structure for each bookmark with the relevant data
        return {
          id: bookmark.id,  // Bookmark ID
          content: bookmark.content,  // Bookmark content (text)
          url: bookmark.url,  // URL of the bookmarked post
          created_at: bookmark.created_at,  // Timestamp when the bookmark was created
          account: {
            username: bookmark.account.username,  // Account username
            url: bookmark.account.url,  // Account URL
            avatar: bookmark.account.avatar  // Account avatar URL
          },
          images: images.filter(img => img !== null) // Remove null image entries
        };
      })
    );
  } catch (error) {
    // If there was an error fetching data, log it and return an empty array
    console.error("Failed to fetch Mastodon bookmarks:", error);
    return [];
  }
};

Page code

To display the output I set up the following. I have the styles inline at the moment as I am still mucking around with it so they may well end up in the site css.

{% for bookmark in bookmarks %}
<section style="border: 1px solid #ccc; padding: 10px; margin: 20px auto; border-radius: 20px;max-width:360px;overflow-wrap:anywhere;">
	<img style="width:40px;margin:0" src="{{ bookmark.account.avatar }}" alt="{{ bookmark.account.username }}" width="40" height="40">
	<p>from {{ bookmark.account.username }}</p>
	<p>{{ bookmark.content | safe }}</p>
	{% if bookmark.images.length > 0 %}
	<section class="images">
		{% for image in bookmark.images %}
		<img src="{{ image }}" alt="Mastodon image" />
		{% endfor %}
	</section>
	{% endif %}
	<small><a href="{{ bookmark.url }}">Link to the the Toot</a> – Saved on {{ bookmark.created_at }}</small>
</section>
{% endfor %}

Process of adding the bookmarks

I did not want this process to be client side as it would have taken too long to load the page and there was a bigger risk of exposing my token. So I have this setup to build out the page when I run my build command locally. the html page gets build and the images added from cache to the img folder. That is then submitted to Github and deployed to the server.

The disadvantage with this is that I need to go through a build process to get the latest 40 bookmarks onto the page. I am always tinkering with this site though so that's not a problem for me!

What next?

Hopefully some others will find this useful and create something similar if not a lot better and I await for you to post on Mastodon so that I can bookmark them!

11ty Git Commit Messages

Simon Cox — Sat, 14 Dec 2024 11:49:00 GMT

Just read Git Commit Messages by Angie Herrera who has started organising Git Commit Messages "in a way that keeps things organized and makes future me a bit happier and less stressed".

What a great idea!

I decided I am going to do the same – so I copied Angie's bullet points into a Note and then started thinking about it. Angie is a very accomplished Craft CMS developer, who I have been honoured to provide some SEO work, so the list makes perfect sense for a Craft build. However with 11ty builds I needed something a little more because I am now also making content changes in my 11ty builds.

So here is my extended version:

feat: anything feature related, even if deleting code or making changes to existing features
fix: fixing a bug or issue without new feature code
refactor: code change that neither fixes a bug nor adds a feature but somehow improves the codebase (for me this is usually streamlining CSS)
cms: changes to the CMS (version updates or plugin updates, installs, or removals)
build: Changes that affect the build system or external dependencies, such as npm, DDEV setup, or Laravel Mix.
content: New content, images and typo fixes and corrections
seo: Changes optimising code or content for seo purposes

That should see me right!

11ty upgrading node in netlify

Simon Cox — Tue, 15 Oct 2024 12:45:29 GMT

I upgraded the image plugin for 11ty on a small site which had an unintended chain of issues!

I noticed that the Source control had node elements in it, even though I have node_modules in my gitignore file. After some investigation and testing I realised that I must have deployed the site before adding the gitignore. Really should not have node_modules deployed to the repository even though it is private.

To remove the node_modules from the repository I moved the folder up a level and committed and synced the files. That removed the node_modules from the repository. I then moved the node_modules folder back into the local site and ran a build - all was ok.

I checked Netlify and the build had failed.

It turned out (i.e. head scratching and testing for a while) is wasn't my local Node but the Node version on Netlify that needed upgrading - of course it was.

With the node_modules in the build, Netlify had used the node_modules I had provided to create the build - which is a great feature but not what was needed. As soon as I had removed them Netlify used the default node_modules which failed to build because apparently node needed upgrading.

On the Netlify Site Configuration > Build & Deploy > Dependency management (scroll down) to find and configure the Netlify version of Node - it was 15 and I apparently needed 18, so set to 20. Bingo - built and deployed magnificently!

I hope this note helps someone but it is really for me the next time I get this issue on another site and don't realise I fixed it before.

11ty collections tag links

Simon Cox — Sun, 17 Mar 2024 12:40:20 GMT

More of a reminder for myself next time Image need to do this!

Adding a collection tag to a post as a link

There are some lovely ways to automate sets of tags with a list page. Hoever I don't think these can have additional content to make them into a proper topic hub page so I am building them out manually.

For posts in my Articles and Shorts sections I have started adding tags to the modelling topic ones. After the author sign off with date, and update date if there is one, I have added links to the tag hub page.

I started with this 11ty code:

{% if tag == "Modelling" %}| <a href="/narrow-gauge-modelling">Modelling</a>{% endif %}
{% if tag == "Loxley" %}| <a href="/loxleybarton">Loxley Barton Falls</a>{% endif %}

But it wasn't showing up the tag links. Turns out that because I have multiple tags on some in this form:

tags:
- Loxley
- Modelling

Turns out that 11ty concatenates them as a string, of course, so I need to cycle through that and pull out the tags that I need.

This gave me:

{% for tag in tags %} 
  {% if tag == "Modelling" %}| <a href="/narrow-gauge-modelling">Modelling</a>{% endif %}
  {% if tag == "Loxley" %}| <a href="/loxleybarton">Loxley Barton Falls</a>{% endif %}
{%- endfor %}

Which works perfectly. I am sure there is a more robust method but for now, for me, this is working great!

Cleaning up the 11ty config

Simon Cox — Sun, 29 Oct 2023 16:11:20 GMT

I read a couple of articles this week on cleaning up your 11ty config file, the initial one that I found from Robin Hoover and the second from Lene Saile in which Lene had added a 3rd method, adding another config file as a plugin which I then understood what I could do. Yes takes me a bit of time sometimes.

I created a new folder named _11ty in my source folder and in that added new .js files for each of the plugins, functions, filters and collections I needed, and in each added the code for them. This included the module.exports section but with slightly changed code.

plugin.js code example:

const CleanCSS = require("clean-css");

module.exports = eleventyConfig => {
  eleventyConfig.addFilter("cssmin", function(code) {
    return new CleanCSS({}).minify(code).styles;
  });
};

The module.exports line has changed from:

module.exports = function(eleventyConfig) {

module.exports = eleventyConfig => {

With all the plugin and filter code tucked into its own file for convenience and ease of maintenance my .eleventy.js file now looks like this:

module.exports = function(eleventyConfig) {
  // Plugins
  eleventyConfig.addPlugin(require("./src/_11ty/cssmini.js")); // CSS minification
  eleventyConfig.addPlugin(require("./src/_11ty/rss.js")); // RSS feed plugin
  eleventyConfig.addPlugin(require("./src/_11ty/datetime.js")); // Date Time plugin
  eleventyConfig.addPlugin(require("./src/_11ty/collections.js")); // Collections
  eleventyConfig.addPlugin(require("./src/_11ty/image.js")); // Image plugin
  eleventyConfig.addPlugin(require("./src/_11ty/passthroughs.js")); // passthroughs

  return {
    dir: {
      input: "src",
      output: "public"
    }
  }
};

You can see the paths to each plug in I have used.

Yes, this is more of a note to myself for the next time I need to do this but I hope it helps someone else too!

11ty draft posts

Simon Cox — Fri, 01 Sep 2023 17:32:12 GMT

Set up a draft system in 11ty

Now this and a few other sites I have are running on 11ty I have been meaning to add a way of marking a post as a draft while I am writing it - just in case I need to publish a short while getting an article ready.

There are several complex explanations of how to do this out there including one from Remy Sharps from 2019 and the Quick Tip in the 11ty docs. I am sure they are all great but I wanted something simple and easy to use and I didn't need to schedule anything - well not yet anyway.

I found this one on github from Peter Dehaan which explained how this works easily enough for me to comprehend and implement.

With the added src.11tydata.js file all I need to is add a draft: true to the front matter and the post will not be included in the build, including lists of posts, my mxl sitemap and my rss feed.

---
title: 11ty draft posts
description: Setting a post to draft in 11ty while writing
topic: web
draft: true
---

Update 2024/11/25

There has been un update in 11ty v3 with an easier method

Solving a date display issue in 11ty templates

Simon Cox — Fri, 07 Jul 2023 15:53:37 GMT

I have recently changed the lastmod date in my xml site map to be accurate now that Google are wanting that. Part of what Google wanted was for the page to state the update date on it. I pulled this data from the posts front matter but because I had set an 11ty filter for the sitemap the output on the page was the full UTC:

Updated: 2023-04-03T00:00:00.000

The resolution was to add .toDateString() to the front matter item, dateUpdated, in the template giving me:

dateUpdated.toDateString()

Which displays as:

Updated: Mon Apr 03 2023

Far better!

11ty image shortcode best practice

Simon Cox — Tue, 06 Jun 2023 15:46:51 GMT

Just deployed a site using the 11ty image plugin and it is working well. I did have some issues with set up - wanted the hi-res images in a separate folder outside of src and public folders and acheived that by setting an external source - would be nice if this were in the base set up:

let imageSrc = `hi-res-images/${src}`;
let metadata = await Image(imageSrc, {    
widths: [180, 343, 647, 1200],

And then the shortcode in the functions:

eleventyConfig.addAsyncShortcode("image", imageShortcode);

But then I was having issues where the image shown on full screen was the low res version - not good! Took me an age to work out the issue till I noticed some errant code in the source.

In Markdown please leave a space before and after the image shortcode - else it gets mixed up and bits of the picture element get wrapped in a p tag and become not a picture element!

This doesn't work:

Lorum ipsum dolar bla bla
% image "image.jpg", "alt text" %
Lorum ipsum dolar bla bla

But this does:

Lorum ipsum dolar bla bla

% image "image.jpg", "alt text" %

Lorum ipsum dolar bla bla

Leave some space!

11ty conditional canonical

Simon Cox — Mon, 13 Feb 2023 14:17:55 GMT

GSC was flagging some Canonical issue on this site so I decided to add the canonical using the page.url parameter in my base.njk nunjucks include.

<link rel="canonical" href="https://www.simoncox.com{{ page.url }}">

However, I have already included a Canonical in the frontmatter of some of my posts and there may be reasons why i'd want the canonical to be on a different url. So I added a conditional to state that if the frontmatter for canonical exists then use it else fall back to the standard page url version. And that gave me this:
{% if canonical %}<link rel="canonical" href="{{ canonical }}">{% else %}<link rel="canonical" href="https://www.simoncox.com{{ page.url }}">{% endif %}

Simple but effective. ^ to MrQuest for the tip showing me how to display raw njk code!

Remove 404 file from sitemap.xml in 11ty

Simon Cox — Mon, 06 Feb 2023 18:08:58 GMT

I realised that the sitemap.xml file was listing the 404 page - we really don't want that in there as the search engines don't want it. The 11ty sitemap.njk file had the answer in its frontmatter for any page you don't want in a collection, and that includes the All collection, I added this in the frontmatter of the 404 page:

eleventyExcludeFromCollections: true

And then any page I want to manually jeep out of the sitemap I can add sitemapIgnore: true to the frontmatter.

11ty starter video

Simon Cox — Fri, 03 Feb 2023 24:00:00 GMT

There are many 11ty resources available but the one that I started with to get me going is Kevin Powell's Turn static HTML/CSS into a blog with CMS using the JAMStack and I keep going back to it!