HOWTO – Host your static site using the Google App Engine

[This is a post from an old blog of mine that I’m reposting as the information in it is still quite useful]

Google’s App Engine is designed for hosting your dynamic web applications – code up something in Python, host it as an app and you’ve got scalable, dynamic, database-driven web applications that you can use from your own website or through Google Apps.

Now, at the moment it’s all free – but it’s not immediately obvious how (or even that easy) to host a basic static site – such as this one. As you’re happily viewing this however, it seems like it’s quite possible. There are a few pieces to the puzzle that all need to be put together just right, and then it all starts working.

First up – sign up for an App Engine account. If you have a gmail address, you can use this as your signup for the App Engine. If you don’t have a gmail address then get with the picture and sign up now.

Next – get a copy of the App Engine SDK. It’s relatively small and contains just what you need to get started.

Once you’ve installed the SDK, go to the App Engine and create a new app. You’ll need to give it a unique identifier – I used rocket-cat for mine, you’ll have to make up your own.

With this application identifier, make a new directory somewhere handy on your computer, and then using the SDK, make a new application. Point it to the directory you just made, give it the identifier you created and start editing.

The key to getting this working properly is having the app.yaml file saying the right things.

Here’s mine – change the bit that says rocket-cat to your app identifier and leave the rest the same.

application: rocket-cat
version: 1
runtime: python
api_version: 1

handlers:
- url: (.*)/
  static_files: static1/index.html
  upload: static/index.html

- url: /
  static_dir: static

It’s really important to have it exactly how I have it above, including the whitespace. Make sure the lines that are indented are using two spaces as the indent, not a tab. Change the application: bit to have your app id, and don’t change anything else. Did I mention how critical it was for it to be the same as what I have – whitespace and all?

Once you’ve got this saved, go to the folder you created – it should have the app.yaml file and a couple of other files in it and make a directory called static. This is where all the files for your site will live, and the above yaml file tells the app engine to serve them up as plain files, not to run them as scripts and it will look at their file extensions to work out the correct mime types for them. If you’ve got some fancy-pants files there and the app engine doesn’t get the mime types worked out properly – then you’re beyond my help – all I can tell you is it’ll need tweaking of the app.yaml file.

Using the SDK, you can then test the app locally – hit http://localhost:8080 in your browser and see what it looks like (if you’ve turned it on, and use the port you configured when you created the app)

If that all looks OK, then you can hit the deploy button. This will upload the files to the app engine. It does a version control, so if you then upload a new version of your site that doesn’t work, you can roll back. If the upload doesn’t complete properly, it rolls back automatically.

To test it out, you can now go to http://your-app-id.appspot.com/ and have a look. Pretty, isn’t it.

I think you’re fairly limited in the amount of space you can have (it may be as small as 10MB) and static files are limited to 1MB max size, but if you’re just hosting html, css and a few static images, this should be OK. If you’re hosting a photo album or something like that, use Picasa Web Albums. With a bit of tweakery, you can probably host your images on Picasa Web Albums for the site, as you can link directly to your web albums images now. I haven’t tested this.

The final piece of the puzzle is hosting it at your own domain name.

I use Google Apps to host my domain now, and using the admin console, you can add an app to a subdomain of yours. It seems you can’t host an app engine application at a naked domain (rocketcat.info) it has to be at a subdomain (www.rocketcat.info)

Using your favourite DNS hosting provider – I use FreeDNS I’ve got a URL redirect set up for rocketcat.info to point it to www.rocketcat.info. I don’t use cloaking, as that then loads the new domain using the old URL, in a frame. Without cloaking, FreeDNS instead uses a HTTP 301 error code to redirect the browser to the new address. Then, I point www.rocketcat.info, using a CNAME, to ghs.google.com.

After doing this at my hosting provider, I go back either into the App Engine, or into Google Apps and set up a new app at my domain, and give it the url www.

Easy!

This article was posted by Kai Howells. If you liked this content and have any technical work in the Melbourne area, say hello via my contact form or give me a call on 0419 361 653 - I cover most of the greater Melbourne area and my rates are competitive.

One Response to HOWTO – Host your static site using the Google App Engine

Leave a Reply

Your email address will not be published. Required fields are marked *