---
title: How to install Xeo
date: "2025-12-30T13:00Z"
author: Ricky de Laveaga
tags:
  - Instructions
  - Lume
  - Xeo
draft: false
---

Once you
[install Deno](https://docs.deno.com/runtime/getting_started/installation/), the
**fastest and easiest** way to configure this theme is the
[Lume init command](https://github.com/lumeland/init), which you can also copy
easily from the [Xeo theme page](https://lume.land/theme/xeo/). Running:

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

will create a new project with Xeo configured.

<!--more-->

> [!note]
>
> **Xeo** began as a variant of the
> [**Simple Blog**](https://lume.land/theme/simple-blog/) theme for
> [**Lume**](https://lume.land/) by [Óscar Otero](https://oscarotero.com/). 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&nbsp;theme.
>
> Starting with Xeo 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&nbsp;Xeo.

## Personalize Xeo

Edit the [`_data.yml`](https://github.com/famebot/xeo/blob/trunk/_data.yml) file
in your blog root folder with your data to customize the site title,
description, and&nbsp;metadata.

Xeo uses [Lume’s favicon plugin](https://lume.land/plugins/favicon/), and
starting with Xeo version 8.1, Xeo allows you to control the favicon plugin’s
`input` option to provide an alternate file other than the default,
`./favicon.svg`, which had been hardcoded up through version 8.0.1. Thanks to
[pamubay on GitHub](https://github.com/pamubay) for raising
[this issue](https://github.com/famebot/xeo/issues/45) in
[Lume GitHub&nbsp;discussions](https://github.com/lumeland/lume/discussions/814).

> [!note]
>
> [Accepted formats](https://github.com/lumeland/lume/blob/main/plugins/favicon.ts)
> are **SVG, PNG, JPG, GIF, BMP, TIFF,&nbsp;WEBP**

Xogo ([live site](https://xogo.xeo.land/) /
[code](https://github.com/famebot/xeo/tree/xogo)) demonstrates all the
customization options,&nbsp;including:

- using an alternate favicon file (`/favicon.png`),
- customizing the logo (`/logo.svg`),
- fonts (Playpen & Poppins, see [Typography](#typography) below),
- and custom colors.

[**Xogo** means _play_ or _game_](https://translate.google.com/?sl=gl&tl=en&text=Xogo&op=translate)
in Galician, like
[**Xeo** means _ice_](https://translate.google.com/?sl=gl&tl=en&text=Xeo&op=translate)
and
[**Lume** means _fire_](https://translate.google.com/?sl=gl&tl=en&text=Lume&op=translate).

> [!tip]
>
> You can use [LumeCMS](#cms) to customize the blog and add content&nbsp;easily.

### Domains and URLs

The [`location`](https://lume.land/docs/configuration/config-file/#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](https://xeo.land)
(in [`deno.json`](https://github.com/famebot/xeo/blob/trunk/deno.json) and
[`netlify.toml`](https://github.com/famebot/xeo/blob/trunk/netlify.toml)), or to
set `location` in
[`_config.ts`](https://github.com/lumeland/lume.land/blob/2f6da036fb0be93d9689ca29bb87c57c08b7f560/_config.ts)
as [lume.land](https://lume.land/) does. The default value is
[`https://localhost`](https://lume.land/docs/advanced/cheatsheet/#lume-instantiation).

> [!note]
>
> You may also want to set the local server
> [`port`](https://lume.land/docs/configuration/config-file/#port). For even
> more flexibility in local development,
> [Lume 2.5.1](https://github.com/lumeland/lume/blob/v2.5.1/CHANGELOG.md#251---2025-01-28)
> added a new `--hostname` argument to
> [`lume --serve`](https://lume.land/docs/overview/command-line/#start-a-local-server)
> and [`lume cms`](https://lume.land/cms/#run-in-localhost) to change the
> default `localhost` value there as&nbsp;well.

### Typography

To [**configure which Google fonts Xeo uses**](/differences/#typography),
provide a `fonts` object with `display` and/or `text` options to `xeo` in your
`_config.ts`:

```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](https://xogo.xeo.land/)** to see the change resulting
from the configuration above, which pairs
[Playpen](https://fonts.google.com/specimen/Playpen+Sans) &
[Poppins](https://fonts.google.com/specimen/Poppins) for a fun, playful vibe.
Preview the defaults,
[Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) +
[Lexend](https://fonts.google.com/specimen/Lexend),
at&nbsp;**[xeo.land](https://xeo.land/).**

The source code powering the example is in the
[`xogo` branch on&nbsp;GitHub](https://github.com/famebot/xeo/blob/xogo/_config.ts).

> [!note]
>
> Discover how to
> [**find the correct “share page link”**](/differences/#typography), or URL,
> for other font&nbsp;choices and learn more about Xeo’s typography in
> [Differences between Xeo and Simple&nbsp;Blog](/differences/#typography).

### 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`:

```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](https://xogo.xeo.land/)** to see the change resulting
from the configuration&nbsp;above.

See the defaults in
[`plugins.ts`](https://github.com/famebot/xeo/blob/trunk/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`](https://lume.land/docs/creating-pages/urls/#basename) to `/`
in&nbsp;[`posts/_data.yml`](https://github.com/famebot/xeo/blob/trunk/posts/_data.yml).

To change the name of the archives in both the URL and in the site navigation,
customize `archives.basename` in `_data.yml`, and remember to also change
`archive_title` in `_data/i18n.yml` to title-case version of
`archives.basename`. [Xogo does this](https://xogo.xeo.land/updates/), setting
`archives.basename` in
[`_data.yml`](https://github.com/famebot/xeo/blob/xogo/_data.yml) to `updates`
and `archive_title` in
[`_data/i18n.yml`](https://github.com/famebot/xeo/blob/xogo/_data/i18n.yml)
to&nbsp;`Updates`.

### CMS

Like Simple Blog, Xeo includes [LumeCMS](https://lume.land/cms) to edit your
site easily in a web browser. You can
[run LumeCMS locally](https://lume.land/cms/#run-in-localhost) or publish it
alongside your built site, ideally
[deployed to a&nbsp;VPS](https://lume.land/cms/deployment/vps/).

## Install as a remote theme

To add the theme to an existing Lume project, add Xeo to imports in `deno.json`
then import it in your `_config.ts` file as a remote module. Update it by
changing the version number in the import URL (or by using
[Nudd](https://www.jsdelivr.com/package/gh/oscarotero/nudd) by
[Óscar Otero](https://oscarotero.com/) like Xeo and Xogo both&nbsp;do):

`deno.json`:

```json
// […]
"imports": {
    "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3.2.6/",
    // […]
    "xeo/": "https://cdn.jsdelivr.net/gh/famebot/xeo@8.1.0/"
  },
  // […]
```

`_config.ts`:

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

const site = lume();

site.use(xeo());

export default site;
```

Copy the [`_data.yml`](https://github.com/famebot/xeo/blob/trunk/_data.yml) file
to your blog root folder and edit it with your&nbsp;data.

## Use Xeo as a base template

To use this theme as a base template for a more customized blog, clone
[famebot/xeo](https://github.com/famebot/xeo) on GitHub and edit the
[`_data.yml`](https://github.com/famebot/xeo/blob/trunk/_data.yml)&nbsp;file.