Serving static files with Google Drive and the base tag

As a developer/entrepreneur sometimes you face the challenge of building the fastest possible website with the limited set of resources flourishing companies normally have at their disposal. The nicest dream and worst nightmare of a startup is being on the frontpage of a popular online publication, like Hacker News, Reddit, Techcrunch, you name it. Well… Google Drive is here to help.

You probably know this already: Google Drive lets you publish your content online for the whole world to see. Did you just launched the 1000th language that compiles into Javascript and Hacker News is going bananas about it? Just create a shared folder and put all your static content in there, all of them: Images, CSS, Javascript, videos, even the favicon.

Follow the instructions and share you contents. I am skipping this part, because this link explains it very well.


That’s it, now you have your website hosted in Google’s Content Delivery Network available at blazing fast speeds from more different geographic locations than you have ever visited, but with the ugliest possible URL. This is when you login to your $15 a month VPS and modify your index file, setting the “href” attribute of the <base> tag to the directory component of your GDrive shared URL:

Public shared content URL

Public shared content URL

 

Set your base as the Google Drive directory

Set your base as the Google Drive directory

 

All the static content (except your index file) is now being served from Google, while keeping your custom domain and all the SEO stuff that you cared so much for.

If you haven’t done so, put some reverse proxy like Varnish in front of your index file to speed it up a little. Stop worrying about transfer speeds or limit caps for the content served from Google.


Caveats

The biggest immediate peat peeve you will notice, is that all of Google Drive’s content is served through https. Older browsers will complain about mixed secure and insecure content, but come on… we are publishing a website about yet another language that compiles to Javascript! Every visitor will be using cutting edge browser versions.

You could also host your index file on https, but remember, we are a cheap startup that can not even afford an SSL certificate.

The <base> element is available since HTML 2.0, all browsers support it. But we know that not all browsers implement the specifications in similar ways, so be prepared to deal with some abnormal behavior in IE

Image credit: BuzzFeed

Image credit: BuzzFeed

 

Some of the issues you may encounter are already covered in Stack Overflow questions like this one. Take a closer look at them.


QIWA (Questions I Would Ask)

Do you really need the <base> tag?

I know, you can just point directly to each one of the images, css or javascript files in your src attributes and forget about IE misbehaving. But this post title wouldn’t have been interesting without <base> in it.

Does Google impose any limits on sharing from Drive?

I couldn’t really find an official statement about it, but this forum post scared the hell out of me. I assume that if Google has a “publish your website” feature on Google Drive, they can stand a decent amount of traffic. There’s another long thread where people state that the limit used to exist, but not anymore, though.

If I make it to the front page of Hacker News, I’ll tell you ;)