# Skapa webbmapp för statiskt innehåll
```
author: krm
created: 2022-03-30
status: alpha
```
# 👁️🗨️ Om detta avsnitt
Förklarar hur vi skapar en webbmapp som vi kan använda i webbservern
för att visa olika webbresurser såsom html-, css- och bild-filer.
# ❓ Vad är webbmapp?
En mapp på din dator vars innehåll går att komma åt från webben.
# 1. Skapa en mapp
Skapa en mapp där du vill ha dina webb resurser i. Denna mapp kallas
vanligtviss *public*.
```sh
mkdir public
```
# 2. Installera statiska server
Bland import raderna lägg till följande :
```js
import { serveStatic } from "jsr:@hono/hono/deno";
```
# 3. Lägg till middelware för den statisak servern.
Efter alla andra hanterare för androp och middelware, lägg till följande kod:
```ts
app.use(
"/*",
serveStatic({
root: "./public/",
onNotFound: (path, c) => {
console.error(
`${path} is not found on filesystem, using url ${c.req.path}`,
);
throw new HTTPException(404, { message: "No path" });
},
}),
);
```
# 4. ✔️ Lägg till en html fil
I publik mappen skapa en trivial html fil med namnet "test.html"
```html
Välkommen!
Hej!!!
```
# 5. ✔️ Lägg till en css fil
Skapa en mapp med namnet "css" i den publika mappen. Skpa där en css
fil med namnet "styles.css" som har innehållet:
```css
h1 {
color: "green";
}
```
# 6. ✔️ Starta om servern
Starta om server och gå in på sidan:
- 🔗 [http://localhost:8000/test.html](http://localhost:8000/test.html)