Host website assets on Dropbox and Google Drive

By the end of this you'll be able to take a file you already keep in Dropbox or Google Drive and use it as the source of an image, PDF or audio player on a web page. The idea is the same for both: a share link opens a preview page, so you edit the link until it points straight at the file.

That makes either service a handy place to park a few assets for a small site. It isn't a hosting setup for a busy one, and the last section covers where it stops.

Why the share link doesn't work as it is

When you copy a share link, it opens Dropbox's or Google's own viewer around your file. If an image tag or an audio player points at that link, it gets a web page back instead of the file, and nothing displays. Everything below changes the link so the response is the file itself.

Dropbox

Upload the file and copy its regular share link. Then change the end of the link. Dropbox's help documents two options: add ?raw=1 and the browser shows the file directly instead of the preview page, or add ?dl=1 to force a download. For an image or PDF on a page you want ?raw=1, because the browser should display the file, not save it.

You'll also see a second method: change www.dropbox.com in the link to dl.dropboxusercontent.com. [Corey: re-test this one before publishing. Does a dl.dropboxusercontent.com link still load an image today? Keep this paragraph if so, cut it if not.]

Dropbox also notes that shared links don't render HTML in the browser. So this works for images, PDFs and similar files, but not for serving a page or a script.

Google Drive

Set the file's sharing to anyone with the link and copy the share link. The long string between /d/ and the next slash is the file ID. Drop it into this pattern: https://drive.google.com/uc?export=download&id=FILE_ID. Use that for images and PDFs.

Audio files take a variation: https://docs.google.com/uc?export=open&id=FILE_ID. The differences are docs.google.com in place of drive.google.com, and export=open in place of export=download.

[Corey: re-test both Drive patterns before publishing, with an image, a PDF and an mp3. Google can change them without notice, so it's worth one pass.]

Where this stops

Both services built these links for sharing a file with a person, not for serving a busy website. If a lot of people load your page, the provider becomes the weak point, so keep this for low-traffic, simple sites.

Two practical things. Deleting or moving the file, or changing who can see it, breaks the image on your page, so keep these files somewhere you won't tidy up by accident. And since the provider controls how the links behave, check them again now and then.

Which one to use

If you already use one of them, use that one. The setup takes the same effort either way, and moving files to a different service later means editing every URL.

What to do next

Paste the final URL into a private browser window. If you see the file itself and not a preview page, it'll work on your site. If you outgrow this setup, move the files to a host built for assets and swap the URLs.

FAQ

How do I get a direct link from Dropbox?

Copy the share link and add ?raw=1 to the end so the browser shows the file, or ?dl=1 to force a download. Both are described in Dropbox's help.

How do I get a direct link from Google Drive?

Take the file ID from the share link and use https://drive.google.com/uc?export=download&id=FILE_ID. For audio, use https://docs.google.com/uc?export=open&id=FILE_ID.

Can I serve a web page or script from Dropbox?

Dropbox says shared links don't render HTML in the browser, so this works for images and PDFs but not for pages.