Wondering how Xeo differs from\nSimple Blog? This post is\nfor you!
\n\nTo recap How to install Xeo:
\n\n\nXeo began as a variant of the\nSimple Blog theme for\nLume by Óscar Otero. Over\ntime, eventually Xeo diverged substantially enough from Simple Blog that Óscar\nand Ricky agreed it was time for Xeo to become a fully stand-alone theme.
\nStarting with version 7, Xeo no longer depends on Simple Blog as its parent\ntheme. Because Xeo is no longer a child theme, using Xeo as a parent theme to\nmake your own child theme just got easier. Another bonus of the split is that\nSimple Blog can now freely implement features that landed in Xeo first (like\ncustom fonts and colors) without having to worry about compatibility issues\nwith Xeo or downstream themes and sites that depend on Xeo.
\n
Where do they diverge?
\nTip
\nLume’s Google Fonts plugin needs the share page link, or share URL, not\nthe embed code.
\nXeo uses Lume’s Google Fonts plugin\nin plugins.ts to set\ndisplay (for larger sized headings and titles) and text (normal body and\nsmaller sizes) typefaces from the\nGoogle Font Library.
By default, Xeo sets\nBebas Neue for display and\nLexend for text. Preview Bebas\nNeue + Lexend at xeo.land. You can customize this\nwhen you personalize your copy of Xeo.
\nTo get the correct URL for your display and text font choices, I recommend\nselecting the “Get font” button at the top right on the specimen page, which\nwill take you the selection page where\nyou can select the “Share” button and then the “Copy share page link” button,\nwhich shows a copy icon that looks like one rectangle stacked on top of\nanother rectangle. The share button should be underneath the text “1 font\nfamily selected.” Use the “Remove all” button to clear each choice before\nselecting another, so the share page links stay separate.
If you are looking for more options,\nPoppins is an alternative to\nLexend we considered for Xeo. The example custom font site,\nxogo.xeo.land, showcases the fun, playful\npairing of Poppins &\nPlaypen.\nXogo means play or game\nin Galician, like\nXeo means ice\nand\nLume means fire.\nThe source code powering the example is in the\nxogo branch on GitHub.\nWe chose Lexend over Poppins because\nvariable fonts\nhave performance benefits since they combine many different variations of a\ntypeface into a single file, reducing requests.
You can browse variable Google fonts\nor learn about\nPairing\nand\nCombining Typefaces\nfor inspiration and wisdom. Learn more about Xeo’s typography in\nHow to install Xeo.
\nSpacing: Xeo adjusts spacing around various elements, particularly page\nheaders and the search box, which is relocated to the bottom of\npages to reduce layout shift when search results appear.
\nColor: Xeo has a\nfoundation that will\nlead to eventual support of\nRainbow Mode powered by\nChromagen, like Xeo’s predecessor\neleventeen. Chromagen generated Xeo’s\ncurrent color schemes, but has not yet been wired up to Xeo to the degree it\nhas been integrated into eleventeen.
\nXeo uses Lume’s Extract date plugin\nto parse dates and titles from filenames.
\n\n\n\nYou have to prepend the date to the filename using the
\nyyyy-mm-ddsyntax\nfollowed by a hyphen-or an underscore_(oryyyy-mm-dd-hh-ii-ssif you\nalso need the time). Note that [the date] is removed [by default] when\ngenerating the final url […] Dates can be defined in folders, so it's shared\nby all pages inside […]
The date must be at the beginning and complete. The trailing hyphen or\nunderscore following the date and preceding the title is required by Extract\ndate. Providing the time is optional. There is a draft in the example posts that\ntests the scenario with a date and title in the filename and supplies 13:00, as\n-13-00-00 at the end. This gets around most\ntime offsets from UTC that\ncause the date to shift in certain time zones, most often in New Zealand,\nKiribati, Samoa, Tonga, and USA Minor Outlying Islands.
The No title and 2025-12 solstice example\nposts both have date and author in the\nfront matter. With\nNo title, the title in the built site comes from the\nbasename of the\nno-title folder containing the index.md file. Because the partial,\nincomplete date in the 2025-12-solstice.md source filename does not have a day\nvalue, it gets parsed as part of the title,\n2025-12 solstice.
Once you\ninstall Deno, the\nfastest and easiest way to configure this theme is the\nLume init command, which you can also copy\neasily from the Xeo theme page. Running:
\ndeno run -A https://lume.land/init.ts --theme=xeo\nwill create a new project with Xeo configured.
\n\nNote
\nXeo began as a variant of the\nSimple Blog theme for\nLume by Óscar Otero. Over\ntime, eventually Xeo diverged substantially enough from Simple Blog that Óscar\nand Ricky agreed it was time for Xeo to become a fully stand-alone theme.
\nStarting with Xeo version 7, Xeo no longer depends on Simple Blog as its\nparent theme. Because Xeo is no longer a child theme, using Xeo as a parent\ntheme to make your own child theme just got easier. Another bonus of the split\nis that Simple Blog can now freely implement features that landed in Xeo first\n(like custom fonts and colors) without having to worry about compatibility\nissues with Xeo or downstream themes and sites that depend on Xeo.
\nEdit the _data.yml file\nin your blog root folder with your data to customize the site title,\ndescription, and metadata.
Xeo uses Lume’s favicon plugin, and\nstarting with Xeo version 8.1, Xeo allows you to control the favicon plugin’s\ninput option to provide an alternate file other than the default,\n./favicon.svg, which had been hardcoded up through version 8.0.1. Thanks to\npamubay on GitHub for raising\nthis issue in\nLume GitHub discussions.
Note
\nAccepted formats\nare SVG, PNG, JPG, GIF, BMP, TIFF, WEBP
\nXogo (live site /\ncode) demonstrates all the\ncustomization options, including:
\n/favicon.png),/logo.svg),Xogo means play or game\nin Galician, like\nXeo means ice\nand\nLume means fire.
\nTip
\nYou can use LumeCMS to customize the blog and add content easily.
\nThe location\n(aka web address, “the public URL of the site”) depends on the environment\n(development, production) and can be changed dynamically from the CLI\n(deno task serve --location=https://example.com). We encourage you to either\nconfigure location dynamically, as Xeo does for xeo.land\n(in deno.json and\nnetlify.toml), or to\nset location in\n_config.ts\nas lume.land does. The default value is\nhttps://localhost.
Note
\nYou may also want to set the local server\nport. For even\nmore flexibility in local development,\nLume 2.5.1\nadded a new --hostname argument to\nlume --serve\nand lume cms to change the\ndefault localhost value there as well.
To configure which Google fonts Xeo uses,\nprovide a fonts object with display and/or text options to xeo in your\n_config.ts:
import lume from "lume/mod.ts";\nimport xeo from "xeo/mod.ts";\n\nconst site = lume();\n\nsite.use(xeo({\n fonts: {\n display:\n "https://fonts.google.com/share?selection.family=Playpen+Sans:wght@100..800",\n text:\n "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",\n },\n}));\n\nexport default site;\nVisit xogo.xeo.land to see the change resulting\nfrom the configuration above, which pairs\nPlaypen &\nPoppins for a fun, playful vibe.\nPreview the defaults,\nBebas Neue +\nLexend,\nat xeo.land.
\nThe source code powering the example is in the\nxogo branch on GitHub.
Note
\nDiscover how to\nfind the correct “share page link”, or URL,\nfor other font choices and learn more about Xeo’s typography in\nDifferences between Xeo and Simple Blog.
\nLike with fonts above, to configure which colors Xeo uses, provide xeo\nwith a colors object with the options you want to override in your\n_config.ts:
import lume from "lume/mod.ts";\nimport xeo from "xeo/mod.ts";\n\nconst site = lume();\n\nsite.use(xeo({\n colors: {\n hue: 288,\n complement: 108,\n analogous: 154,\n },\n}));\n\nexport default site;\nVisit xogo.xeo.land to see the change resulting\nfrom the configuration above.
\nSee the defaults in\nplugins.ts for a list\nof all colors options.
Posts must be saved in the posts folder (for example,\nposts/my-first-post.md). Unlike Simple Blog, Xeo serves them from the root\ndirectory, by setting\nbasename to /\nin posts/_data.yml.
To change the name of the archives in both the URL and in the site navigation,\ncustomize archives.basename in _data.yml, and remember to also change\narchive_title in _data/i18n.yml to title-case version of\narchives.basename. Xogo does this, setting\narchives.basename in\n_data.yml to updates\nand archive_title in\n_data/i18n.yml\nto Updates.
Like Simple Blog, Xeo includes LumeCMS to edit your\nsite easily in a web browser. You can\nrun LumeCMS locally or publish it\nalongside your built site, ideally\ndeployed to a VPS.
\nTo add the theme to an existing Lume project, add Xeo to imports in deno.json\nthen import it in your _config.ts file as a remote module. Update it by\nchanging the version number in the import URL (or by using\nNudd by\nÓscar Otero like Xeo and Xogo both do):
deno.json:
// […]\n"imports": {\n "lume/": "https://cdn.jsdelivr.net/gh/lumeland/lume@3.2.6/",\n // […]\n "xeo/": "https://cdn.jsdelivr.net/gh/famebot/xeo@8.1.0/"\n },\n // […]\n_config.ts:
import lume from "lume/mod.ts";\nimport xeo from "xeo/mod.ts";\n\nconst site = lume();\n\nsite.use(xeo());\n\nexport default site;\nCopy the _data.yml file\nto your blog root folder and edit it with your data.
To use this theme as a base template for a more customized blog, clone\nfamebot/xeo on GitHub and edit the\n_data.yml file.
This post only has the title in the filename, 2025-12-solstice.md. Because the\npartial date is incomplete and does not have a day value, it gets parsed as part\nof the title. The date (as 2025-12-21T15:03Z, the\n2025 December Solstice)\nthe author, and the tags are in\nfront matter, but there is\nno need to put a title, thanks to\nLume’s Extract date plugin.
\n\n\nYou have to prepend the date to the filename using the
\nyyyy-mm-ddsyntax\nfollowed by a hyphen-or an underscore_(oryyyy-mm-dd-hh-ii-ssif you\nalso need the time). Note that [the date] is removed [by default] when\ngenerating the final url […] Dates can be defined in folders, so it's shared\nby all pages inside […]
Since the current implementation uses a\nnegative lookahead\nto remove hyphens that do not\nprecede digits 0-9,\nsolstice-2025-12.md would end up keeping the hyphen and render as\n“Solstice-2025-12” compared to “2025-12 solstice” here. I consider this\ninconsistency a limitation I can live with for now. There is a draft in the\nexample 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\nbasename of the\nno-title folder containing the index.md file.
A post with date, author, and tags in the\nfront matter, but no title.\nThe source file named index.md is inside a folder named no-title. The\nbasename gets\ntransformed to “No title” in the built site because the index.md file works\nlike an index.html file and assumes the name of its directory.
There is a draft in the example posts that tests the scenario with a date and\ntitle in the filename. In the 2025-12 solstice filename\n(2025-12-solstice.md) the partial, incomplete date gets parsed as part of the\ntitle because it lacks a day value.