Bun HTML & static sites

Files (1)

• SKILL.md

SKILL.md (first lines)

# HTML & static sites

> Build static sites, landing pages, and web applications with Bun's bundler

Bun's bundler has first-class support for HTML. Build static sites, landing pages, and web applications with zero configuration. Just point Bun at your HTML file and it handles everything else.

```html title="index.html" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
    <script src="./app.ts" type="module"></script>
  </head>
  <body>
    <img src="./logo.png" />
  </body>
</html>
```

To get started, pass HTML files to `bun`.

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun ./index.html
```

```
Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Press h + Enter to show shortcuts
```

Bun's development server provides powerful features with zero configuration:

* **Automatic Bundling** - Bundles and serves your HTML, JavaScript, and CSS
* **Multi-Entry Support** - Handles multiple HTML entry points and glob entry points
* **Modern JavaScript** - TypeScript & JSX support out of the box
* **Smart Configuration** - Reads `tsconfig.json` for paths, JSX options, experimental decorators, and more
* **Plugins** - Plugins for TailwindCSS and more
* **ESM & CommonJS** - Use ESM and CommonJS in your JavaScript, TypeScript, and JSX files
* **CSS Bundling & Minification** - Bundles CSS from `<link>` tags and `@import` statements
* **Asset Management** - Automatic copying & hashing of images and assets; Rewrites asset paths in JavaScript, CSS, and HTML

## Single Page Apps (SPA)

When you pass a single `.html` file to Bun, Bun will use it as a fallback route for all paths. This makes it perfect for single page apps that use client-side routing:

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun index.html
```

```
Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Press h + Enter to show shortcuts
```

Your React or other SPA will work out of the box — no configuration needed. All routes like `/about`, `/users/123`, etc. will serve the same HTML file, letting your client-side router handle the navigation.

```html title="index.html" icon="file-code" theme={"theme":{"light":"github-light","dark":"dracula"}}
<!doctype html>
<html>
  <head>
    <title>My SPA</title>
    <script src="./app.tsx" type="module"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

## Multi-page apps (MPA)

Some projects have several separate routes or HTML files as entry points. To support multiple entry points, pass them all to `bun`:

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun ./index.html ./about.html
```

```txt  theme={"theme":{"light":"github-light","dark":"dracula"}}
Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Routes:
  / ./index.html
  /about ./about.html
Press h + Enter to show shortcuts
```

This will serve:

* `index.html` at `/`
* `about.html` at `/about`

### Glob patterns

To specify multiple files, you can use glob patterns that end in `.html`:

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}
bun ./**/*.html
```

```
Bun v1.3.3
ready in 6.62ms
→ http://localhost:3000/
Routes:
  / ./index.html
  /about ./about.html
Press h + Enter to show shortcuts
```

### Path normalization

The base path is chosen from the longest common prefix among all the files.

```bash terminal icon="terminal" theme={"theme":{"light":"github-light","dark":"dracula"}}

From jarle/bun-skills, MIT.

More from jarle/bun-skills