How to Install an Astro Theme

In WordPress, you add a theme to a site you already have. Astro is different. An Astro theme is a whole starter project. You begin with its files. Then you edit them.

Step 1: Choose a theme

Browse the Astro themes directory. Open the demo. Check when the theme was last updated. Pick one that was updated not long ago.

Step 2: Create a project from it

The official starter templates need one flag. A flag is a short option you add to a command:

npm create astro@latest my-site -- --template blog

Some themes live on GitHub. GitHub is a site that stores code. For those, use the GitHub address instead:

npm create astro@latest my-site -- --template owner/repo

Swap owner/repo for the name on the theme’s GitHub page. We tested the official templates on Astro 7.4. We did not test every third-party theme.

Step 3: Install and run it

Did you skip the install step? Install the parts now. Then start the dev server. That shows your site on your own computer. Type these in your terminal:

cd my-site
npm install
npm run dev

Step 4: Make it yours

Each theme is laid out a bit differently. These are good places to start:

• README.md explains how the theme works.
• src/consts.ts or a file like it often holds your site’s name.
• src/content usually holds the demo posts.
• src/styles usually holds colours and fonts.

Swap out the demo words and pictures first. It is the fastest way to see how a theme fits together.

Not sure which theme to start with? See the 11 best free Astro themes, each checked for Astro 7.

Frequently asked questions

Can I switch themes later?

Not in one click. A theme is your whole project. You would start a new project from the new theme. Then you move your words and pictures across.

Are Astro themes free?

Many are. The official directory has both free and paid options.