What are HTML files in Astro?
Astro can serve plain HTML files directly from your src/pages/ directory.
These files are served as-is, without any processing or transformation. This is perfect for:
- Legacy content that's already in HTML
- Simple static pages that don't need Astro's features
- Third-party HTML templates
- Quick prototypes or mockups
Features of HTML Files
🚀 Zero Processing
HTML files are served exactly as written, with no build-time processing.
⚡ Lightning Fast
No compilation step means these pages are served instantly.
🎨 Full Control
You have complete control over every aspect of the HTML.
Example HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Page</title>
<style>
/* Your styles here */
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a plain HTML file.</p>
</body>
</html>
Pros and Cons
✅ Pros
- No learning curve
- Works with any HTML
- No build processing
- Perfect for migrations
- Full compatibility
❌ Cons
- No component reuse
- No layouts
- Manual asset handling
- No TypeScript
- Limited DX features
When to Use HTML Files
HTML files in Astro are best used for:
- Legacy Content: Migrating existing HTML without rewriting
- External Templates: Using purchased or downloaded HTML templates
- Email Templates: Creating HTML email previews
- Simple Pages: One-off pages that don't need Astro features
💡 Tip: While HTML files work great for simple needs, consider using
.astro files for better developer experience, component reuse, and access
to Astro's powerful features.