How to setup a dropbox-backed screenshot sharing website with your own domain on S3

Notice: At this time this setup is dependent on you installing a OS X app called UpShot. If you have windows/linux this guide will not work for you unless you use different software. If anyone that uses either of these OSes for personal computing would like to provide instructions for either/both then I will accept your pull request.

TL;DR: Here is the guide if you don’t wish to read the background.

I recently had a good friend of mine, Sam Marks, show me a Dropbox-based screenshot sharing front-end that ran on his own domain. He had it setup so when he took a screenshot the URL dumped into his Copy/Paste buffer was his own domain (s.smarks.me). This was an idea that we had discussed a week or so ago but I had more or less forgotten about. All credit for the idea and 90%+ of the code goes to him, all I did was simply write up the instructions.

Here is the repo that he created: sammarks/screenshot. I thought it was a really cool idea but didn’t like the idea of having to use PHP. This blog is hosted on S3 and whenever possible I like to host things on S3 because it means not paying for a server or not having multiple sites that might go down if there is an issue with the server they are on. I took a look at the index.php in his repo and quickly confirmed that this could be handled all in Javascript and set out to do just that.

It didn’t take long to get it converted to JS and to embed all the files needed into index.html so that there would only be a single file loaded (aside from the Dropbox image load). The design is very simple and clean but if you wanted to spruce it up it wouldn’t take much work to "make it your own". As my screenshots are randomly named it didn’t sense to show the title of the image in the header of the page like Sam did in his so mine simply says "Screenshot" right now. Feel free to remove the header or change it to whatever you want if you wish.

Without further ado here is the guide to set this up on your own AWS account: Github Readme. If you have any problems file a ticket on Github.