Why Not Just Plain HTML? A Chill Intro to Astro♪ - Netsuki's Room

Netsuki

Onii-chan~, this site is built with Astro!♪

Onii-chan

Framework?

Why not just write plain HTML?

Netsuki

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?

Netsuki

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>

Netsuki

You gotta copy-paste this across all 5 pages…(>_<)

And what if you wanna add a new link to the nav?

Onii-chan

You’d have to edit all 5 files…

Netsuki

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”♪

Netsuki

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>

Netsuki

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>

Onii-chan

Oh, you just write <Header /> and it pulls it in.

Netsuki

Right right!

Wanna change the nav? Just edit Header.astro once and it updates everywhere♪(´∀`)

Layouts Make It Even Cleaner♪

Netsuki

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>

Netsuki

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>

Onii-chan

That’s super clean.

Netsuki

I know right?!(≧∇≦)

Just the stuff you actually wanna write!

Say goodbye to all that HTML boilerplate~♪

Write Blog Posts in Markdown♪

Netsuki

Oh oh, one more thing! Astro supports Markdown!

Writing blog posts in HTML is kinda painful, y’know?

Onii-chan

True, all those <p> and <h2> tags are tedious.

Netsuki

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~♪

Netsuki

This automatically becomes HTML, gets your layout applied, and boom—it’s a page(´∀`)

No HTML needed when writing blog posts♪

Onii-chan

That’s convenient.

Builds to Plain HTML

Netsuki

HERE’S the thing!(ﾟ∀ﾟ)

When you build Astro, it outputs regular HTML/CSS/JS!

npm run build

Netsuki

Run this and you get static files in dist/♪

dist/
├── index.html
├── about/index.html
├── blog/index.html
└── style.css

It’s just normal HTML, so you can host it anywhere!(´∀`)

Onii-chan

Nice for dev, plain HTML in production.

Netsuki

Exactly!

You get the good stuff from both sides~♪(≧∇≦)

JavaScript Only When You Need It

Netsuki

Also, Astro sends zero JavaScript by default.

Onii-chan

Wait, it’s a framework but no JS?

Netsuki

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 />

Netsuki

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(´∀`)

Onii-chan

So JS only where you actually need it.

Netsuki

Right right!

That’s why pages are light and fast♪

This site runs with almost zero JS on most pages(≧∇≦)

Netsuki’s Wrap-up

Netsuki

So yeah! The answer to “Why not just HTML?”

It’s not wrong, but Astro makes life way easier♪

Onii-chan

Worth it even for small sites?

Netsuki

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!(´∀`)

Onii-chan

Makes sense.

Netsuki

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!

Onii-chan

I’ll look into it.

Netsuki

Yay~♪(〃´∪｀〃)

Let me know if you try it out, Onii-chan!