Benvido ao 🔥 Lume e Xeo 🧊
Welcome to 🔥 Lume + Xeo 🧊

Welcome to Xeo, a deluxe variant of Lume Simple Blog.

Visit xeo.land for the live demo.

Release Notes (Contributions welcome: famebot/xeo on GitHub)

© 2022-2025 Óscar Otero & Ricky de Laveaga; MIT License

Quick start 🎬

Once you install Deno, the fastest and easiest way to configure this theme is the Lume init command, which you can also copy easily from the Xeo theme page. Running:

deno run -A https://lume.land/init.ts --theme=xeo

will create a new project with Xeo configured.

Build + dev commands 🛠️

• deno task serve to start a local server

• deno task d also runs deno task lume -s, if you are into the whole brevity thing.

• deno task lup upgrades Lume via deno task lume upgrade

• deno task up upgrades dependencies with nudd

Personalize Xeo 💅

Edit the _data.yml file in your blog root folder with your data to customize the site title, description, and metadata.

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.

ℹ️ 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 🔤

Xeo uses Lume’s Google Fonts plugin in plugins.ts to set display (for larger sized headings and titles) and text (normal body and smaller sizes) typefaces from the Google Font Library.

By default, Xeo sets Bebas Neue for display and Lexend for text. Preview Bebas Neue + Lexend at xeo.land.

To configure which Google fonts Xeo uses, provide an object with options to the 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:[email protected]",
    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.

ℹ️ Discover how to find the correct “share page link”, or URL, for your font choices.

Color 🎨

Like with fonts above, to configure which colors Xeo uses, provide an object with options to the theme:

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.

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 ✍️

💡 Use LumeCMS to customize the blog and add content easily.

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.

Install as a remote theme 🛰️

To add the theme to an existing Lume project, import it in your _config.ts file as a remote module. Update it by changing the version number in the import URL:

import lume from "lume/mod.ts";
import xeo from "https://deno.land/x/[email protected]/mod.ts";

const site = lume();

site.use(xeo());

export default site;

Copy the _data.yml file to your blog root folder and edit it with your data.

Use Xeo as a base template 🧱

To use this theme as a base template for a more customized blog, clone famebot/xeo on GitHub and edit the _data.yml file.

Explore Lume 🧭

• Browse Lume documentation

• Propose new ideas and get help at Discord

• View Lume source code and report issues

• View the Simple Blog source code and report issues

• Support Lume development ❤️‍🔥