Free Web Site Hosting Using Google App Engine

Hosting

Cloud computing is currently in fashion for web site hosting. Unfortunately, it’s often also expensive. Enter Google’s App Engine, with free pricing for small sites consuming little bandwidth, and the best cloud hosting choice becomes clear.

The App Engine Dashboard, think of it as your control panel for the applications you host on App Engine, is quite nice. With a free Google App Engine account you get slots for up to 10 application, or you may prefer to think of them as web sites. The Google App Engine Launcher is a mini-IDE for local development on your personal computer. The launcher supports Win/Mac/Linux environments, but I’ve only used the Win version.

The App Engine Launcher combined with a simple editor like NotePad++ make for a great iterative development and publishing environment. That was one of the first things I noticed about this tool when I used it. When you install The App Engine SDK complete with Launcher and then install a current version of Python on your computer, you have a slick system for editing and publishing your web site. Many people I know fell in love with Microsoft’s FrontPage web site publishing tool, and used it long after Microsoft stopped selling it, simply because it was so good for quickly editing and updating sites. You can use the launcher to create and maintain multiple web sites locally and publish them to the Web with a button click or two. Once everything is set up, the publishing process is almost automatic.

Of course, with App Engine your working with HTML and the Python language. In another article I posted recently I recommended starting out with the App Engine Getting Started Guide. There really is no getting round learning a little about Python and HTML. The book Using Google App Engine is great for people just starting out with App Engine who don’t know much about HTML, CSS, or Python. This book assumes very little previous experience working with Web technologies.

What I’m going to do now, As I said in that previous post, is present an easy way to create a simple static web site that you can easily published using App Engine. If you took my advice and worked your way through the Getting Started Guide, you will find this much easier. I think it’s a fair criticism of  Google’s Python Getting Started Guide that it exposes you to some fairly complex concepts and in the end leaves you with nothing useful. This little project of mine is far simpler and will give you a great start on publishing your own static site on App Engine.  From there you can grow it to suit your own needs.

Download this project as a single zip file. In it you will find, well, not much really. It contains an app.yaml file almost identical to the one in the getting started sample. It uses a static directory to contain all images and a single .css file. Rather than create a Toy web page, I started with a free page template from StyleShout.com. For my example I used the Underground template. It’s so much easier to start with something complete and visually appealing. From the very beginning you have the reward of an attractive site.

So, I tossed in the Underground template files and changed a few things. I want to demonstrate how to use template variables from the WebApp Framework to add dynamic content to a web page. This is pretty simple, all you do is wrap the variable name in double brackets like this: {{ variable_name }}, and the template variable is evaluated and its underlying value substituted when the page is displayed. It’s that easy.

The magic that makes the whole things work is contained in a single Python file  of only 50 lines, index.py. If you have not downloaded the zip file containing this project, do it now so you can look at this file. As you look at index.py notice the first 4 lines that import some standard classes. I don’t want to go into too much detail, but just think of this as program code that you don’t have to write and that you use for free.

The next 20 lines after these imports comprises the MainPage class. The MainPage class is then followed by the AboutPage class declaration. (If your wondering, the end of  the first class and the beginning of the second class is indicated by the line indentation.) Without looking at these classes too closely, notice that they are a lot alike. What these two classes do is handle requests for the two pages of this sample project: the main or home page, and the about page. Compare them to see what’s different. The names on the first lines. Then the next thing different is that different values are assigned to the variable template_values. Template_values is a special kind of variable called a dictionary that can hold multiple values. These are the values that are assigned to our template web pages before the pages are displayed.

These classes are associated with the page that it displays in the last two lines of the class. In the case of the class MainPage, the first of these two lines identifies the page to render, index.html, and the second line assigns the template variable values and displays the page index.html. In the class AboutPage the last two lines are almost identical except that the file to be displayed is about.html.

So, if you wanted to add pages to your site, simply use your editor to duplicate the MainPage class. Then change the name of the class. Maybe your adding a contact page. Copy MainPage, change the name to ContactPage, define any template variables you want to pass to the rendered page, and then change the last two lines to reference the actual contact.html page you previously created.

The last thing you need to change if your adding a page is to add the page to the application class variable.  Around line 39 you will find code like this:

application = webapp.WSGIApplication(
 [('/', MainPage),
 ('/index.html', MainPage),
 ('/about.html', AboutPage)],
 debug=True)

Change it to look like this:

application = webapp.WSGIApplication(
 [('/', MainPage),
 ('/index.html', MainPage),
 ('/about.html', AboutPage)],
 ('/contact.html', ContactPage)],
 debug=True)

You just added the contact page to your site and you now can link to the page you created named contact.html.

What if you don’t want to use template variables? Simply don’t define the variable template_variables and pass an empty dictionary to the template:

self.response.out.write(template.render(path, template_values))
Change the above to this:
self.response.out.write(template.render(path, {})) 

I encourage you to use template variables thought, they are very useful and powerful. You can actually put whole chunks of your page, like footers and sidebars, in variables.

As you get a better grasp of how App Engine and Python works, you will be able to add new features. What I present here just gets you started. Brush up a little on Python, look at a few more sample applications, and before long you will be producing attractive and complex web sites on Google App Engine–for free.

If you create a web site you want to point your domain name at it, your going to need a Google Apps account. The Standard account is still free, as I write this. Set up an account and this is how you will point your domain name at your App Engine site. Even if you get a commercial Apps account for $50, your getting great hosted email and Google Calendar is pretty cool too, for not much money. For a small business with a few employees, this deal is hard to beat. Hosted email with your domain name, collaboration tools, and support for $50 per seat per year.

Download this simple project. Set up a Google App Engine account, and see what you can do with it in an hour. Best of luck.

Supporting Documents and Resources

Sample Site

Sample Project files

Google App Engine

Python Language Docs.

Tagged as: App Engine, Free Hosting, Google App Engine, Python