Eleventy (11ty) Links

This repository contains a self-hosted Linktree-style website. It is deployed to https://11ty-links.pages.dev/. We deploy using GitHub Actions as opposed to the native Cloudflare Pages git integration so that the build settings are captured within the git repository, and so that we can use the same container images for local development.

To create your own version of this website:

• Create a new Cloudflare Pages project. Select the option to create using direct upload, but do not upload any files yet (we will upload files automatically using GitHub Actions).
• Navigate to the list of your Workers & Pages projects, and select the newly created project. Under settings, set the following environment variables:
  • RESEND_KEY: an API key for Resend.
  • EMAIL_FROM: the email address that contact form submissions should be sent from (the sending domain will need to be registered with and verified by Resend).
  • EMAIL_TO: the email address that contact form submissions should be sent to.
• Create a new GitHub repository using this one as a template.
• Set GitHub Actions secrets and variables for this repository:
  • Secrets:
    • CLOUDFLARE_ACCOUNT_ID: your Cloudflare account ID.
    • CLOUDFLARE_API_TOKEN: a Cloudflare API token with permission Account.Cloudflare Pages (Edit level).
  • Variables:
    • CLOUDFLARE_PAGES_PROJECT_NAME: the name of the Cloudflare Pages project that you created earlier.
• Customise the list of links as appropriate.
• Customise the text on the home page as appropriate.
• Replace the image used when sharing via social media.
• (optional) Customise the CSS to change the colours etc.
• (optional) Delete the lipsum file.

Local Development

The easiest way to develop locally is using Docker Desktop (other container engines are available).

• Windows (cmd): docker run -it --rm -v %cd%:/app -w /app -p 127.0.0.1:8080:8080 node:20.15.1 sh -c "cd /app && npm install && npx @11ty/eleventy --serve"
• macOS & Linux (bash): docker run -it --rm -v "$PWD":/app -w /app -p 127.0.0.1:8080:8080 node:20.15.1 sh -c "cd /app && npm install && npx @11ty/eleventy --serve"

Once the development server is running, the website will be available at http://localhost:8080/.