Host Your Static Files Using Google App Engine For Free

Google App Engine is cloud computing technology for developing and hosting web applications in Google-managed data centers. It virtualizes applications across multiple servers and data centers. And the good things is Google App Engine offer you a trial for free. And offer reasonable price if you have over quota. It is $0.12/GByte for outgoing bandwidth.

So what will you achieve if your site using Google App Engine to host your static files? Google data store are spread all over the world. And if you store you static files on Google App Engine, it will maximize your website speed and performance, since it will serve static files from the nearest location for your visitor. And the results are reduce your CPUs load and memory usage, save bandwidth, and speed up your website performance.

So what is static files? Static files include css files, javascript files, and images files. This files won’t change so much (not dynamic). So it’s better if you server this static files from outside your server. Because if you have more than 5K visitors/day, it will eat your CPU load, Memory and bandwidth just to serve this static file over and over. So host your static files on another server, and better if you use CDN (Content Delivery Network) server. And Google App Engine is one of them, and offer you a free trial. The free trial is enough if you have traffic less than 10k impressions per day (more or less).

Google App Engine Setup step by step

  1. First you have to have a Google account, if not registered it first, mobile phone verified need.
  2. Sign up for an Google App Engine Application, go to Mobile phone verified might be need again.
  3. Create a Google App Engine Application:
  4. Now download Python and Google App Engine SDK. (Download available at the end of this article.)
  5. Install both Python and Google App Engine SDK.
  6. Open Google App Engine Launcher, you might be need to configure it for first time. Go to Edit Preferences.

  7. Create new application, File > Create New Application, Fill Application Name (should be same as Application identifier when you create the app engine), then choose where your file will be saved.
  8. After you create the application, then now you need to edit the app.yaml file. Mine looks like this:
    application: ivan-kris
    version: 1
    runtime: python
    api_version: 1
    default_expiration: "7d"
    - url: /images
      static_dir: images
    - url: /styles
      static_dir: styles
    - url: /static
      static_dir: static

    Explanation: default_expiration means how long the static file will expired on visitor’s browser cache. Then i created 3 static directory: images, styles and static. For more information go to Python Application Configuration.

  9. Now go to your application directory and create the folder that you define in app.yaml. For my configuration i will create images, styles and static directories.
  10. Copy your static files into the directory. Don’t forget to change you css file to get the images url to: http://[app-id][images|styles|static].
  11. Deploy your application, just press the button Deploy on the toolbar.
  12. Update your Website themes to get the css style from Google App Engine.
  13. Test your website, maybe you need a couple of tweak. Firebugs Firefox Extension highly recommended for this.
  14. It’s all done.

My result after using Google App Engine and couple optimization is:
The home page loading is 6.23s (onload: 6.27s) – tested using Google Page Speed tools.
The home page loading is 4.590s – tested using WebPageTest.

So how about yours? Post your result in my comment. Cheers and good luck.

Google App Engine Requirements Download:

Google App Engine SDK


  1. Yugandhar Designer says:

    Nice Article, can u help me how to use PHP files over google app engine.

  2. Wait, what.? That would be awesome. I'm going to try to do this tonight. Dood, if I could use google 100% to host a website, that would be nice.

  3. Carly1289 says:

    I downloaded both the python and google app launcher, and when I go to create a new app, non of the options are clickable.

  4. Carly1289 says:

    Ok. I got it to work but follwing your tutorial, I got lost when you got to the application directory part. Where will I find this? Where do I paste my image? Im confused. Do I need an image url that I past?

  5. Nice tips!

    I´m using in


  6. PHP works on Google clouds too. You can see instructions and download newist working package from

  7. Patrick LeFabre says:

    Thank you for the tutorial! I've followed all the steps for a WordPress theme, but I'm stuck at step 12. I can't find where can I change the url for the style.css and now it doesn't even want to load the other static content I have uploaded through Google App engine.
    Do you know where I could change this url so that it will get the css file from Google App?

  8. Meh says:

    Hey, so I just tried this method (figured it out on my own), but there's a slight problem with it. It requires you to explicitly state the filename, so won't work, it'll have to!

    Have you found any way around this, without scripting? The only method I can think of, is either using DryDrop (, which seems like overkill, or to write a script with just one function that does nothing but render the static index.html as a template.

    • Asda says:

      In your app.yaml you should just be able to say serve index.html for '/':

      – url: /
      static_files: index.html

  9. IECA says:

    I am completely new to this. I am trying to setup a website for my small business. I just purchased a website template and received the XHTML, CSS, and Javascript files for it. Now, I'm not sure how to proceed. Currently, my domain is registered at Google Sites, but they do not accept CSS and JS files. I am looking for a new host where I can input these files and get the template to work. I'm not sure if this method is appropriate for my situation. I should be able to customize it myself (title, headings, text, etc.). I just do not know how to get to that point. Any help, info, or suggestions would be greatly appreciated.

  10. Anonymous says:

    Useful infos Ivan!!! Need to apply this on my site, I will pm you if I find difficulties on it, if you don't mind. Thx n m/ Mantap Blognya!! Ctrl+D.

  11. Johnson S. says:

    Can you tell me how to delete and / or replace a particular file in this appspot?
    Does it have any FTP Software to use for, like we use everyday?

  12. Anonymous says:

    Great Advice!

  13. Phil says:

    Okay, got a question…

    You said to download the Google App Engine SDK but there's also Google App Engine SDK for Python. So which one do I download since I'm also downloading Python?

    • Phil says:

      Hello Ivan,

      Okay, I got all the way to step 9 and want to make sure I have this
      correct. You said, "…create the folder that you define in app.yaml.
      For my configuration i will create images, styles and static

      In step 7 & 8, I created a new application and name and edit the
      app.yaml file like in your sample. The app.yami file also had the
      following so I deleted it:


      – url: .*


      So this is what I created…

      GoogleAppEngineFile (appl destination folder) >> pbsumpter (appl
      name folder w/ app, index & main); Styles folder; Images Folder;
      Static folder >>  app/index/main

      Is this correct?

      Step 10, I'm completely stomped. My WordPress site is, so where do I find these static files to
      copy to the appropriate directories (Styles, Images & Static)? I'm
      completely lost here as well… "Don’t forget to change you css file to
      get the images url to:

    • Just download Google APp Engine SDK, it is only for local server testing and upload your files.

  14. Ana Sumber says:

    Kalau Gak salah Dari namanya Mas Kris ini orang indonesia ya??? makasih tutorialnya… moga aja aku bisa seperti mas kris suatu saat nanti.

  15. anonuser says:

    Thanks for the article! I sent on Google App a little site with external CSS. I make the Google speed test (page speed online) but the system tells me that the css is missing the header "Vary: Accept-Encoding". How tell the server to put this header on css? Thank you so much!

  16. anonuser says:

    Page speed dixit: "Instructs proxy servers to cache two versions of the resource: one compressed, and one uncompressed. This helps avoid issues with public proxies that do not detect the presence of a Content-Encoding header properly" :'(

  17. limsoke says:

    brguna sekali buat saya yg newbie ini mas ivan,
    thanks yach …

Give me your feedback

This site uses Akismet to reduce spam. Learn how your comment data is processed.