Skip to content
Wiki

Serving static files

As cool as the website currently is (not very), it would be nice to have some static files to serve. This could be images, CSS, JavaScript, or anything else that doesn’t change.

Adding static files

To add static files to your website, you need to create a folder called static in the root of your project. Flask will automatically serve any files in this folder at the /static/ route.

Create a new folder called static in the root of your project. Inside this folder, create a new file called style.css with the following content:

body {
    background-color: lightblue;
}

Now, update the index.html file to include this CSS file. Add the following line to the <head> section of the file:

<link rel="stylesheet" type="text/css" href="/static/style.css">

Your index.html file should now look like this:

<!DOCTYPE html>
<html>
   <head>
      <title>My Flask Website</title>
      <link rel="stylesheet" type="text/css" href="/static/style.css">
   </head>
   <body>
      <h1>Welcome to my Flask website!</h1>
      <p>This is a simple website built using Flask.</p>
   </body>
</html>