Flask Tutorial - Static Files in Flask

Flask Tutorial

About Lesson

In this Flask Tutorial we are going to learn about Static Files in Flask, as i have already mentioned that you can add your Images, JavaScript files and Bootstrap files inside the static folder, so in here we want to add an icon for our web pages, create a static folder in your Flask project and after that add an icon in that folder.

Now open your base.html file because our all web pages extends from base.html and it is good place to link our icon in that file, you can use this code for adding the icon.

 <link rel="icon" href="{{url_for('static', filename = 'py.png')}}"/>

1	<link rel="icon" href="{{url_for('static', filename = 'py.png')}}"/>

templates/base.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>{% block title %}{% endblock %}</title>
 <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
      rel="stylesheet" >

 <!-- Add Icon -->
 <link rel="icon" href="{{url_for('static', filename = 'py.png')}}"/>

</head>
<body>

 <nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
  <div class="container-fluid">
    <a class="navbar-brand" href="{{url_for('Index')}}">GeeksCoders</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="{{url_for('Index')}}">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{{url_for('Contact')}}">Contact</a>
        </li>

        <li class="nav-item">
          <a class="nav-link" href="{{url_for('About')}}">About</a>
        </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search"
               placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>


{% block body %}

{% endblock %}

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" >

</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{% block title %}{% endblock %}</title>

rel="stylesheet" >

</head>

<body>

<a class="navbar-brand" href="{{url_for('Index')}}">GeeksCoders</a>

</li>

<a class="nav-link" href="{{url_for('Contact')}}">Contact</a>

</li>

<a class="nav-link" href="{{url_for('About')}}">About</a>

</li>

</ul>

<input class="form-control me-2" type="search"

placeholder="Search" aria-label="Search">

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

{% block body %}

{% endblock %}

</script>

</body>

</html>

templates/index.html

{% extends 'base.html' %}

{% block title %}Home{% endblock %}



{% block body %}

<div class="container">
 <h1>Welcome to our home page</h1>

<h3>Welcome to . {{data}}</h3>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Home{% endblock %}

{% block body %}

<h1>Welcome to our home page</h1>

<h3>Welcome to . {{data}}</h3>

</div>

{% endblock %}

templates/about.html

{% extends 'base.html' %}

{% block title %}About{% endblock %}



{% block body %}

<div class="container">
 <h1>This is our about page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}About{% endblock %}

{% block body %}

<h1>This is our about page</h1>

</div>

{% endblock %}

templates/contact.html

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}



{% block body %}

<div class="container">
 <h1>This is contact page</h1>
</div>

{% endblock %}

{% extends 'base.html' %}

{% block title %}Contact{% endblock %}

{% block body %}

<h1>This is contact page</h1>

</div>

{% endblock %}

templates/500.html

{% extends 'base.html' %}

{% block title %}Server Error {% endblock %}



{% block body %}

<div class="container">

<h1>Internal Server Error </h1>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Server Error {% endblock %}

{% block body %}

<h1>Internal Server Error </h1>

</div>

{% endblock %}

templates/404.html

{% extends 'base.html' %}

{% block title %}Page Not Found {% endblock %}



{% block body %}

<div class="container">

<h1>Page Not Found</h1>

</div>


{% endblock %}

{% extends 'base.html' %}

{% block title %}Page Not Found {% endblock %}

{% block body %}

<h1>Page Not Found</h1>

</div>

{% endblock %}

And this is our app.py file.

from flask import Flask, render_template


#create the object of Flask
app  = Flask(__name__)


#creating our routes
@app.route('/')
def Index():
    name = 'Geekscoders.com'
    return render_template('index.html', data = name)



@app.route('/contact')
def Contact():
    return render_template('contact.html')



@app.route('/about')
def About():
    return render_template('about.html')


@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html')


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html')


#run flask app
if __name__ == "__main__":
    app.run(debug=True)

from flask import Flask, render_template

#create the object of Flask

app = Flask(__name__)

#creating our routes

@app.route('/')

def Index():

name = 'Geekscoders.com'

return render_template('index.html', data = name)

@app.route('/contact')

def Contact():

return render_template('contact.html')

@app.route('/about')

def About():

return render_template('about.html')

@app.errorhandler(404)

def page_not_found(e):

return render_template('404.html')

@app.errorhandler(500)

def internal_server_error(e):

return render_template('500.html')

#run flask app

if __name__ == "__main__":

app.run(debug=True)