Your Homepage on Google AppEngine

A while ago I ranted and raved on how free email services look unprofessional. I recommend Google Apps as a very inexpensive solution. You get a professional looking email address, Gmail, Google Calendar and free home page hosting via Google sites for as little as $10 a year (or free if you already own a domain).

Of course since then I realized that using Google Sites to create your homepage also looks unprofessional to a degree. It’s cool that you have your own domain that ends in your last name, but as soon as someone sees the “Powered by Google Sites” blurb on the bottom of your page, all the respect you might have gained fades away. At least if you at some point claimed to know a thing or two about web design. If you are looking for a job in or around web related technologies you probably shouldn’t use a free service that forces you to build simple static pages using WYSIWYG interface. You just don’t do that.

So let’s review:

1. You already own a nice domain
2. You have already signed up for Google Apps like I told you
3. Now you want a nice looking personal home page that is not powered by Google Sites
4. If possible, you still want to host it on the Google Cloud and for free

Pretty tough set of requirements to meet, but I do have a solution for you. It’s called Google App Engine which as you may or may not remember is one of my favorite things on the interwebs.

But Luke, isn’t App Engine only for… You know… Apps? Yes, it is. But I have skimmed through their terms of service and I couldn’t see any language that would suggest that you are NOT allowed to use it for personal home pages. Besides, you could argue that a home page could be considered as an app with a limited scope – ie. one that dynamically serves information about you to the readers.

App Engine is in fact perfect environment for simple semi-static home pages since you get:

1. Cloud hosting which is fast and very scalable
2. Python back end scripting
3. Django templates
4. A simple database back end

Which means you can use server side includes or create nice looking template, and then just inject content into it. In other words, you can make this page the right way, make it as simple or as complex as you please and you will have plenty of space to grow and add features. For example at a later date you can actually decide to host a simple forum or a blog there. You get much more bang for a buckthan on Sites.

I will show you how to get started. First, register an app and call it something. It doesn’t really matter what you call it because your readers won’t ever see that name once you link it up to your Apps domain.

Next, download the development environment. Now you are ready to create an app. You can go for something really simple, or leverage Python and Django to build something more robust. If you just want a simple static home page, head on over to Charles Engelke’s blog to see how to set it up.

I decided to create something a little bit more complex, that will allow me to grow and expand my home page much more easily. Besides, I am firm believer that you can’t really design a good looking web page without using includes. It just doesn’t work. So even when when I have no server side includes I cheat and use Javascript to simulate them.

Anyway, to start you need to create a app.yaml file – here is mine:

application: your-app-name
version: 1
runtime: python
api_version: 1

handlers:
- url: /static
  static_dir: static 

- url: /.*
  script: main.py

First line is where you put the app name you defined during registration. The rest of that paragraph is standard boilerplate. I also define two handlers. One is for static directory where I will keep static files such as style sheets, images and etc. The second will define the file main.py as the main handler for my application… Er.. Homepage.

Now let’s define main.py:

import os
import re
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
from google.appengine.ext.webapp import template

class MainPage(webapp.RequestHandler):
   def get(self):

      p = self.request.get('p');

      if re.match("^[A-Za-z0-9_-]*$", p):
         if p:
            page = p + ".html"
         else:
            page = "main.html"

         if not os.path.exists(page):
            page = "404.html"

         if p = "index":
            page = "404.html"

      else:
            page = "404.html"

      template_values = {
         "page" : page,
      };

      path = os.path.join(os.path.dirname(__file__), 'index.html')
      self.response.out.write(template.render(path, template_values))

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

def main():
   run_wsgi_app(application)

if __name__ == "__main__":
   main()

Hold your horses, I shall explain this in a second. First let’s just create a simple Django template:

   
   
   


   

      
   

   

      

      {% if page %}
         {% include page %}
      {% else %}
         {% include "main.html" %}
      {% endif %}

   

   

      
   

   

      
   

As you can see, there is a hole in the middle of the template where dynamic content will be loaded. The content is determined at run time, by evaluating the “p” variable passed via GET request in the main.py handler. If I visit the page without passing in anything via GET the template will import the file “main.html” which should be in the same directory as the template and the python script (ie. not the static directory – you actually don’t want these things web-readable).

If I use URL like http://yourdomain.com/?p=about then my script will attempt to locate about.html and import it. If it doesn’t find it, it will display 404.html instead. Incredibly simple and yet functional. It allows you to add as many static HTML pages as you need without ever having to redefine the handlers or ever changing the template.

Yes, there are probably better ways to do this, but this took me 5 minutes to set up and it works reasonably well and allows me to have a page with multiple sub pages, all using the same template and the same handler.

Last thing you need to do, is to connect your App Engine site with your Google Apps account. You can do it directly from the App Engine control panel. Google have a very detailed setup instructions with screenshots available so I don’t think I need to repeat that stuff here. It’s easy, and it will take you 2 minutes, tops. Once you are done, you will be all set. Your AppEngine app will now show up on your Google Apps Dashboard. Btw, Google really needs to do some re-branding – Google Apps and Google AppEngine are just way to similar names for these two very different services.

You can see this very setup in action by visiting my personal page. Also note that it loads like 200% faster than this very blog and it is hosted for free on App Engine. Thanks for nothing Dreamhost!

Yes, this is much more complicated that setting up Google Sites web page. But it does give you more credibility, and does allow you to show off your web design/scripting skills and have a much more interactive website. It also allows you to add more dynamic features, widgets and all kinds of bells and whistles to your site later on.