> ## Documentation Index
> Fetch the complete documentation index at: https://docs.go-mizu.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Static Files

> Learn how to serve static HTML, CSS, and JS files.

In this lesson, you will learn how to serve HTML, CSS, JavaScript, and image files using Mizu. Static files make your web pages come alive with layout, color, and style. Mizu makes this simple with the `Static` method, which connects a URL path to a folder of files that your browser can load directly.

Serving static files is a common part of web development. It lets you show pages and assets without writing routes for each file.

### Code

Create a file named `main.go`:

```go theme={null}
package main

import (
	"log"
	"net/http"

	"github.com/go-mizu/mizu"
)

func main() {
	app := mizu.New()

	// Serve files from the local "public" directory
	app.Static("/", http.Dir("./public"))

	if err := app.Listen(":8080"); err != nil {
		log.Fatal(err)
	}
}
```

Now create a folder named `public` in the same directory and add a file `index.html`:

```html theme={null}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello, Mizu</title>
    <style>
      body {
        font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      h1 {
        font-size: 2rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
      }
      p {
        font-size: 1rem;
        color: #555;
      }
    </style>
  </head>
  <body>
    <h1>Hello, Mizu!</h1>
    <p>This page is served directly from the public folder.</p>
  </body>
</html>
```

### Run

In your terminal, run:

```
go run .
```

Then open your browser and go to [http://localhost:8080](http://localhost:8080).
You should see your HTML page with **Hello, Mizu!** centered on the screen.

### How it works

The `Static` method uses Go's built-in `http.FileServer` to serve files from a folder.
When you visit `/`, Mizu looks inside the `./public` folder and finds the file that matches the requested path. Files like `/index.html`, `/style.css`, and `/script.js` are served automatically without defining routes.

### Try something new

Add a new file called `script.js` inside your `public` folder:

```js theme={null}
console.log("Hello from Mizu static files");
```

Link it to your HTML file:

```html theme={null}
<script src="/script.js"></script>
```

Reload your browser and open the console to see the message.

You now know how to serve HTML, CSS, JavaScript, and images directly from your Go app using Mizu.
Next, move on to [Routing Basics](./003-routing-basics) to learn how to create multiple pages and routes.
