What you'll build
A guided walkthrough that takes you from an empty directory to an uploaded, previewable Basker theme
This tutorial builds a small but production-shaped Basker theme. By the end you'll have a theme with a real layout, a couple of templates, a homepage variant, three reusable blocks, theme-wide settings, and a live calendar pulling from the FrontStage API. You'll validate it, package it, and share a preview link with someone else.
What's in this section
- Set up your theme directory — scaffold the folders, install the CLI, and get a dev server running.
- Build the default layout — assemble the HTML shell, head metadata, and the components your pages share.
- Add page templates — render content for the homepage and standard pages.
- Build reusable blocks — three blocks editors can drop into any page.
- Variants and theme settings — give the homepage a distinctive layout and expose site-wide options.
- Pull live event data — wire up a calendar block fed by
/api/event-instances. - Validate and upload — run the theme checker, package the ZIP, and upload through the admin.
- Share a preview — generate a preview link to send to a colleague.
Before you start
You'll need:
- A Basker site you can sign in to.
- Node.js 22.12 or newer.
- Working knowledge of HTML and CSS. Liquid is introduced as you go.
Plan on around an hour of focused time end-to-end. Each page leaves you with something working, so you can pause between steps without losing your place.
When you're ready, head to Set up your theme directory.