How to install Xeo

by Ricky de Laveaga

4 min read

Xeo is Ricky de Laveaga’s variant of Simple Blog by Óscar Otero, a clean and minimal blog theme for Lume with support for tags and authors. Simple Blog and Xeo both provide Atom and JSON feeds for subscribers.

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.

Personalize Xeo

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.

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 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({
  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.

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.