How to Host Static Websites on Google App Engine for Free

The other day, Amazon made some changes to their file hosting service S3 enabling customers to use it as a web server to host websites. Of course, Amazon S3 is not free so you would still require to pay to use their service, the same way you would pay for a normal web server. So if you are looking for a free solution, you have to look for alternatives such as the robust servers at Google App Engine. Yup! you can host static websites there too. This guide teaches you how to.

Tools Required

• Google App Engine SDK for Python
• Python for Windows

Download and install them both.

Register Application

Go to https://appengine.google.com/ and sign in using your Google account.

On the App Engine dashboard, click on "Create an Application" button. Follow the instructions to register an application ID - a unique name for your website. For example, if your application ID is “mywebsite”, the URL for your website will be http://mywebsite.appspot.com/. You can also purchase a top-level domain name (.COM, .NET, .ORG etc) and use that one instead. We will come to that later.

In this example, the application ID was “examplesite9”

Preparing The Website

Launch the Google App Engine Launcher and click on the + button.

Enter your application ID, choose a directory on your hard drive and click Create.

A folder with the name of the application will be created in your chosen location. Open the folder in Windows explorer and create a new folder called “static”. Copy your website’s files to the folder “static”.

Open the file app.yaml in a text editor. Replace the content of the file with the following.

application: examplesite9
version: 1
runtime: python
api_version: 1

default_expiration: "30d"

handlers:
- url: /images/(.*)
  static_files: static/images/\1
  upload: static/images/(.*)
 
- url: /(.*\.html)
  static_files: static/\1
  upload: static/index.html
 
- url: /.*
  script: main.py

Short explanation: The url parameter specifies the URL where you would like your website’s resources to be available to a visitor. Here resources under the folder static, i.e. your entire website is redirected to the root of the website’s URL, so that you can access your website from http://mywebsite.appspot.com/ instead of http://mywebsite.appspot.com/static

default_expiration specifies the length of time the website’s files ought to be cached in the user's browser. I have set it to 30 days.

In my example website I used only one directory – “images”, hence there is only one directory handler. If you have more than one directory, simple copy the first 3 lines that define the image folder, paste it and replace images with your directory name. For example, if you have placed your CSS files in a directory called “stylesheet” and JS files under “javascript”, the app.yml file should look.

application: examplesite9
version: 1
runtime: python
api_version: 1

default_expiration: "30d"

handlers:
- url: /images/(.*)
  static_files: static/images/\1
  upload: static/images/(.*)

handlers:
- url: /stylesheet/(.*)
  static_files: static/stylesheet/\1
  upload: static/stylesheet/(.*)

handlers:
- url: /javascript/(.*)
  static_files: static/javascript/\1
  upload: static/javascript/(.*)

- url: /(.*\.html)
  static_files: static/\1
  upload: static/index.html

- url: /.*
  script: main.py

The application directory will have another file named main.py. Open main.py in a text editor and replace its content with the following.

from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app

class IndexHandler(webapp.RequestHandler):
    def get(self):
        if self.request.url.endswith('/'):
            path = '%sindex.html'%self.request.url

        self.redirect(path)

    def post(self):
        self.get()

application = webapp.WSGIApplication([('/.*', IndexHandler)], debug=True)

def main():
    run_wsgi_app(application)

if __name__ == "__main__":
    main()

What we have done here is redirected http://mywebsite.appspot.com/ to http://mywebsite.appspot.com/index.html. This is needed because Google App Engine does not do it automatically.

We are now ready to deploy our website.

Uploading Website

Open Google App Engine Launcher, select your application from the list and click on the Deploy button. Enter your Google ID and password when asked.

If everything goes smoothly, your website will be uploaded and should become immediately available under the registered URL. Here is my website. http://examplesite9.appspot.com/

You also get a nice dashboard from where you can overview resource usage by your website.

Speaking about resources, there are some limitations you should be aware of. On free accounts, you get 1000 MB of in and another 1000 MB of out bandwidth each day, 1.3 million HTTP requests each day, and 1 GB of storage space. Sufficient for most users.

Using Custom Domain

This is explained here. Follow the steps and you can access your website on your own domain.

Troubleshooting

If you uploaded the wrong files, or did something wrong or the upload didn’t go through completely, you can rollback the changes you made. To do this, press Win+R and type cmd and press Enter. This will start the command prompt. Using the CD command navigate to the directory where Google App Engine is installed on your hard drive. Then issue this command:

appcfg.py rollback <full path to your application ID folder>