Wednesday, August 14, 2013

Host Static Website on Google App Engine But With Flexibility of Templating System

If you already know how to use google app engine you can skip to the github project and the short summary will be enough for you to get started on creating static websites. I created this because google sites will stop supporting google adsense and I have a bunch of static sites for my projects that is using google adsense.


If you are new to google app engine and would like a way to create static websites with ability to do stuff like server side includes to avoid duplicating your headers/navigation and everything that you can do with jinja2 templating system and starts your hosting for free with daily quota and competitive pricing, by the time of this writing is (1GB/day free and 12cents/GB after).

First you need python 2.7 installed in your system, you can download at:
Choose the one for your system, then install google appengine sdk at:
The last thing you'll need is the github project above or download zip at:

Once you got all the things in place, install python, extract/install app engine sdk then extract master.
On mac and/or maybe windows there is a GUI where you can simply add the project extracted "app-engine-static-master" to on the appengine sdk and run it for testing. You should go to:


change the port on where it is running, and /dev/ is where all your dynamic website is shown, whatever you see here is what will be generated static files under gen folder. Now you can start building your website inside the templates/ directory, however you structure this will be how it will serve on your url.


templates/
    _layout/main.html (mapping is ignored on underscore(_) prefixes)
    docs/tutorial1.html (url maps to /docs/tutorial1.html and if hide_html_ext = True on generate.py it maps to /docs/tutorial1)
    about.html (maps to /about.html)
    index.html (maps to / your homepage)

The "hide_html_ext" will just generate the files under a folder and index.html to emulate the clean url designs but by default its using the .html which should be just as good. You would just usually touch the templates directory and then run:

python generate.py

Then it will create static files under gen folder which should serve directly from your running development server, when everything looks good deploy your app, if you need to modify anything you'll have to do it in templates/* then re-run python generate.py then redeploy your app.

For more info on how to make use of jinja2 check their official site:
http://jinja.pocoo.org/docs/templates/

Other app-engine-static specific features includes:

Jinja2 Filters:
{{ link('/about.html') }} - use this for any linking between pages

generate.py variables:
use_index_paths - hides index.html on generated static files
hide_html_ext - hides all .html and generated files are all under folder/index.html

static/ - should contain all your other non-generated static files such as css/js/images and other files