11ty from SimonCox.com

Alternate main heading and title in 11ty templates

Simon Cox — Sat, 17 Jan 2026 00: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 00: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 domain names, 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.

Newspaper style layout for my content

Simon Cox — Sat, 14 Sep 2024 10:40:00 GMT

I read a short post on Mastodon from Pierre Carrier saying that his blog had a newspaper mode - and it looks great! Pierre has his site on 11ty, as my site currently is, so I thought I would have a quick go at building a newspaper version of my content - the Simon Cox Evening News.

First off I didn't want to change any of the code for my site and this would be on one page only - not a toggle between site designs. 11ty automatically builds collections to gather content into groups so with testing I picked my Shorts collection of posts and built a small piece of html to reiterate over each story - that pulls in the heading, link and content etc.

This gave me a long page of content. What I wanted to do was have columns of content. CSS grid sprang to mind but of course it segments articles into blocks with spaces in the rows, so that would not work. A masonary type approach might work - but that runs in rows. So I went back to an old favourite that, in my opinion, does not get used enough on the web - columns. This is really old CSS and for various reasons designers appear not to like it - control of the flow being one of them.

The design and html for the page is standalone - it does not uses any of the CSS or templates from the rest of the site.

I had some issues:

Initially I set media breakpoints for the number of columns to give a responsive layout depending on viewport size. Pierre rightly asked why I had not set the column widths and he was spot on - that was a much better approach.
Image widths had to be set to width of 100% to fill the column correctly but some were smaller than the columns widths so Max-width 100% was used.
I was getting a lot of white space to the right meaning there was a lot of horizontal scrolling which was not great. I eventually tracked this down to the pre tag, that I was wrapping code in, needing white-space: pre-wrap; in the css.
I had used the Shorts collection to test and swapped that to my posts collection to do a second test. What I really wanted to do was both and I thought I would have to set up a new filter in 11ty to do that bet remembered I have already done this for the rss feed – so I was able to use the feed collection! 11ty does make this kind of thing easy!

Once I had the layout sorted I added some enhancements.

The images and links were in colour and I wanted an old newspaper feel. I added filter:grayscale(1) brightness(80%) contrast(150%); mix-blend-mode: hard-light; to the container making everything monochrome without touching the source content.
background - a seamless crumpled paper image.
post titles were set in Playfair Bold and the kerning tightened.

Things to do: I was hoping to add some filters to make the images look like halftones but after a lot of experimentation it has eluded me. There are some lovely online codepens and blog posts on halftones for this but I could not get them to work without changing the posts underlying code. I may come back to this in the future.

As Seth Goldstein said It's overwhelming but he is a recovering journalist.

Anyway - here it is - the Simon Cox Evening News.

Update

15 Sept 2024

I have added a couple of extra pages that filter the Articles and Short articles so it is a little bit easier to read. Not sure this will have a huge amount of traffic as it is more of an excercise! I am, of course, monitoring what happens from an SEO aspect - always testing!

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!

Tracking 404 broken links with Fathom Analytics

Simon Cox — Sun, 11 Feb 2024 00:00:00 GMT

I switched all my small projects over to Fathom Analytics in 2023 for various reasons but there was one page on my site where I kept the Google Analytics code - the 404 page.

I did this so that I could pull the data into a Data Studio dashboard to provide me with errant URLs being visited on my site.

The above image shows a classic example of a URL that didn't exist on my site. Not sure how someone got this wrong but they have missed one letter, 'e' out of the URL thus breaking it! They have put:

/post/2010-02-04-th-perfect-angle-to-staple-paper/

when the actual page is at:

/post/2010-02-04-the-perfect-angle-to-staple-paper/

And it had nine visits (probably the same person wondering why the link was going to my 404 page - so they may have fixed it.)

So the report is super useful to see what is going on under the hood.

Why do I want to see what is happening on my 404 page?

Well, broken URLs in my site can usually be found quite easily by running a crawler across the site and fixing anything that breaks but there is the odd occasion where someone linking to my site uses an old URL or creates a URL with a typo in it - essentially they have created a broken link to my site and I don't know who has done that and I can't ask them to fix it.

With the old URLs I have redirects in place to catch them but for new broken URLs I don't know they exist unless I can track the referrer. So that's what I have been doing.

Set up the Redirects

When I get a new broken link I can add a line to my redirects file to redirect that to the appropriate page if one exists. If it is not obvious where to send the traffic then I still let is resolve to the 404 page.

Creating this report in Fathom Analytics

I thought I should be able to create a similar report using Fathom Analytics so read the Creating and using events documentation and it looked like I could set an event up and track them there.

This code looked good so I tried it:

<script>
window.addEventListener('load', (event) => {
  fathom.trackEvent('checkout completed');
});
</script>

All I needed to do was change the checkout completed to 404. It worked but of course only told me that there was a 404 event. I needed more data from the script - I needed the URL. Javasripty people will be well ahead of me now and using the word 'just' a lot but despite using the fabulous 11ty for this site I really can't cope with much more than a sprinkle of javascript.

