Host external files for Blogger with Google App Engine

One limitation of Blogger is the inability to upload and host your own external CSS stylesheets or JavaScript files.  There are a couple reasons why you would want to do this instead of embedding them into your template, or linking to third party hosted servers.  External files can be cached by your browser potentially reducing load times for your users, also if you are using a third party widget or gadget, there is always a chance of someone changing or removing the script on you without warning.

There are also many ways you can go about hosting external files for Blogger.  Some people use services like Dropbox, or Google Sites, or even host the files on their own web servers.  When designing ideas for my film blog, I looked at all these various solutions and finally decided on leveraging the power of Google App Engine for the task.

I found that Google App Engine offered everything I needed.  It's free (unless your blog is extremely popular and gets hundreds of thousands of page views per day), universally accessible and reliable, fast file delivery, full control of files and filetypes, and the biggest draw for me (one that I will go into further detail in a future post), the ability to run server side code.  A perfect solution for making custom specialized widgets for Blogger.

The only drawback is it's a bit complicated to setup at first, but it's easy to use once everything is in place.

Step 1. Download and install prerequisites.
Get and install Python, HERE making sure to choose the correct version for your Operating System.
You will also need to get and install the Google App Engine SDK for Python, HERE

Step 2. Sign up and Verify your account
Go HERE and use your existing Google account to sign up for an App Engine account.
You will then need to verify your account with a valid mobile number and SMS code.  This is done to try and keep out potential spammers. 

Step 3. Create Application
Once verified, create your application by specifying an Application Identifier and Application Title.  The App Identifier has to be a unique name and don't worry if the name you want is taken because it's not something your users will see or need to remember.

Step 4. Configure Application
Fire up the Google App Engine Launcher that you installed in Step 1.

Select File > Create New Application 

Enter the same Application Identifier you used in step 3, into the Application Name field
Choose any directory where you want to keep your files.
Click Create.
Now in the window you should see your new application listed.

Click on it to select it, and click on the Edit button.
You should now see a window like the one below:

Replace the code:

handlers:
- url: .*
  script: main.py

With the following:

handlers:
- url: /scripts
  static_dir: scripts

- url: /stylesheets
  static_dir: stylesheets

- url: /images
  static_dir: images

Save the file and close the WordPad window

Step 5.  Configure files and folders
Now browse to the folder where you created the application and create your scripts, stylesheets, and images folders.  You can add more folders if you like, just edit the application again and add entries following the same syntax as in Step 4, then create the corresponding child folder.

Then place all the files you want to host into their appropriate folders.

 
Step 6. Deploy Application
Once you have all your files where you want them.  Go back to the Google App Engine Launcher, make sure your application is selected, and click on Deploy.
Fill in your email and password and click OK.
If all goes well, you will see a window like this:

Step 7. Test it out
Browse to one of your files at http://YOURAPP.appspot.com/FOLDER/YOURFILENAME
and it should come up.  You can now link to your files from within your Blogger template.
For example here is one of mine: http://stupidblogtricks.appspot.com/stylesheets/nav.css

From now on, if you want to add, change, or remove files from your Google App Engine application, simply add, edit, or remove the files you want from the folders you created in step 5 and re-deploy the application.