Create and Host your Personal Website for Almost Nothing — Pt. 1 Flask’n’Freeze
How to create and host a simple website using Flask, and S3, Route 53, Certificate Manager, and CloudFront from AWS
I’m cheap. My wife can attest to this. Just ask her about the fuss I make in the grocery store whenever we need to buy Organic Whatever, versus the generic garbage I would normally eat.
Given this less than appealing trait about me, you can imagine my joy at discovering that hosting a static website with SSL was just one of the many things you can do through AWS for nearly no money. In this two part series I’ll show how you can very quickly create a personal static website based on a python Flask application and deploy the artifacts to AWS while relinquishing very little cash 💸.
Step 1. Getting set up with Flask
When it comes to python development, you should always use a virtual environment. Since we’re not actually deploying any python code here I won’t go into the pipenv vs. virtualenv/venv argument. I’m also going to assume you’re using python 3.7, or at least 3.x, because it’s 2019.
First let’s create a new directory then set up our virtual environment using virtualenv.
Then start the environment.
Great, at this point you should see
(.venv) or something similar at the left side of your command prompt. Now it’s time to install our dependencies.
With these dependencies installed we can actually start to write some python code. Unfortunately for any of you pythonistas out there, this is going to be pretty boilerplate stuff. First we’ll create an
app.py which will house our Flask application.
Next, as you may have guessed, we’ll actually need an
index.html file to return from
default(). Sticking with Flask precedence, go ahead and create a new directory in the root level of your project called
templates. In this templates directory you should create an
index.html. You can put basically anything in the HTML file, you’ll build something nicer shortly.
And we can test it out by typing
flask run in the root level of the project.
At this point you’re probably pretty amazed at this epic feat of engineering, but you may be thinking that this Anakin gif doesn’t truly represent you. No worries, next let’s look at building a slightly nicer looking site.
Step 2. Creating a Personal Website
I can’t claim to be a frontend developer, so for this step I’ll start the same way I do whenever I need to create a UI for a personal project, by googling “lightweight css framework <whatever year it is>”. This year my winner is pure.css.
This step I’ll leave to you and your imagination. The only rules here are that the site must be static, meaning it can’t depend on any additional calls to your API, and you must keep any static elements in a directory named
Here’s what I came up with.
Step 3. Freeze it!
Earlier we installed Frozen-Flask, which is a nifty tool for “freezing” Flask applications into a set of static files. I’ll admit, this usage of Flask and Frozen-Flask is a bit overkill since this is just a single page website. However, if you wanted to build a website that made use of templates, had multiple endpoints, or made use of dynamically generated urls, Frozen-Flask can be very handy.
There is a bit more python for this step. Create a new file in the root of the project named
freeze.py and paste the following.
Finally you can run
python freeze.py and you should see a new directory created in the root of your project named
build. Within that directory you’ll find all of your new static files. In my case they were exactly the same as the files I created manually, but it may not be the case if you’re using any the of the Flask templating features I mentioned above.
That’s it for Part 1! In Part 2 of this series we’ll look at how to deploy your static code to AWS S3, how to configure your domain in Route 53, and how to setup SSL for your site using Credentials Manager and CloudFront.
See my example code here.