Why Not Just Plain HTML? A Chill Intro to Astro♪
Onii-chan~, this site is built with Astro!♪
Framework?
Why not just write plain HTML?
Hmm~, I totally get that feeling(´∪｀)
But y’know, even for small sites, plain HTML can get kinda painful.
Let me explain why Astro is super handy♪
What’s Wrong with Just HTML?
Say you’re building a site with 5 pages, right?
Each page has the same header and footer.
<!-- page1.html -->
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>
</nav>
</header>
<main>
<!-- Only this part is different -->
<h1>Page 1 Content</h1>
</main>
<footer>
<p>© 2025 Netsuki</p>
</footer>
</body>
</html>
You gotta copy-paste this across all 5 pages…(>_<)
And what if you wanna add a new link to the nav?
You’d have to edit all 5 files…
Yep yep! You end up making the same change over and over(´;ω;`)
Imagine if it’s 10 pages, or 50 pages… total nightmare…
Astro Fixes This with “Components”♪
With Astro, you can put shared parts in one file!(≧∇≦)
---
// src/components/Header.astro
---
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/blog">Blog</a>
</nav>
</header>---
// src/components/Footer.astro
---
<footer>
<p>© 2025 Netsuki</p>
</footer>Then in each page, you just write this♪
---
// src/pages/page1.astro
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
---
<!doctype html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<Header />
<main>
<h1>Page 1 Content</h1>
</main>
<Footer />
</body>
</html>Oh, you just write <Header /> and it pulls it in.
Right right!
Wanna change the nav? Just edit Header.astro once and it updates everywhere♪(´∀`)
Layouts Make It Even Cleaner♪
But wait, we’re still writing <!DOCTYPE html> and <head> on every page.
We can share THAT too with layouts!
---
// src/layouts/BaseLayout.astro
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
const { title } = Astro.props;
---
<!doctype html>
<html>
<head>
<title>{title}</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<Header />
<main>
<slot />
<!-- Each page's content goes here -->
</main>
<Footer />
</body>
</html>Now each page is just THIS♪
---
// src/pages/page1.astro
import BaseLayout from '../layouts/BaseLayout.astro';
---
<BaseLayout title="Page 1">
<h1>Page 1 Content</h1>
<p>Just write the actual content here!</p>
</BaseLayout>That’s super clean.
I know right?!(≧∇≦)
Just the stuff you actually wanna write!
Say goodbye to all that HTML boilerplate~♪
Write Blog Posts in Markdown♪
Oh oh, one more thing! Astro supports Markdown!
Writing blog posts in HTML is kinda painful, y’know?
True, all those <p> and <h2> tags are tedious.
With Astro, just drop a Markdown file like this♪
---
title: Today's Diary
date: 2025-12-08
---
## Breakfast
I had **inari sushi** today!
- Juicy fried tofu pockets
- Perfect vinegared rice
- Ate 3 pieces
So yummy~♪This automatically becomes HTML, gets your layout applied, and boom—it’s a page(´∀`)
No HTML needed when writing blog posts♪
That’s convenient.
Builds to Plain HTML
HERE’S the thing!(ﾟ∀ﾟ)
When you build Astro, it outputs regular HTML/CSS/JS!
npm run buildRun this and you get static files in dist/♪
dist/
├── index.html
├── about/index.html
├── blog/index.html
└── style.cssIt’s just normal HTML, so you can host it anywhere!(´∀`)
Nice for dev, plain HTML in production.
Exactly!
You get the good stuff from both sides~♪(≧∇≦)
JavaScript Only When You Need It
Also, Astro sends zero JavaScript by default.
Wait, it’s a framework but no JS?
Yep yep!
You CAN use React or Vue components, but normally they render as static HTML.
Only when you want interactivity, you add this♪
---
import Counter from '../components/Counter.jsx';
---
<!-- This is static HTML (no JS) -->
<Counter />
<!-- This is interactive (sends JS) -->
<Counter client:load />Only when you add client:load does it send JS to the browser.
This is called Islands Architecture♪
Imagine interactive “islands” floating in a “sea” of static HTML(´∀`)
So JS only where you actually need it.
Right right!
That’s why pages are light and fast♪
This site runs with almost zero JS on most pages(≧∇≦)
Netsuki’s Wrap-up
So yeah! The answer to “Why not just HTML?”
It’s not wrong, but Astro makes life way easier♪
Worth it even for small sites?
Totally!
Even with just 5 pages, editing the header in one place is a huge win♪
Plus it scales super well when you add more pages later!(´∀`)
Makes sense.
Astro is perfect for content-focused sites!
Blogs
Documentation
Portfolios
Company sites
If you’re building something like that, totally give it a try~♪(≧∇≦)
The official tutorial is sooo beginner-friendly!
I’ll look into it.
Yay~♪(〃´∪｀〃)
Let me know if you try it out, Onii-chan!