Secret URLs with 11ty

I sometimes want to be able to create secret pages on this site; I want a unique URL that I can share with someone, but I basically don't want anyone to be able to find the page unless I've shared the URL with them. This is basically how GitHub secret gists work:

Secret gists aren't private. If you send the URL of a secret gist to a friend, they'll be able to see it. However, if someone you don't know discovers the URL, they'll also be able to see your gist.

It's quite simple to do with 11ty. Here's a working example, and here's how I built it:

  1. Create a new subdirectory in your site folder. Mine is site/secrets/.
  2. Generate a unique, URL-safe ID. Nano ID is great for this. You can just run npx nanoid if you have Node.js installed.
  3. Create a markdown file, with this ID as the file name, inside your secrets directory. The example file I'm using here is: site/secrets/ALtX3rwMv5EXx8x4vUGnA.md.
  4. Add some metadata and text. You can put whatever you like here—the only important thing is that you add a specific tag. On this site, I just use tags: ["secret"].
  5. On the 11ty layout template for your page, add the following snippet your HTML <head>:
`
${
  tags && tags.includes("secret")
    ? `<meta name="robots" content="noindex, nofollow" />`
    : ""
}
`;

That ensures the page won't be indexed by search engines, and that search engines won't follow links on the page.