FlaskHow-ToBeginner · 3 min read

How to Use Static Files in Flask: Simple Guide

In Flask, static files like CSS, JavaScript, and images are placed in a folder named static inside your project. You can access these files in your HTML using the url_for('static', filename='path/to/file') function, which generates the correct URL to serve them.

📐

Syntax

Flask automatically serves files from a folder named static in your project root. To link to a static file in your templates, use the url_for function with the 'static' endpoint and specify the file path with the filename argument.

url_for('static', filename='css/style.css') generates the URL for static/css/style.css.
This ensures your links work even if your app's URL structure changes.

python

url_for('static', filename='path/to/file')

💻

Example

This example shows a minimal Flask app serving a CSS file from the static folder and using it in an HTML template.

python

from flask import Flask, render_template_string, url_for

app = Flask(__name__)

@app.route('/')
def home():
    css_url = url_for('static', filename='style.css')
    html = f'''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Static Files Example</title>
        <link rel="stylesheet" href="{css_url}">
    </head>
    <body>
        <h1>Hello, Flask Static Files!</h1>
    </body>
    </html>
    '''
    return render_template_string(html)

if __name__ == '__main__':
    app.run(debug=True)

Output

Running the app and opening http://127.0.0.1:5000/ shows a page with styled heading using the CSS from static/style.css.

⚠️

Common Pitfalls

Not placing static files inside the static folder causes Flask not to find them.
Hardcoding URLs instead of using url_for can break links if the app URL changes.
Forgetting to include the correct relative path inside filename leads to 404 errors.
Running Flask with debug off may cache static files; clear browser cache or disable caching during development.

html

## Wrong way (hardcoded URL):
# <link rel="stylesheet" href="/style.css">

## Right way (using url_for):
# <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">

📊

Quick Reference

Action	Code Example	Description
Place static files	Put files in `static/` folder	Flask serves files automatically from here
Link static file in template	`{{ url_for('static', filename='file.ext') }}`	Generates correct URL for static file
Access static file in Python	`url_for('static', filename='img/logo.png')`	Get URL for static file programmatically
Change static folder	`app = Flask(__name__, static_folder='assets')`	Customize static folder name if needed

✅

Key Takeaways

Always put static files inside the 'static' folder in your Flask project.

Use url_for('static', filename='path') to link static files in templates for reliable URLs.

Avoid hardcoding static file paths to prevent broken links when app structure changes.

Remember Flask serves static files automatically from the 'static' folder during development.

You can customize the static folder name by passing static_folder parameter to Flask constructor.