Migrating Google Page Creator to Google App Engine
Forward: this is an article that I was originally posted in Chinese on April 19th, 2009 before closure of Google Page Creator. Although Google Page Creator has already been deprecated nowadays, the idea of using Google App Engine as a free web server to host static files is somehow still applicable to Blogger users. Therefore, I translated the post into English to share my experience of migrating Google Page Creator to Google App Engine, as well as mapping multi-directory structure into single directory structure to achieve backward compatibility with Google Page Creator by configuring app.yaml.
Google has announced to shut down Google Page Creator in June this year. The disappearance of the free web hosting service brings us an inevitable painful of finding alternatives. As announced, the official solution is Google Page Creator migration to Google Sites. But for those Blogger users who want to host their JavaScript and CSS files for free, Google Sites might not be an appropriate option.
Instead, Google App Engine, a Google cloud hosting platform, is more suitable for hosting those static files, comparing with Google Sites. After all, Google App Engine is designed for automatic scaling according to the number of incoming connections. And the new file storage rule allows the size of a file up to 10MB, and 1000 files in all.
Google App Engine is a powerful service that serves dynamic pages in Python and Java languages. If you want to make a dynamic website run, it is essential to learn programming languages. But for hosting static files, a little knowledge of mapping files and directories to URLs in app.yaml configuration, running test in a local development server and uploading configuration and static files is enough. No specific programming skills are required.
Currently, I hold two Google Page Creator websites, one is alpha.roc.googlepages.com hosting JavaScript demo applications, and another one is alpha0roc.googlepages.com storing scripts, pictures and downloading files. Since Google Page Creator and Google App Engine supports different directory structures, single directory structure and multi-directory structure separately. I plan to adjust various files from a single root directory of one Google Page Creator website into multiple directories under Google App Engine website according to file formats. I also decide to migrate both websites into one Google App Engine website namely alpha0rocdemo.appspot.com, placing alpha.roc.googlepages.com into 'demo' directory (can be directly accessed through an index.html) and relocating alpha0roc.googlepages.com into 'blog' directory (only for hosting resources like pictures and scripts, can only be accessed through exact URL, no index.html). The backward compatibility from the new multi-directory structure to the old single directory structure is managed by app.yaml.
Following content comes from the handlers section of app.yaml, defining the map relationship between URLs and static files.
Google has announced to shut down Google Page Creator in June this year. The disappearance of the free web hosting service brings us an inevitable painful of finding alternatives. As announced, the official solution is Google Page Creator migration to Google Sites. But for those Blogger users who want to host their JavaScript and CSS files for free, Google Sites might not be an appropriate option.
Instead, Google App Engine, a Google cloud hosting platform, is more suitable for hosting those static files, comparing with Google Sites. After all, Google App Engine is designed for automatic scaling according to the number of incoming connections. And the new file storage rule allows the size of a file up to 10MB, and 1000 files in all.
Google App Engine is a powerful service that serves dynamic pages in Python and Java languages. If you want to make a dynamic website run, it is essential to learn programming languages. But for hosting static files, a little knowledge of mapping files and directories to URLs in app.yaml configuration, running test in a local development server and uploading configuration and static files is enough. No specific programming skills are required.
Currently, I hold two Google Page Creator websites, one is alpha.roc.googlepages.com hosting JavaScript demo applications, and another one is alpha0roc.googlepages.com storing scripts, pictures and downloading files. Since Google Page Creator and Google App Engine supports different directory structures, single directory structure and multi-directory structure separately. I plan to adjust various files from a single root directory of one Google Page Creator website into multiple directories under Google App Engine website according to file formats. I also decide to migrate both websites into one Google App Engine website namely alpha0rocdemo.appspot.com, placing alpha.roc.googlepages.com into 'demo' directory (can be directly accessed through an index.html) and relocating alpha0roc.googlepages.com into 'blog' directory (only for hosting resources like pictures and scripts, can only be accessed through exact URL, no index.html). The backward compatibility from the new multi-directory structure to the old single directory structure is managed by app.yaml.
Following content comes from the handlers section of app.yaml, defining the map relationship between URLs and static files.
handlers: - url: /demo/(.+) static_files: demo/\1 upload: demo/(.+) - url: /demo/.* static_files: demo/index.html upload: demo/index.html - url: /blog/download static_dir: blog/download - url: /blog/(.*\.(gif|png|jpg|ico|css|js)) static_files: blog/template/\1 upload: blog/template/(.*\.(gif|png|jpg|ico|css|js)) - url: /blog/(.*) static_files: blog/download/\1 upload: blog/download/(.*) - url: /.* script: index.pyThe uploaded files and directories are shown below.
|-- app.yaml # app.yaml configuration file is in the root directory |-- blog # Maps to http://alpha0roc.googlepages.com/ website, no | | # index.html. | | # Adjusts picture and script files from single directory | | # structure into 'template' directory, and places other | | # files into 'download' directory. | |-- download # Line 09-10 in app.yaml makes sure that requests | | | # can access resources through | | | # http://alpha0rocdemo.appspot.com/blog/download | | | # Line 14-16 in app.yaml keeps backward compatibility | | | # with Google Page Creator, connections to | | | # non-pictures and non-scripts redirect into | | | # 'download' directory. | | |-- DatabaseV20070511.accdb | | |-- LineCount.py | | |-- PolaroidsPhotos.atn | | |-- fanfou.v08.py | | |-- fanfou.v09.py | | `-- gongfan2.tar.bz2 | `-- template # Line 11-13 in app.yaml keeps backward compatibility | | # with Google Page Creator, connections to picture | | # and script formats, such as gif, png, jpg, ico, css | | # and js, go into 'template' directory. | |-- author.png | |-- bg.jpg | |-- blogicon.ico | |-- comh3.png | |-- commentbck.png | |-- cup.png | |-- fanfou.js | |-- footer-wp.png | |-- footer2.png | |-- ie60.css | |-- listseparator.png | |-- logo.png | |-- mainmidpart.png | |-- maintoppart.png | |-- menu2ie.png | |-- menu_button2.png | |-- quotes.gif | |-- recommendation.js | |-- righthead.png | |-- rssicon.png | |-- searchbck.png | |-- sidebarbottom.png | |-- sidebarmid.png | |-- sidebartop.png | |-- socialbcklk6.png | |-- twinfish_100.png | |-- widgetbck.png | `-- widgeth2.png |-- demo # Matches to http://alpha.roc.googlepages.com/ website, | # including HTML files. | # Create a directory to hold relevant files for each | # demo application under 'demo' directory. |-- GongfanAdv # A new directory of an application. Its original | | # access address is, | | # http://alpha.roc.googlepages.com/gongfan2.htm. | | # Create an empty gongfan2.htm page in 'demo' | | # directory. Add 'meta refresh' into the page to | | # keep consistency to the old address. Accessing | | # to the old address is redirected to the | | # gongfan2.htm under demo application directory | | # 'GongfanAdv'. | |-- favorite.png | |-- geocode.js | |-- gongfan.js | |-- gongfan2.htm | |-- logo.png | `-- mail.png |-- gongfan2.htm # A new HTML file added to keep consistency to | # the old address | |-- index.html # Line 05-07 in app.yaml guarantees accessing | # to index.html | `-- template # The original directory name of the template ` # in Google Page Creator is '-'. But in Google ` # App Engine, '-' directory is not allowed to ` # be uploaded. Therefore, 'template' directory ` # is used instead. ` # There is only one HTML file applying the ` # template. So I replace the template path ` # inside the HTML file for convince. ` # But it should be possible to configure ` # app.yaml to do URL redirect like this: ` # url: /-/(.+) ` # static_files: demo/template/\1 ` # upload: demo/template/(.+) `-- includes `-- style `-- lagoona `-- icy |-- 3c-alt-bottom.gif |-- 3c-alt-top.gif |-- body-bg.gif |-- footer-bg.gif |-- h2-bg.gif |-- h3-bg.gif |-- h4-alt-bg.gif |-- h5-bg.gif |-- header.gif |-- hr-bg.gif |-- ollist-bg.gif |-- sidebar-list-bg.gif `-- ullist-bg.gifAfter uploading files into Google App Engine, accessing to background pictures, JavaScript and CSS files of this blog are all redirected to alpha0rocdemo.appspot.com. Although Google App Engine limits request numbers and bandwidth for daily use, the quote somehow is enough for most of individual blogs.