Eleventy with a basic deno static server setup

Getting Eleventy working on Deno deploy

There are a few basic requirements for getting Eleventy working with Deno (and deno deploy)

1. You need to be running Eleventy 3.x
2. You need a basic server/config to serve static files with Deno
3. One gotcha is that Eleventy config/js files should use the .mjs extension so that they are always treated as ESM. For example I couldn’t get the Eleventy watch task to work until I did this.

Eleventy config

// Eleventy 3!
// eleventy.config.mjs
import pluginWebc from "npm:@11ty/eleventy-plugin-webc";
import { EleventyRenderPlugin } from "npm:@11ty/eleventy@3.0.0";

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/css/*.css");
  eleventyConfig.addPlugin(EleventyRenderPlugin);
  eleventyConfig.addPlugin(pluginWebc, {
    components: "src/_includes/webc/**/*.webc",
  });

  return {
    // doesn't need to be njk, that was juts my personal preference
    htmlTemplateEngine: "njk",
    dir: {
      input: "src",
      output: "_site",
    },
  };
}

Deno static server config

this is largely lifted from the following blog post

import { Application, Router } from "https://deno.land/x/oak@v10.2.0/mod.ts";

const app = new Application();

// First we try to serve static files from the _site folder. If that fails, we
// fall through to the router below.
app.use(async (ctx, next) => {
  try {
    await ctx.send({
      root: `${Deno.cwd()}/_site`,
      index: "index.html",
    });
  } catch {
    next();
  }
});

const router = new Router();

// After creating the router, we can add it to the app.
app.use(router.routes());
app.use(router.allowedMethods());

await app.listen({ port: 8000 });

deno.json

{
  "tasks": {
    "clean": "rm -rf _site",
    "eleventyWatch": "deno run --allow-sys --allow-run --allow-read --allow-write --allow-env npm:@11ty/eleventy@3.0.0 --watch",
    "generate": "deno task clean && deno run --allow-read --allow-write --allow-env --allow-sys npm:@11ty/eleventy@3.0.0",
    "dev": "deno task eleventyWatch & deno run --watch --allow-net --allow-read --unstable-kv server/main.ts",
    "prod": "deno task generate"
  },
  "imports": {
    "@11ty/eleventy": "npm:@11ty/eleventy@3.0.0",
    "@11ty/eleventy-plugin-webc": "https://esm.sh/@11ty/eleventy-plugin-webc"
  }
}

That’s largely it!

This comes off the back of building a new site for myself (which I haven’t done in quote some time) which I wrote about here.

See the starter project:

It lives at 11ty.deno.dev and Github