Friday, February 25, 2011

How to Host Static Websites on Google App Engine for Free

gae-logoThe 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

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.

gae-launcher

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

gae-launcher2

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.

gae-deploy

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.

gae-dashboard

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>

9 comments:

  1. https://sites.google.com/ works too..

    ReplyDelete
  2. 1GB out a day aint enough for even my punny blog !!!!

    ReplyDelete
  3. @Choto Cheeta: True, 1GB is not enough for even moderate traffic blogs, but for static sites that serve the same content, 1GB should be enough in most cases.

    Besides, from a practical viewpoint, who would waste time messing with Python code to just host some HTML pages. :)

    For me, this little project was fun. I have to explore Google App Engine more.

    BTW, you can set up custom error pages too and upload different versions of the same site and switch one from the other. That's cool!

    ReplyDelete
  4. Mostly what eats data is the images and secondly the main reason of resource pressure in server is the DB query generated !!!

    Image / other file / media issue can be solved with image hosting websites. CDN is an option which can be out soured but DB query is important that better to be in control of that..

    Now what I found is, when one is in need to pay high hosting fee for better VPS, automatically you get enough distributive resource capability to keep the CDN under you own server !!!

    I raised my concern because of the title of this post. As it made me think otherwise till I reached the end to read about the limitations..

    [:(]

    ReplyDelete
  5. @security code, I suppose you can. The web host shouldn't be a problem.

    ReplyDelete
  6. i launched a wrong file...how can i correct it ,,pls help.....

    ReplyDelete
  7. Thanks, this was really helpful, I based my tutorial of building Google App engine sites on your how to. www.KYKZAJA.TK

    ReplyDelete
  8. Is this similar to the app engine created for the P11D

    ReplyDelete
  9. 1 GB daily bandwidth is not much, but it is free anyway. However, there are some sites offering unlimited free web hosting plans.

    ReplyDelete

Popular Posts