Any complete Web application requires static resources such as CSS, JavaScript, and images. This chapter introduces how Flask manages and serves static files. * * * ## Default Static File Convention Flask serves static files from the static/ folder in the application directory by default. You just need to create this folder and put your static resources in it: myflaskapp/├── app.py ├── templates/│ └── index.html └── static/ ├── css/ │ └── style.css # Style file ├── js/ │ └── main.js # JavaScript file └── images/ └── logo.png # Image file * * * ## Referencing Static Files in Templates Don't hardcode paths; use url_for('static', filename='...') to generate URLs for static files. The benefit of doing this is: even if the application is mounted to a subpath (like /myapp) in the future, the URL will automatically adjust. ## Example

Welcome to TUTORIAL

This is a Web application built with Flask.

* * * ## Customizing Static File Path If you don't want to use the default static/ folder, you can customize it 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")# Access via /assets path # At this point, accessing /assets/css/style.css corresponds to file public/css/style.css | Parameter | Default Value | Description | | --- | --- | --- | | static_folder | "static" | Local folder for storing static files | | static_url_path | None (uses static_folder name) | URL prefix exposed for static files | * * * ## CSS File Example Create a basic style file 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; } Visit http://127.0.0.1:5000/, the effect is as follows: !(https://example.com/wp-content/uploads/2026/05/tutorial_1778667241180.png) * * * ## Difference Between Development and Production Environments > The static file service built into Flask is only suitable for development environments. > > In production environments, professional web servers like Nginx or Apache should handle static files directly, which is much more efficient than serving them through Python code. > > Detailed content about production deployment will be covered in subsequent chapters.