Thu Jul 03

This is an explanation of the project structure and commands of the Astrto Starter template.

This page contains the full README for the template, including usage instructions and the project’s directory structure. If you’re looking for a clean, powerful starter built with Astro, Tailwind CSS, and TypeScript, feel free to make use of this template! 🚀

🚀 Astro + Tailwind + TypeScript Template

A clean and modern starter template built with Astro, Tailwind CSS, and TypeScript. Ideal for building fast, accessible, and SEO-friendly static websites.

Demo → https://dev-astro-three.vercel.app/ ↗

🔧 Tech Stack Versions

This template uses the following versions at release:

Astro: ^5.10.0
Tailwind CSS: ^4.1.10
TypeScript: ^5.8.3

📁 Directory Structure

/
├── public/
├── src/
│   ├── assets/         # Static assets (images, fonts, etc.)
│   ├── components/     # Reusable UI components
│   ├── content/        # Markdown blog content
│   │   └── blog/
│   ├── env.ts          # Defines base URL for Astro environment
│   ├── icons/          # Assets for Astro Icon
│   ├── layouts/        # Layout components
│   ├── pages/          # Astro page files
│   ├── scripts/        # Client-side scripts
│   ├── styles/         # Global CSS
│   └── types/          # TypeScript type definitions
└── package.json

🚀 Getting Started

1. Install dependencies

npm install

2. Start the development server

npm run dev

Starts local dev server at http://localhost:4321 ↗

Note:
Pagefind (the search function) will not work in development mode. Run npm run build to enable it.

3. Build for production

npm run build

4. Preview the production build

npm run preview

🛠️ Astro CLI

You can use the official Astro CLI with the following commands:

Command	Description
`npm run astro ...`	Run Astro CLI commands like `astro add`, `astro check`
`npm run astro -- --help`	Get help using the Astro CLI

⚙️ Environment Base URL

You can change the base URL by specifying ASTRO_BASE during the build process.

In src/env.ts, the BASE_URL constant is exported to be reused throughout the site:

export const BASE_URL = (import.meta.env.ASTRO_BASE || '/').replace(/\/?$/, '/');

By using BASE_URL in your links, your site will work correctly even when deployed under a subdirectory:

<a href={`${BASE_URL}`}>

🔧 Customization

You can customize colors, fonts, OGP, and more in the following locations:

src/styles/global.css
src/components (UI components)
src/layouts (layout structure)
src/content/blog (content)

✅ Features

✅ Astro + Tailwind CSS + TypeScript
✅ Blog functionality with Markdown
✅ Accessible UI components (tabs, accordion, etc.)
✅ Mobile-first responsive design
✅ Dark mode support
✅ SEO & OGP configured
✅ Search powered by Pagefind

📦 Deployment

You can deploy easily to Vercel, Netlify, GitHub Pages, etc.

npm run build

→ Upload the generated dist/ folder to your hosting platform.

📜 License

MIT

Note:
This template is licensed under the MIT License.
However, redistribution or resale of this template (modified or unmodified) as a competing product is not allowed without explicit permission from the author.

🙌 Special Thanks

This template is dedicated to everyone who loves Astro and Tailwind.

Created by: mooonycat ✨

Get Started