Basker Docs

Set up your theme directory

Scaffold the directories a Basker theme needs, initialize version control, and start a local dev server

You will start by creating the empty directory structure a theme needs and putting it under version control. Then you will run the LocalStage CLI so you can see changes in a browser as you work.

Step 1: Create the theme folder

Pick a clear lowercase, hyphen-separated directory name. LocalStage uses this name to find a matching remote theme. Basker assigns the stored theme key during upload unless an API upload supplies one.

mkdir my-theme
cd my-theme

Step 2: Scaffold the directories

A classic theme needs three required folders and a few common-but-optional ones. Create them now. This gives the layout, template, block, and settings work in later steps a place to land.

mkdir -p layouts templates blocks components assets config
FolderWhat goes in it
layouts/The HTML shell that wraps every page.
templates/Per-content-type renderers: pages, events, posts, etc.
blocks/Reusable composable units editors place inside pages.
components/Larger shared partials like global headers and footers.
assets/CSS, JavaScript, images, fonts.
config/Theme-wide settings schema.

The full list of supported directories, what Basker requires, and what Basker validates, is on Theme directory structure.

Step 3: Initialize version control

A theme is just files, so Git works the same way it does for any other project. Initialize a repository now. Add a .gitignore file for anything you do not want to commit:

git init

Create .gitignore at the theme root:

.DS_Store
node_modules/
*.zip

LocalStage stores its current sign-in outside the theme directory in your operating system's application-data location.

When the directories are in place, make your first commit:

git add .
git commit -m "Scaffold theme directories"

Step 4: Install the LocalStage CLI

The CLI gives you a local dev server. It renders your theme files against the Basker environment and workspace you select. If you have not already installed the CLI, follow LocalStage CLI. Come back here after you verify the install.

A quick sanity check from inside my-theme:

basker --version

Step 5: Start the dev server

From the theme directory:

basker theme dev

The first run prompts for three things, in order. It asks for your Basker email and password. Next it asks for a verification code. Basker emails this code, or generates it from an authenticator or recovery code if you turned one on. Finally it asks for the workspace you want to preview. After you sign in, the CLI prints a summary box with http://localhost:9292 and opens it in your browser.

You will see an error or a blank page right now. This is normal. There are no layouts or templates yet for the renderer to use. You will fix that on the next page.

Keep this terminal running. As you add files in the next steps, the dev server detects the changes and live-reloads the browser.

What's next

Go to Build the default layout to give the renderer something to render.

On this page