To recap How to install Xeo:

Xeo began as a variant of the Simple Blog theme for Lume by Óscar Otero. Over time, eventually Xeo diverged substantially enough from Simple Blog that Óscar and Ricky agreed it was time for Xeo to become a fully stand-alone theme.

Starting with version 7, Xeo no longer depends on Simple Blog as its parent theme. Because Xeo is no longer a child theme, using Xeo as a parent theme to make your own child theme just got easier. Another bonus of the split is that Simple Blog can now freely implement features that landed in Xeo first (like custom fonts and colors) without having to worry about compatibility issues with Xeo or downstream themes and sites that depend on Xeo.

Where do they diverge?

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. You can customize this when you personalize your copy of Xeo.

• To get the correct URL for your display and text font choices, I recommend selecting the “Get font” button at the top right on the specimen page, which will take you the selection page where you can select the “Share” button and then the “Copy share page link” button, which shows a copy icon that looks like one rectangle stacked on top of another rectangle. The share button should be underneath the text “1 font family selected.” Use the “Remove all” button to clear each choice before selecting another, so the share page links stay separate.

• If you are looking for more options, Poppins is an alternative to Lexend we considered for Xeo. The example custom font site, xogo.xeo.land, showcases the fun, playful pairing of Poppins & Playpen. 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. We chose Lexend over Poppins because variable fonts have performance benefits since they combine many different variations of a typeface into a single file, reducing requests.

• You can browse variable Google fonts or learn about Pairing and Combining Typefaces for inspiration and wisdom. Learn more about Xeo’s typography in How to install Xeo.

Design

• Spacing: Xeo adjusts spacing around various elements, particularly page headers and the search box, which is relocated to the bottom of pages to reduce layout shift when search results appear.

• Color: Xeo has a foundation that will lead to eventual support of Rainbow Mode powered by Chromagen, like Xeo’s predecessor eleventeen. Chromagen generated Xeo’s current color schemes, but has not yet been wired up to Xeo to the degree it has been integrated into eleventeen.

Front matter optional

Xeo uses Lume’s Extract date plugin to parse dates and titles from filenames.

You have to prepend the date to the filename using the yyyy-mm-dd syntax followed by a hyphen - or an underscore _ (or yyyy-mm-dd-hh-ii-ss if you also need the time). Note that [the date] is removed [by default] when generating the final url […] Dates can be defined in folders, so it's shared by all pages inside […]

– Extract date, lume.land

The date must be at the beginning and complete. The trailing hyphen or underscore following the date and preceding the title is required by Extract date. Providing the time is optional. There is a draft in the example posts that tests the scenario with a date and title in the filename and supplies 13:00, as -13-00-00 at the end. This gets around most time offsets from UTC that cause the date to shift in certain time zones, most often in New Zealand, Kiribati, Samoa, Tonga, and USA Minor Outlying Islands.

The No title and 2025-12 solstice example posts both have date and author in the front matter. With No title, the title in the built site comes from the basename of the no-title folder containing the index.md file. Because the partial, incomplete date in the 2025-12-solstice.md source filename does not have a day value, it gets parsed as part of the title, 2025-12 solstice.

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

will create a new project with Xeo configured.

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.

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.

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.

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/xeo@v5.0.0/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.

Front matter optional

You have to prepend the date to the filename using the yyyy-mm-dd syntax followed by a hyphen - or an underscore _ (or yyyy-mm-dd-hh-ii-ss if you also need the time). Note that [the date] is removed [by default] when generating the final url […] Dates can be defined in folders, so it's shared by all pages inside […]

– Extract date, lume.land

Since the current implementation uses a negative lookahead to remove hyphens that do not precede digits 0-9, solstice-2025-12.md would end up keeping the hyphen and render as “Solstice-2025-12” compared to “2025-12 solstice” here. I consider this inconsistency a limitation I can live with for now. There is a draft in the example posts that tests the scenario with a date and title in the filename.

With No title, the title in the built site comes from the basename of the no-title folder containing the index.md file.

There is a draft in the example posts that tests the scenario with a date and title in the filename. In the 2025-12 solstice filename (2025-12-solstice.md) the partial, incomplete date gets parsed as part of the title because it lacks a day value.