{{ content }}
25 | deno task dev16 | 17 | To deploy to deno.deploy you just need to [sign up for an account](https://deno.com/deploy), then once logged in you can create a new project and point it to your github repo. 18 | -------------------------------------------------------------------------------- /src/_includes/_footer.vto: -------------------------------------------------------------------------------- 1 | 11 | 12 | {{- css }} 13 | .footer { 14 | margin-top: var(--space-3); 15 | padding: var(--space) var(--space-2); 16 | display: flex; 17 | justify-content: space-between; 18 | align-items: baseline; 19 | } 20 | .footer ul{ 21 | margin: 0; padding: 0; 22 | display: flex; 23 | gap: var(--space-2); 24 | list-style: none; 25 | } 26 | {{ /css }} 27 | 28 | -------------------------------------------------------------------------------- /server/main.ts: -------------------------------------------------------------------------------- 1 | import { Application, Router } from "@oak/oak"; 2 | 3 | const app = new Application(); 4 | 5 | // First we try to serve static files from the _site folder. If that fails, we 6 | // fall through to the router below. 7 | app.use(async (ctx, next) => { 8 | try { 9 | await ctx.send({ 10 | root: `${Deno.cwd()}/_site`, 11 | index: "index.html", 12 | }); 13 | } catch { 14 | next(); 15 | } 16 | }); 17 | 18 | const router = new Router(); 19 | 20 | // After creating the router, we can add it to the app. 21 | app.use(router.routes()); 22 | app.use(router.allowedMethods()); 23 | 24 | console.log("✨ Server ready! Browse at http://localhost:8000 ✨"); 25 | 26 | await app.listen({ port: 8000 }); -------------------------------------------------------------------------------- /src/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Esm in 11ty 3 | slug: 11ty 4 | layout: layout.vto 5 | --- 6 | 7 | ## 11ty 8 | 9 | Now that Eleventy supports ESM (from version 3.x), it means we can use it in places we couldn’t previously. 10 | 11 | ## Htmx 12 | 13 | Not really necessary to get you running on deno.deploy, but I like what this project sets out to achieve and it pairs great with Eleventy so that you can request pages without full page reloads. (pretty easily done with minimal changes to your templates). 14 | 15 | ## Deno 16 | 17 | Deno is a fast, secure and great alternative to Node and now supports most of the node ecosystem, so it seems like a great time to try and bring the two together in a starter project, and that’s exactly what this is. You can host statically on Deno, but then there’s room to do server stuff too if you want. 18 | 19 | 20 | -------------------------------------------------------------------------------- /deno.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "deno.ns"] 4 | }, 5 | "tasks": { 6 | "clean": "rm -rf _site", 7 | "eleventyWatch": "deno run --allow-sys --allow-run --allow-read --allow-write --allow-env --allow-ffi npm:@11ty/eleventy@^3.1.2 --watch", 8 | "generate": "deno task clean && deno run --allow-read --allow-write --allow-env --allow-sys --allow-ffi npm:@11ty/eleventy@^3.1.2", 9 | "dev": "deno task eleventyWatch & deno run --watch --allow-net --allow-read --unstable-kv --allow-ffi server/main.ts", 10 | "prod": "deno task generate" 11 | }, 12 | "imports": { 13 | "@11ty/eleventy": "npm:@11ty/eleventy@^3.1.2", 14 | "@11ty/eleventy-plugin-bundle": "npm:@11ty/eleventy-plugin-bundle@^3.0.7", 15 | "@oak/oak": "jsr:@oak/oak@^17.2.0", 16 | "eleventy-plugin-vento": "npm:eleventy-plugin-vento@^5.2.1" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/_includes/_loader.vto: -------------------------------------------------------------------------------- 1 |