Options

Configure LumeCMS instance

LumeCMS instantation accepts an object with some configuration options:

import lumeCMS from "lume/cms/mod.ts";

const cms = lumeCMS({
  /* Options */
});

The available options are:

Basic options

root

This is the root directory of the site you want to edit. Lume automatically set this value to the src folder. It's used to file system storage when it's defined as a string.

Note

If you do not specify a root option, the CMS will use Deno.cwd() to get the current working directory. Some Deno platforms (like Netlify edge-functions) do not support Deno file system access and will fatally error when Deno.cwd() is executed. Provide an empty string "" as the root option to avoid this.

basePath

The public base path of the CMS. Lume automatically set this value to /admin.

site

This is an object to configure the CMS website. You can assign a name, a description, URL and a body, that will be visible in the homepage:

import lumeCMS from "lume/cms/mod.ts";

const cms = lumeCMS({
  site: {
    name: "My blog CMS",
    description: "Here I can edit the content of my blog",
    url: "https://myblog.com",
    body: `
    <p>Long text, for instructions or other content that you want to make it visible in the homepage</p>
    `,
  },
});

data

It's where you can pass arbitrary data to use later inside the fields. Lume automatically insert the lume instance. More info at Fields configuration

extraHead

A string that you can use to include extra HTML code in the CMS. Useful to customize the appearance:

const cms = lumeCMS({
  extraHead: `
<style>
  body {
    color: pink;
  }
</style>
  `,
});

previewURL

A function to return the preview URL for a file. For example, if we know that the file /posts/hello-world.md produces the URL /posts/hello-world/, we can display this URL in the preview panel when the file is being edited.

Lume set this option automatically but it can be useful if you're using the CMS without Lume.

const cms = lumeCMS({
  previewUrl(path: string) {
    if (path === "/index.md") return "/";
    if (path === "/about.md") return "/about/";
  }
});

sourcePath

It's the opposite to previewURL: return the source file for a specific URL. This allows to generate URLs like /admin/?edit=/posts/hello-world/ and the CMS opens the form to edit the source file of the URL.

Lume set this option automatically but it can be useful if you're using the CMS without Lume.

const cms = lumeCMS({
  sourcePath(url: string) {
    if (url === "/") return "/index.md";
    if (url === "/about/") return "/about.md";
  }
});
Edit this page