Fathom to the rescue

So I contacted Fathom Analytics, and told them what I was trying to do. The wonderful Paul Jarvis came back with the code I needed and even tested it out before sending it to me!

Here is the code I have ended up using - courtesy of Paul.

<script>
document.addEventListener('DOMContentLoaded', function() {
    var path = window.location.pathname;
    fathom.trackEvent('404: ' + path);
  });
</script>

On testing, I now get the following report in my Fathom Dashboard:

That allows me to spot 404 URL errors and set up new redirects for them!

Fathom Analytics

Thank you Paul Jarvis for your help on this. If you are interested in Fathom Analytics, this is my affiliate linky.

Update

Paul has already added this technique to the Fathom documentation!

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!

Cloudflare Pages error with 11ty build

Simon Cox — Mon, 15 May 2023 10:05:13 GMT

I have a couple of 11ty built sites that are auto deployed out to Cloudflare Pages. I normally prefer Netlify for the hosting but I do like to keep some eggs in other baskets.

I updated a site yesterday and it kept failing the deploy to Cloudflare with the error stating that Node had to be at least version 14. I checked my local Node version and it was 19.3.0. So I changed my gitignore to allow the node files to be in the deploy in the hope that this would enable Cloudflare to build out the pages correctly.(Then I had issues with Git Authentication - another post another day on this perhaps but I had to restart my Mac to get the Auth to work.) That did not work.

Turns out you have to set the Environment Variables for Node to work. This seems a bit of a faf and must be new in Cloudflare since March - the last time I deployed this site. Not sure why they have complicated things.

Navigate to Pages > site > Settings > Environment Variables and set up a new variable named NODE_VERSION and I put the version I am using in there.

And the next deployment worked!

Update 2024-09-29

On reflection this may have only happened when Cloudflare increased their minimum version of Node. Even though I was using 19.3.0 Cloudflare appears not to be detecting the version you have used, even though that is in the package.json, and relies on you setting it in the Environment Variables. This certainly does allow easy customisation but could be automated.

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.

Webmentions

Simon Cox — Sun, 05 Feb 2023 10:55:00 GMT

I have tried to add Webmentions to the site having read Max Böck's post on this and then Chris Bongers post - both very helpful and bewildering at the same time! Have found my natural limit again having got so far with 11ty!

Netlify CMS

Simon Cox — Sat, 04 Feb 2023 16:58:00 GMT

No issues with coding the pages up as and when I need but if I am on the go somewhere making changes to the site will have to wait - except that I have now installed the Netlify CMS! It's very lightweight for a CMS and is based on the 11ty Collections so static page changes are a little more difficult but posts are ok - such as this one.

Update:

Netlify CMS was rebranded to Decap CMS and is now run Independently by a Netlify partner agency. More info on Decap CMS.

11ty starter video

Simon Cox — Fri, 03 Feb 2023 09: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!

11ty inline minified css

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

Minifying css for 11ty sites is quick and simple. Quick Tip #001—Inline minified CSS Using the CleanCSS plugin and moving the css file to _includes and then pulling the code into one line in the base.njk head.

11ty from SimonCox.com

Alternate main heading and title in 11ty templates

11ty templates set up

SEO practicalities for title and headings

11ty templates title set up

Optimising the h1 for seo

Creating a modular approach to json schema in an eleventy website

Schema files Structure in 11ty

The schema.njk file

Initial set up

Including Base Schema Components

Conditional Article/Blog Post Schemas

Collection Page Schemas

Breadcrumb Schema

Final JSON-LD Output

Individual Schema files

Article schema file

The collection-post schema file

Creating Cloudflare redirects

Directory migration

Cloudflare hosting

Deployment logs

Notes on Cloudflare redirect rules best practices

Exclamation mark on the end of the rule

Only relative URLs are allowed

Redirect rule spaces and or tabs

Colons interpreted as placeholders

Order of redirect rules

Final thoughts about the Cloudflare redirect file rules

Creating a blogroll page from Mastodon bookmarks

Why did I want a bookmarks page?

Mastodon API

Down the rabbit hole of code I go

The environment file

The bookmarks Script

Page code

Process of adding the bookmarks

What next?

11ty Git Commit Messages

11ty upgrading node in netlify

Newspaper style layout for my content

Update

11ty collections tag links

Adding a collection tag to a post as a link

Tracking 404 broken links with Fathom Analytics

Why do I want to see what is happening on my 404 page?

Set up the Redirects

Creating this report in Fathom Analytics

Fathom to the rescue

Fathom Analytics

Update

Cleaning up the 11ty config

11ty draft posts

Set up a draft system in 11ty

Update 2024/11/25

Solving a date display issue in 11ty templates

11ty image shortcode best practice

Cloudflare Pages error with 11ty build

Update 2024-09-29

11ty conditional canonical

Remove 404 file from sitemap.xml in 11ty

Webmentions

Netlify CMS

Update:

11ty starter video

11ty inline minified css