Flask Static Files

Any complete web application relies on static resources such as CSS, JavaScript, and images.

This chapter introduces how Flask manages and serves static files.

Default Static File Convention

Flask by default from the application directorystatic/The folder serves static files.

You just need to create this folder and put static resources into it:

myflaskapp/
├── app.py
├── templates/
│   └── index.html
└── static/
    ├── css/
    │   └── style.css          # 样式文件
    ├── js/
    │   └── main.js            # JavaScript 文件
    └── images/
        └── logo.png           # 图片文件

Referencing Static Files in Templates

Don't hardcode paths; useurl_for('static', filename='...')to generate the URL for static files.

The benefit is that even if the application is later mounted to a subpath (e.g.,/myapp), the URL will also adjust automatically.

Example

<!-- File path: templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>EXAMPLE Flask Tutorial</title>
    <!-- Reference CSS file -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

    <!-- Website icon favicon -->
    <link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
</head>
<body>
    <!-- Reference image -->
    <img src="{{ url_for('static', filename='images/logo.png') }}" alt="EXAMPLE Logo" width="200">

    <h1>Welcome to EXAMPLE</h1>
    <p>This is a web application built with Flask.</p>

    <!-- Reference JavaScript file -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

Custom Static File Path

If you don't want to use the defaultstatic/The folder can be customized when creating the Flask application:

Example

from flask import Flask

# static_folder: folder path on the server
# static_url_path: access path in the URL
app = Flask(__name__,
           static_folder="public",        # Static files are placed in the public/ directory
           static_url_path="/assets")     # Accessed via the /assets path
# Now accessing /assets/css/style.css corresponds to the file public/css/style.css
Parameter Default value Description
static_folder "static" local folder for storing static files
static_url_path None (uses the name of static_folder) The public URL prefix for static files.

CSS File Example

Create a basic stylesheet to make the page look more professional:

Example

/* File path: static/css/style.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    color: #333;
}

h1 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 10px;
}

nav {
    background: #f8f9fa;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
}

nav a {
    color: #3498db;
    text-decoration: none;
    margin-right: 15px;
}

footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #999;
    font-size: 14px;
}

Visithttp://127.0.0.1:5000/, the effect is as follows:

Differences Between Development and Production Environments

Flask's built-in static file serving is only suitable forDevelopment environment。

In production environments, professional web servers such as Nginx and Apache should directly handle static files, which is far more efficient than serving them through Python code.

Detailed content on production deployment will be introduced in later chapters.

other extensions