Get started with Astro themes

This guide will walk you through how to install your Astro theme.

Requirements

It is important to note that to work with Astro themes, you need basic skills in HTML, CSS, and JavaScript, as well as experience with the Astro and Tailwind CSS frameworks.

Development environment prerequisites

  • Node.js - version v18.17.1 or v20.3.0 or later (v19 is not supported).
  • Code editor - I recommend Visual Studio Code with the Astro extension.
  • Terminal - I recommend using iTerm2, but you can use a default terminal provided with your OS.

Themes structure

All Just Good UI themes have a similar structure:

.
├── public
│   └── ...
├── src
│   ├── components
│   │   ├── BaseHead.astro
│   │   └── ...
│   ├── content
│   │   ├── blog
│   │   │   ├── post.md
│   │   │   └── ...
│   │   ├── config.ts
│   │   ├── pages
│   │   │   ├── about.md
│   │   │   ├── contact.md
│   │   │   └── ...
│   │   └── projects
│   │       ├── project.md
│   │       └── ...
│   ├── data
│   │   └── site-config.ts
│   ├── env.d.ts
│   ├── icons
│   │   └── ...
│   ├── layouts
│   │   ├── BaseLayout.astro
│   │   └── ...
│   ├── pages
│   │   ├── [...slug].astro
│   │   ├── blog
│   │   │   ├── [...page].astro
│   │   │   └── [slug].astro
│   │   ├── index.astro
│   │   ├── projects
│   │   │   ├── [...page].astro
│   │   │   └── [slug].astro
│   │   ├── rss.xml.js
│   │   └── tags
│   │       ├── [slug]
│   │       │   └── [...page].astro
│   │       └── index.astro
│   ├── styles
│   │   └── global.css
│   └── utils
│       ├── common-utils.ts
│       └── data-utils.ts
├── LICENSE
├── README.md
├── astro.config.mjs
├── package-lock.json
├── package.json
├── tailwind.config.cjs
└── tsconfig.json

Get started

Unzip the downloaded file

Once you have downloaded the theme from Just Good UI website, you will get a compressed *.zip file. You have to right-click the file and extract the contents to its folder. Inside the unzipped folder, you will see README.md, licenses.md, and other assets along with the main theme folder.

Install Dependencies

It is important to note that all commands are run from the root of the project (e.g. dante-astro-theme), from a terminal.

# installs all dependencies
npm install

Start local development server

# Starts local dev server at `localhost:4321`
npm run dev

Other important commands

# Build your production site to `./dist/`
npm run build

# Preview your build locally, before deploying
npm run preview

# Get help using the Astro CLI
npm run astro -- --help

Support

All themes include support; you can reach out to me by sending an email here.

It is important to note, that your theme support service includes assistance with general questions about theme functionality, feature configuration, and bug or issue resolution. However, it does not provide lessons on HTML, CSS, TailwindCSS, Astro, or other programming languages.

License

You can read about the free and paid themes license on the license page.

Last updated: