python logo

Flask with static html files


Python hosting: Host, run, and code Python in the cloud!

You can use the Flask framework and use static files together.

Flask will give you URL routing, many features and all the Python benefits.

You may want an application that is partly dynamic and partly static. Or you may simply want to browse with URL routing. In this article we will teach you how to load static HTML files with Flask.

Related course
Python Flask: Make Web Apps with Python

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/<string:page_name>/')
def render_static(page_name):
return render_template('%s.html' % page_name)

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

This application initializes a Flask app with the method:


app.run()

The app creates an URL route for any possible page and links that to static html files with:


@app.route('/<string:page_name>/')
def render_static(page_name):
return render_template('%s.html' % page_name)

</string:page_name>

Create a directory /templates/ and add the file hello.html:



<title>Hello World Template</title>

Hello World


Start the server with:

$ python app.py
* Running on http://127.0.0.1:5000/

Then any .html file is accesible using URL routing.

For example the static file hello.html can be accessed using http://127.0.0.1:5000/hello. You can store any css file in the /static/ directory.

Download Flask Examples

BackNext





Leave a Reply:




Peter Golubev Fri, 06 Jan 2017

I'm using Qpithon3 on Android.
When i started app, console returns:

SyntaxError: invalid character in identifier
1|u0_a97@osprey_u2:/ $

What is wrong?

.

Frank Sun, 08 Jan 2017

not sure if Flask works on Android. Do you have the modules Flask and render_template installed?

Peter Golubev Mon, 09 Jan 2017

It works, but you are right. I'm trying to code on mobile with Qpithon3. It has Python 3.2.2 core. Flask does not support exactly this relise.
Thank you. What a sorrow. Now I'm trying Bottle. Per *censored* ad astra ).

Jeff Silverman Fri, 28 Jan 2020

In two places on this page, there appears the string "". I think this is misplaced HTML closing tag.

Frank Sun, 31 Jan 2020

In this case all the urls are dynamic. This is a quick example that lets you get any type of file. In a real world app, you would not make all routes dynamic but inside a folder like static/page_name