flask make static directory

  1. Import the necessary modules in your Flask application:
from flask import Flask, render_template
  1. Create a Flask application instance:
app = Flask(__name__)
  1. Define a route for the root URL ('/'):
@app.route('/')
def index():
    return render_template('index.html')
  1. Create a folder named 'static' in your project directory. This folder will be used to store static files such as CSS, JavaScript, and images.

  2. Inside the 'static' folder, create subdirectories for different types of static files. For example, create a 'css' folder for CSS files, a 'js' folder for JavaScript files, and an 'img' folder for images.

/project
   /static
      /css
      /js
      /img
  1. Place your static files (CSS, JavaScript, images) inside the corresponding subdirectories. For instance, if you have a stylesheet named 'styles.css', place it in the 'css' folder.
/project
   /static
      /css
         styles.css
      /js
      /img
  1. Update your HTML templates to include these static files. Use the url_for function to generate the correct URLs for your static files:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
    <title>Your Flask App</title>
</head>
<body>
    <!-- Your HTML content here -->
</body>
</html>

Replace 'Your Flask App' with the actual title of your application and update the HTML content as needed.

  1. Run your Flask application. Flask will automatically serve static files from the 'static' folder.
if __name__ == '__main__':
    app.run(debug=True)