🧊 Xeo for Lume 🔥

Welcome to Xeo, a splendid Lume theme.

Visit xeo.land for the live demo.

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

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

📇 Sites built with Xeo ❄️

• Artist Activist

• Ricky de Laveaga

Migration steps for versions 7 and lower

Version 8 introduced more customization options that need to be set when you upgrade.

1. Set these new options in _data.yml to configure them:

   • home.posts (default: 3) - The number of recent posts shown on the home page.

   • archives.posts (default: 12) - The number of posts shown on archive pages.

   • archives.tag (default: 10) - The number of posts shown on tag pages.

   • archives.author (default: 10) - The number of posts shown on author pages.

   • archives.basename (default: archive) - The path/slug of the post archive. (The “Archive” title is set by i18n.nav.archive_title in _data/i18n.yml, which you can create a copy of in your Xeo site to add, customize, or override values. The search box label, i18n.nav.archive_search, is also set there.)

2. Rename logo options in _data.yml

   • logo is now logo.svg (default is still: /favicon.svg)

   • logo_height is now logo.height (default is still: 48)

Note

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.

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 (short for dev, or develop) and deno task s also run serve, if you are into the whole brevity thing.

• deno task lup upgrades Lume via deno task lume upgrade

• deno task up upgrades dependencies (including Lume) with nudd

• View entire deno.json configuration file.

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

💡 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 ❤️‍🔥