Use Google App Engine as your own personal CDN
I was looking for a quick and dirty way to host some of my CSS and JS files, which are a few kilobytes each maybe, and could not find a reliable way to do so. I had tried using my Dropbox “public” folder and using the public URL to link directly to the files, but would constantly receive a 404 Not Found error if I refreshed the page calling the files too often. After this I tried to use Google Drive as my host, which provided a better experience as Google has recently implemented a native way to use the service to host small HTML/CSS/JS sites. The problem with this solution is that there are two calls made for the same file with one receiving a 302 Moved Permanently and the other being the actual file with correct mime type. This is a less than ideal experience, so I sought after a more permanent solution.
After alot of Googling, I stumbled upon a site which shows you how to use Google App Engine as a free CDN.
Here is a Windows 7 Guide and a Mac OS X These sites are no-longer available. The specifications for a free account on AE are a limit of 5 million requests per month, and a creation maximum of 10 instances. For strictly hosting of CSS and JS, this is the ideal solution I was looking for!
Now for the good part: implementing your own content delivery network!
Minimal command-line/terminal knowledge required beyond this point
Create your own CDN
- Signup for Google App Engine
- Install the app-engine toolkit on your machine. On OS X with
brew install google-app-engine
- Create a new local folder anywhere on your computer and add an
app.yamlfile in it. Setup your
- Push your code from the root of your local folder with
appcfg.py --oauth2 update .(note: the
--oauth2option is thrown in there so that consecutive updates don’t require a username/password combo every time you run the command)
- Now use the url
http://application-identifier-here.appspot.com/to reference your CSS/JS files
- In order to update your files, run
appcfg.py --oauth2 update .in the folder containing your files and
app.yaml, and to be safe you should add/increment the cache-buster when referencing the styles/JS. Example (add the angle brackets):
link rel="stylesheet" href="http://application-identifier-here.appspot.com/css/styles.css?v=0.1" (would become ?v=0.2 to break the browser cache)
- Enjoy your new personal CDN!
If you enjoyed this content, please let me know on Twitter! I want to hear from everyone that comes across my posts 😄