Monday, 5 February 2024 - Amsterdam

Deploy Astro Static on Deno Deploy

This is a blog site built with Astro. It was hosted elsewhere but I wanted to deploy it on Deno deploy. According to Astro’s documentation at the time activating server side rendering was required.


// astro.config.mjs
import { defineConfig } from 'astro/config';
import deno from '@astrojs/deno';

export default defineConfig({
  output: 'server',
  adapter: deno(),
});

Up until now the blog had been built at build time and deployed as a static site. Server Side Rendering (SSR) seemed like overkill since the blog does not use any features that require it.

Deno cloud deploy basic analytics

Deno cloud deploy offers some basic analytics that I could benefit from.

Deploy a static site on Deno deploy

There is this option to deploy a static site on Deno Deploy. Note that it does not specifically mention Astro. However using this feature we can also deploy a static astro site.

When running a deno site, it needs to be pointed to the .ts file that will start the app. Since this is a static site, the start file is index.html most likely in ./dist where the build script has output the build-time results.

Using the information from the linked article, build the site, then cd into the dist folder. deployctl used for the deployment will upload the contents of the folder that it’s run in. It will need to be installed first as described in the CLI deployment documentation. So run it from the ./dist folder to only upload the contents of that folder.

To make it easy, add this script to your package.json.

// package.json
{ 
    "scripts": {
        "deploy:deno": "npm run build && cd dist && deployctl deploy",
    }
}

deno.json

deno.json is not mandatory but it helps. to make the script a bit more readable. In it, configure the parameters required by deno when deploying.

// deno.json
{
    "deploy": {
        "project": "<your_project_id_in_deno_deploy>",
        "exclude": ["**/node_modules"],
        "include": [],
        "entrypoint": "https://deno.land/std@0.211.0/http/file_server.ts"
    }
}

The entrypoint here allows for the use of a static file server. Essentially, the files in the ./dist folder will be statically served by file_server.ts.

Command line

As indicate the deno.json is optional. It’s feasible to run the entire command directly from the terminal.


deployctl deploy \ 
--project <your_project_id_in_deno_deploy> \
--exclude "**/node_modules" \
--entrypoint "https://deno.land/std@0.211.0/http/file_server.ts"

Optional

Use --prod to deploy directly to production. By default Deno deploy creates a preview deploy which can be promoted to production after testing.