Custom Templates
Design your blog down to the last div. Write your template in plain HTML, preview it on your real posts, and publish. Core Web Vitals stay intact.
What are custom templates?
Superblog ships with a gallery of professionally designed templates. Most teams pick one, set their brand colors, and launch. But if your brand needs a design that is entirely yours, you can replace the whole theme with a custom template: every page type, the navigation, and the footer, written by you in plain HTML.
Custom templates are built with the Superblog CLI, a developer tool that gives you a live preview of your template rendered on your own posts. Save a file and the page reloads. Your live blog is untouched until you deploy.
You do not need to be a designer to use it. Point Claude or Codex at the docs folder inside your template and ask it to build a Superblog template that follows your brand's design guidelines. The docs include a machine-readable reference written for coding assistants, so the AI writes against the real contract instead of guessing.
How to create a Superblog template
1. Install the CLI and log in.
npm i -g @superblog/cli
superblog loginLogin opens your browser. Approve the machine, pick your site, and you are done. No API key to copy; the credential is stored locally on your machine.
2. Start a dev session.
mkdir my-template && cd my-template
superblog template devIn an empty folder, the CLI offers to scaffold a starter template. It then builds your real site with that template and gives you a live preview URL. Edit any file, save, and the page reloads with your change. Your readers never see any of this; the preview is separate from your live blog.
3. Write the design, by hand or with AI.
A view is plain markup with variables. No build step, no framework:
<h1>{{ title }}</h1>
<div class="prose">{{ content | safe }}</div>Working with a coding assistant? The scaffolded template includes a docs/ folder with the full template reference, including an LLMS.md file written for AI tools. Tell Claude or Codex to read it and build your design. It gets every variable, every page type, and every rule, so the template it writes validates and builds.
4. Preview everything, then publish.
superblog template preview
superblog template deployA dev session builds a subset of posts for speed. preview builds every post at a preview URL, so it is the final check. deploy publishes. Nothing your readers see changes until that moment.
What a template looks like
views/ one file per page type (homepage, post, category, ...)
partials/
nav.html your site navigation
footer.html your site footer
assets/ your CSS, JS, and images
docs/ the full guide, plus an AI-readable reference
template.json one decision: our stylesheet or your own CSSA template covers all ten page types: homepage, posts, pages, categories, tags, authors, search, and the 404 page. Your stylesheets and scripts in assets/ load on every page automatically, and your CSS is linked after ours, so yours wins.
Your SEO and speed are protected
The SEO layer is untouchable. The <head>, meta tags, canonical URLs, structured data, and fonts are handled by Superblog and are not reachable from a template. Nothing you write can break your rankings.
Broken templates never ship. Every build validates your template. Errors name the file, the line, and what is wrong. A template that fails validation stops the deploy instead of publishing a design you did not ask for.
Core Web Vitals stay intact. Your template compiles into the same static architecture as every Superblog theme: pre-built pages served from a global CDN, optimized images, no client-side rendering. A custom design does not cost you your Lighthouse score.
Availability
Custom templates are available on the Super plan and above. See pricing for details, or grab the CLI from npm and run superblog template dev to try the workflow.
Ready to get started?
Join the companies using Superblog to publish content that ranks.