Deployment

How to deploy a site built with Lume.

Deploy manually with rsync

This is the simplest way to deploy a site: just build the site and upload it to your server with rsync. An easy way is by creating a deno task in the deno.json file:

{
  "importMap": "import_map.json",
  "tasks": {
    "build": "deno task lume",
    "serve": "deno task lume -s",
    "lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
    "deploy": "deno task build && rsync -r _site/ [email protected]:~/www"
  }
}

In addition to the regular Lume task, we have added a new task, named deploy that executes two commands: It builds the site and uploads it to the server. Now, to build and deploy your site, just run:

deno task deploy

GitHub Pages

To deploy a Lume site using GitHub Pages, go to Settings > Pages in your repo, configure the source to use GitHub Actions and create the following workflow:

name: Publish on GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Clone repository
        uses: actions/checkout@v4

      - name: Setup Deno environment
        uses: denoland/setup-deno@v2

      - name: Build site
        run: deno task build

      - name: Setup Pages
        uses: actions/configure-pages@v5

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: "_site"

      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

GitLab Pages

To deploy a Lume site using GitLab Pages, set a CI/CD configuration with the following code:

image: denoland/deno

stages:
  - pages

pages:
  stage: pages
  script: deno task build --dest=public

  artifacts:
    paths:
      - public

The --dest=public argument in the build command sets the destination folder as ./public. This is the folder that GitLab uses to publish the site. This argument is not needed if you have defined the dest folder in the config file.

Deno Deploy

Deno Deploy is a distributed deploy system provided by Deno with support for static files. It requires having your repo in GitHub.

  • Sign up in Deno Deploy and create a new project.
  • Configure the Git integration to use the GitHub Actions deployment mode.
  • In your repository, you need an entrypoint file to serve the files. Create the file serve.ts with the following code:
import Server from "lume/core/server.ts";

const server = new Server({
  port: 8000,
  root: `${Deno.cwd()}/_site`,
});

server.start();

console.log("Listening on http://localhost:8000");
  • Create the following GitHub workflow, replacing project-name with the name of your project in Deno Deploy.
name: Publish on Deno Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      id-token: write
      contents: read

    steps:
      - name: Clone repository
        uses: actions/checkout@v4

      - name: Setup Deno environment
        uses: denoland/setup-deno@v2

      - name: Build site
        run: deno task build

      - name: Deploy to Deno Deploy
        uses: denoland/deployctl@v1
        with:
          project: project-name
          import-map: "./deno.json"
          entrypoint: serve.ts

Netlify

According the "Available software at build time" page at Netlify's documentation website, Deno is one of several supported runtimes at build time. In order to build your project, you'll need to tell Netlify which command to run at build time, which is deno task build in this case.

Create netlify.toml file in your repository with the following code:

[build]
  publish = "_site"
  command = "deno task build"

Vercel

Vercel, doesn't have Deno available by default so the build command must install it.

curl -fsSL https://deno.land/x/install/install.sh | sh && /vercel/.deno/bin/deno task build

Remember also to configure the output directory to _site.

Fleek

To deploy your Lume site with Fleek, create a .fleek.json file in your repository with the following code:

{
  "build": {
    "image": "denoland/deno",
    "command": "deno task build",
    "publicDir": "_site"
  }
}

Cloudflare Pages

To deploy your Lume site with Cloudflare Pages, configure the build command as follow:

curl -fsSL https://deno.land/x/install/install.sh | sh && /opt/buildhome/.deno/bin/deno task build

Remember to configure the output directory to _site.

Render

To deploy your Lume site with Render, create a new Static Site project and configure the build command as follow:

curl -fsSL https://deno.land/x/install/install.sh | sh && /opt/render/.deno/bin/deno task build

Configure the output directory to _site.

AWS Amplify

To deploy your Lume site with AWS Amplify create a amplify.yml file with the following code:

version: 1
frontend:
  phases:
    build:
      commands:
        - curl -fsSL https://deno.land/x/install/install.sh | sh
        - /root/.deno/bin/deno task build
  artifacts:
    baseDirectory: /_site
    files:
      - "**/*"
  cache:
    paths: []

Remember to ignore amplify.yml file in the Lume _config.ts file. If you don't want to create this file in your repository, you can configure it in the AWS control panel.

Kinsta

Kinsta is a hosting service that allows to host up to 100 static sites for free. Due Kinsta only has support for Node, to host a Lume site you need to create the following package.json file:

{
  "scripts": {
    "build": "deno task lume"
  },
  "devDependencies": {
    "deno-bin": "^1.37.2"
  }
}

In the project settings, configure the build command to npm run build and the publish directory to _site.

Kinsta provides this nice template that you can use.

Surge

Surge is a CLI-based static web publishing host with unlimited sites and custom domain. To upload your site on Surge, you need to install first the CLI tool with npm install --global surge. Then, in the _dest directory, run surge to login/register and upload the site.