A starter flask application for serving small, static sites.
- Github Account -> https://github.com/join
- Setup SSH keys with Github -> https://help.github.com/articles/generating-ssh-keys
- Heroku Account -> https://id.heroku.com/signup
- Install Heroku toolbelt -> https://toolbelt.heroku.com/
- Setup SSH keys with Heroku -> https://devcenter.heroku.com/articles/keys
- click the Fork button in the upper right hand corner of this page
- go to your projects directory on your computer (for me, cd ~/projects)
git clone git@github.com:[your github username]/starter-flask-app.git
cd starter-flask-app
heroku login
virtualenv venv
(or whatever your virtualenv preferences are)source venv/bin/activate
pip install -r requirements.txt
python web.py
- got to localhost:8000 in your browser to see your website (this will show a blank page)
heroku create
(only need to do this the first time you push)git add .
git commit -m "[Message about the changes you made.]"
git push heroku master
- go to the URL heroku gives you
The main html file is home.html
, which is located in the templates/
folder. Editing this file will show changes in your browser.
style.css
and script.js
are located in the static/
directory. These are linked in the home.html
section, so changes to these files will show up in the browser on refresh.
This application is a very small, simple flask app. Flask is a python framework that does URL routing. If you open the app.py file and take a look at what's inside you'll see the following:
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route('/')
def hello():
return render_template('home.html')
When you ran the command pip install -r requirements.txt
you installed Flask. In python that means that you can now import things from the 'flask' library. So at the top of the file you import Flask and render_template from flask. These are functions that you will need to serve your home.html
file.
app = Flask(__name__)
This simply creates a very basic flask application. For more information about what you can do with Flask, here are some resources:
- Flask Docs - http://flask.pocoo.org/docs/
- Flask megatutorial - http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world
@app.route('/')
This is the part of the code that does URL routing. In this case, the /
route will go to the function hello. If you have a domain name website.com
, the /
route => http://website.com/
. It's basically the base url for the domain name.
def hello():
return render_template('home.html')
The function hello is also very simple. This function simply returns the template home.html
. Flask knows to look in the templates folder for template files, so you only have to tell it the name or path of the file inside templates. If you put an html file outside of the templates folder, Flask will not be able to find it.
This code has a route for /
, but what if you want to add new routes? Lets say you're making a website and you want to have an about page. You can add a new route like this:
@app.route('/about')
def about():
return render_template('about.html')
This will render a template about.html
(which should live in your templates folder) when someone goes to the URL http://website.com/about. (website.com being the base domain name for your site).
I have also added a base.html
file that home.html
extends. You can also extend your new about.html
file off of base.html
like this:
{% extends "base.html" %}
{% block content %}
Your html goes here....
{% endblock %}
The advantage of this is that when you extend an html file, you get everything in that file plus what's in your current file. You can add a nav bar to the base.html
file that will show up in both your home.html
file and your about.html
. This way you don't have to rewrite shared HTML multiple times.