Skip to content
Astro 7 + Tailwind v4 themes
BaseLayer.
Menu

Basics / 01

Getting started

Download your theme, install it, run it locally, then build it for production.

Browse the docs

Every BaseLayer theme is a complete Astro project. There’s no CLI or account to set up: download it, install the dependencies, and you’re running.

What you need

  • Node.js 22.12 or newer. Astro 7 won’t install on older versions. Each theme includes an .nvmrc, so nvm use picks the right version.
  • npm 9.6.5+, or pnpm / yarn if you prefer.
  • A code editor. VS Code or Cursor with the official Astro extension gives you syntax highlighting and type checking in .astro files.
  • A terminal for running the commands below.
  • Git is optional but recommended. It makes updates much easier.

1. Download your theme

After checkout you get a download link by email. Download the ZIP and unzip it wherever you keep projects.

Put it in a private Git repository right away:

cd your-theme
git init
git add -A
git commit -m "Theme as downloaded"
git branch theme

The theme branch keeps an untouched copy of the theme, which makes updates a simple merge.

Keep the repository private. Your license covers your own projects, not redistributing the theme source.

2. Install and run

npm install
npm run dev

Open http://localhost:4321. The dev server reloads as you edit.

3. Make it yours

Start with these, in order:

  1. Set your production URL in astro.config.mjs (site) and src/config/identity.ts (url). Canonical URLs, the sitemap, and social cards all use it.
  2. Change the name, navigation, and footer in src/config/identity.ts.
  3. Rewrite the page copy in src/config/pages.ts.
  4. Set your colors and fonts in src/styles/theme.css. See Styling.
  5. Replace the sample blog posts and fill in the privacy, terms, and accessibility pages. See Content.

Configuration covers every config file, and Quick changes walks through the common edits. If your theme has its own page under Themes, read that too.

4. Build for production

npm run build

The build does four things:

  1. Generates public/og.png and public/apple-touch-icon.png from your site name.
  2. Builds the site into dist/.
  3. Checks every page for missing titles, descriptions, and alt text.
  4. Pings IndexNow if you’ve set an INDEXNOW_KEY (skipped otherwise).

Preview the production build before you deploy:

npm run preview

The output is plain static HTML, CSS, and a little vanilla JavaScript. There’s no framework runtime and no server, so dist/ runs on any static host. See Deploy.

Commands

Command What it does
npm run dev Local dev server on port 4321
npm run build Production build into dist/
npm run preview Serve the production build locally
npm run typecheck Type-check .astro and .ts files
npm run seo:og Regenerate the social card images