Day 8 — Serving Static Files in Flask
Learn how to add CSS, JavaScript, images, and other static assets to your Flask applications
Day 8 — Serving Static Files in Flask
Learn how to add CSS, JavaScript, images, and other static assets to your Flask applications
Image Designed by the Author on Canva
Not a Medium member? Have free access to this story via this link.
Read the previous part of the series **here.**
Every modern website uses more than just HTML.
To make web pages look attractive, we use CSS. To display logos, icons, and other visuals, we use images. And to add interactivity to our web pages, we use JavaScript.
These files are known as static files because they do not change dynamically. In Flask, they’re stored in a dedicated static folder. And in today’s article, we’ll learn how to use this folder to organize and serve different types of static files in our Flask application.
Alright, let’s get started!
What Exactly Is the static Folder in Flask?
The static folder is where Flask stores all of your application’s static files, such as CSS stylesheets, JavaScript files, images, videos, fonts, and other static assets.
Whenever a browser requests one of these files, Flask automatically looks for it inside the static folder and serves it to the browser.
A typical static folder in a Flask project looks like this:
Building a Flask Application and Serving Static Files
Now, let’s build a basic Flask application and add different types of static files to it.
For this, we’ll create three main things:
- app.py file — Contains our Flask application code.
- index.html file (inside the templates folder) — Contains the HTML template where we’ll use static files.
- static folder — Stores all of our static files.
app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/")
def home():
return render_template("index.html", message="Hello, World!")
if __name__ == "__main__":
app.run(debug=True)Here, the render_template() function renders the index.html template and passes the value “Hello, World!” to the message variable.
index.html
<html>
<head>
<title>Flask Static Demo</title>
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>Here, Jinja’s {{ message }} expression displays the value of the message variable.
Now, let’s run the application and visit http://127.0.0.1:5000/ in our browser. We should see the following output:
Serve a CSS File
CSS files add styling to our application. To serve them, we only need to place them inside the static folder.
For example, let’s create a simple style.css file that changes the colour and size of our heading.
style.css
h1{
color: blue;
font-size: 45px;
}Now, link this CSS file with the index.html template using the <link> tag:
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>{{ message }}</h1>
</body>
</html>Here, the url_for() function automatically generates the correct path to the CSS file in the static folder. It is also the recommended way to reference static files in Flask templates.
Now, let’s refresh our browser. We should see the updated styling:
Serve a JavaScript File
Serving a JavaScript file is similar to serving a CSS file. Simply create a JavaScript file inside the static folder.
script.js
document.write("This is a Javascript static file")Now, link this JavaScript file to the index.html template using the <script> tag:
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>{{ message }}</h1>
<script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>Output:
Serve Images in Flask
To serve an image, simply place it inside the static folder and use the <img> tag in the HTML template.
For example, let’s serve a cat.jpg image in the index.html template:
<html>
<head>
<title>Flask Static Demo</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<h1>{{ message }}</h1>
<img src="{{ url_for('static', filename='cat.jpg') }}" alt="Cat Image" width="30%" />
</body>
</html>Output:
Serving Other Static Files in Flask (Videos, Audio, PDFs, and Text Files)
The process is the same for these files. Place the file inside the static folder and reference it using url_for(). The only thing that changes is the HTML tag you use.
Here’s a quick reference table for serving common static files in Flask:
Image Designed by the Author on Canva
Wrapping Up
Today, we learned how Flask serves static files through the static folder.
Static files are an essential part of every Flask application because they control the appearance and interactivity of your website.
In the next article, we’ll learn how to create database models in Flask and use them to store data in a database.
Stay tuned for Day 9!
메타데이터
- post_id
- c902a1eafd15
- slug
- day-8-serving-static-files-in-flask-c902a1eafd15
- url
- https://medium.com/python-for-everything/day-8-serving-static-files-in-flask-c902a1eafd15
- canonical_url
- https://medium.com/python-for-everything/day-8-serving-static-files-in-flask-c902a1eafd15
- author_url
- https://medium.com/@aliyannshaikhh
- status
- ok
- fetched_at
- 2026-07-17 00:42:37
