Xeo + LumeCMS from Scratch

by Ricky de Laveaga

3 min read

🏷️ CMS Lume Xeo

Xeo in the front LumeCMS in the back patio 🥶❤️‍🔥

Get LumeCMS + Xeo

  1. Install Deno
  2. Lume + Xeo init command:
deno run -A https://lume.land/init.ts --theme=xeo
  1. Edit the _data.yml file in your blog root folder with your data to customize the site title, description, and metadata.

Tip

You can use LumeCMS to customize the blog and add content easily.

  1. Configure and design your site further, see below.
  2. Deploy CMS to VPS
  3. Deploy public site

Domains and URLs

The location (aka web address, “the public URL of the site”) depends on the environment (development, production) and can be changed dynamically from the CLI (deno task serve --location=https://example.com). We encourage you to either configure location dynamically, as Xeo does for xeo.land (in deno.json and netlify.toml), or to set location in _config.ts as lume.land does. The default value is https://localhost.

Note

You may also want to set the local server port. For even more flexibility in local development, Lume 2.5.1 added a new --hostname argument to lume --serve and lume cms to change the default localhost value there as well.

Typography

To configure which Google fonts Xeo uses, provide a fonts object with display and/or text options to xeo in your _config.ts:

import lume from "lume/mod.ts";
import xeo from "xeo/mod.ts";

const site = lume();

site.use(xeo({
  fonts: {
    display:
      "https://fonts.google.com/share?selection.family=Playpen+Sans:wght@100..800",
    text:
      "https://fonts.google.com/share?selection.family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900",
  },
}));

export default site;

Visit xogo.xeo.land to see the change resulting from the configuration above, which pairs Playpen & Poppins for a fun, playful vibe. Preview the defaults, Bebas Neue + Lexend, at xeo.land.

Xogo means play or game in Galician, like Xeo means ice and Lume means fire. The source code powering the example is in the xogo branch on GitHub.

Note

Discover how to find the correct “share page link”, or URL, for other font choices and learn more about Xeo’s typography in Differences between Xeo and Simple Blog.

Color

Like with fonts above, to configure which colors Xeo uses, provide xeo with a colors object with the options you want to override in your _config.ts:

import lume from "lume/mod.ts";
import xeo from "xeo/mod.ts";

const site = lume();

site.use(xeo({
  colors: {
    hue: 288,
    complement: 108,
    analogous: 154,
  },
}));

export default site;

Visit xogo.xeo.land to see the change resulting from the configuration above.

See the defaults in plugins.ts for a list of all colors options.

Blogging

Posts must be saved in the posts folder (for example, posts/my-first-post.md). Unlike Simple Blog, Xeo serves them from the root directory, by setting basename to / in posts/_data.yml.

CMS

Like Simple Blog, Xeo includes LumeCMS to edit your site easily in a web browser. You can run LumeCMS locally or publish it alongside your built site, ideally deployed to a VPS.

Search the archive