Information

Sajt

Skapa webbmapp för statiskt innehåll

# 👁️‍🗨️ 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. 


mkdir public

2 Installera statiska server

Bland import raderna lägg till följande : 


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: 


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" 


<!DOCTYPE html>
<html lang="sv">
<head>
	<title>Välkommen!</title>
	<link rel="stylesheet" href="css/style.css" />
	<meta charset="utf-8" />
</head>
<body>
<h1> Hej!!! </h1>
</body>    
</html>

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: 


h1 {
color: "green";
}

6 ✔️ Starta om servern

Starta om server och gå in på sidan:

Nyheter