Build your own template

A custom template replaces Superblog's templates with your own HTML and CSS. You write the markup for each type of page, and Superblog fills it with your posts, categories, tags and settings.

Custom templates are available on the SUPER plan and above.

Get started

1. Install the Superblog CLI and log in:

   npm i -g @superblog/cli
   superblog login

Login opens your browser. Approve the machine and pick your blog.

2. Create an empty folder and start a live session:

   mkdir my-template && cd my-template
   superblog template dev

In an empty folder, it offers to create a starter template. It then builds your real blog with that template and gives you a live address. Save a file and the page reloads. Your live blog is not changed.

3. Check every post, then publish:

   superblog template preview
   superblog template deploy

template preview builds every post at a private preview address, removed after 3 hours. Readers see nothing until template deploy.

Commands

The CLI also has commands for signing in, checking which blog you are on, and previewing or deploying without a template. See Superblog CLI for the full list.

How a template is laid out

views/          one file per page type
partials/       nav.html, footer.html and your own snippets
assets/         your CSS, JavaScript and images
docs/           the full template guide and reference
template.json   whether you use Superblog's stylesheet or your own CSS

The full reference ships inside every template, in docs/index.html. Open it in a browser. The same reference is in docs/LLMS.md for coding assistants.

How it works with your settings

1. Settings your template does not use show a note in the dashboard saying so. They are kept, but have no effect.
2. If your template brings its own CSS, the colour, font and style settings have no effect.
3. To go back to a standard template, pick one in Settings > Design. It replaces your custom template on your next deploy.

If your plan changes

If your plan no longer includes custom templates, your blog is published with a standard design. Your template is kept. Upgrade and deploy to use it again.