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.