MusicBandAstro is an SEO-ready one-page template for musicians, built with Astro and Tailwind CSS. It includes sections for Videos, Music, Our Story, The Band, Gallery, and Contact. The design is loosely inspired by Agency.
Project history: Originally created as a Pug template, then migrated to React, it has now been rebuilt in Astro for a lightweight and maintainable setup.
- SEO-ready and performance optimized.
- Responsive, works on all devices.
- Built with Astro + Tailwind CSS for maximum flexibility.
- Easy to customize and extend to fit your needs.
- Two main components:
<Masthead />and<MastheadSwipe />. Each has its own route:index.astroandswipe.astroso you can view them separately and choose which one you prefer. - Gallery with lightbox support for easy image viewing.
- Smooth animations for interactive elements.
- Modal dialogs for displaying additional information.
-
Create a new project using this template:
pnpm create astro@latest -- --template rolodoom/musicband-astro
-
Go to your project folder and install dependencies:
cd your-project-name pnpm i -
Start the development server:
pnpm dev
-
Open your browser and visit
http://localhost:4321to see your project live.
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |
The template includes a BaseHead.astro component that handles all SEO-related meta tags. It supports:
- Title and description meta tags
- Open Graph meta tags for social sharing
- Twitter Card meta tags
- Canonical URL
- Favicon
// astro.config.mjs
export default defineConfig({
site: "https://example.com/", // Replace with your own URL
});🔧 Replace "https://example.com/" with your site’s URL before deploying.
Tailwind CSS is pre-configured and ready to use. Customization can be done through the Astro configuration file (astro.config.mjs).
Have a bug or an issue with this template? Open a new issue here on GitHub.
This code is released under the GPL-3.0 license, which means you have the four freedoms to run, study, share, and modify the software. Any derivative work must be distributed under the same or equivalent license terms.