I love Dropbox. I use it everyday. I use it to share pictures, store important documents, store config files, project files in shared folder. I want to access these files from anywhere. Now I started using it to store my brand new website’s content including text and pictures. Updating my website is never been easier. My website is built in Django. Django (Python’s most popular web framework) is the framework that runs in the backend to interact with Dropbox folder (with selective sync option). Using Dropbox to store your website’s content is pretty simple and straight forward. You don’t even need to use Dropbox API.

Okey! Let’s dig into my code:

1. Setup dropbox on your server

My website runs on Amazon EC2 server. So I’ve admin privileges to install any software. Please follow these installation instructions to setup dropbox on your server. After installing it keep dropbox daemon always running. Running it (~/.dropbox-dist/dropboxd) inside screen was a quick thing.

Download Dropbox Command Line interface and put it in ~/bin

# Create ~/bin folder
$ mkdir -p ~/bin

# download dropbox CLI
$ wget -O ~/bin/dropbox.py "https://www.dropbox.com/download?dl=packages/dropbox.py"

# add execute permissions
$ chmod +x ~/bin/dropbox.py

2. Enable selective sync option

Before Dropbox downloads all your dropbox files let’s enable selective sync option using exclude command.

Check if Dropbox is running using status command

$ ~/bin/dropbox.py
status   Indexing 317 files...

$ ~/bin/dropbox.py
status   Idle

Add folders to exclude list which you don’t want to be synced:

$ ~/bin/dropbox.py exclude add ~/Dropbox/Photos ~/Dropbox/Public ~/Dropbox/Documents

3. Create a dropbox folder to store media files

Let’s create a new folder to store website’s content — my dropbox folder name is abhiomkar.in_files (~/Dropbox/abhiomkar.in_files) I’ve two sub directories inside this folder — media/ and markdown/, which stores website’s gallery images and website’s text content respectively. Remember, we can create or edit the content of this folder from anywhere. Use your local machine’s dropbox folder.

4. Setup Django to use dropbox folder

# Home directory
HOME_DIR = os.path.expanduser("~")

# Dropbox root path
DROPBOX_ROOT = HOME_DIR + "/Dropbox/abhiomkar.in_files"

# Media path inside Dropbox folder
MEDIA_ROOT = os.path.join(DROPBOX_ROOT, "media")
MEDIA_URL = '/media/'

5. Create custom template tags in Django

Django has option to create custom template tags which provides additional functionality to existing templates.

I’ve these two methods in my templatetags/extra_tags.py file:

• portfolio_images() — to scan for .jpg files in ~/Dropbox/abhiomkar.in_files/media/portfolio directory
• render_markdown() — convert markdown file to HTML

Template tag to generate Portfolio Gallery

@register.simple_tag
def portfolio_images(folder_name):
    """ takes in folder_name "Travel" and returns the image tags with image urls set to data-src attr
        input: Travel
        output: <img data-src="/media/portfolio/Travel/123.jpg" />
                <img data-src="/media/portfolio/Travel/456.jpg" />
                <img data-src="/media/portfolio/Travel/789.jpg" />
    """

try:
        file_names = filter(lambda x: re.match(".*\.jpe?g$", x, re.I), os.listdir(settings.MEDIA_ROOT + "/portfolio/" + folder_name))
    except OSError:
        return ""

file_names = sorted(file_names)

links = map(lambda x: settings.MEDIA_URL + "portfolio/" + folder_name + '/' + x, file_names)

img_tags = ''
    for link in links:
        img_tags += '<img data-src="' + link + '" />\n'

return img_tags

Template Tag to Render Markdown to HTML

@register.simple_tag
def render_markdown(filename):
    """ reads markdown files from /markdown folder and returns markup in html """
    file_path = settings.DROPBOX_ROOT + '/markdown/' + filename
    try:
        html_content = markdown(open(file_path).read())
    except IOError:
        return ""

return '<div class="markdown">' + html_content + '</div>'

Using these template tags is very easy. In my templates/portfolio.html I’ve this.

<div id="gallery-nature" class="gallery">
        {% portfolio_images "Nature" %}
</div>

The above template tag ‘portfolio_images’ scans for .jpg files in settings.MEDIA_URL + “portfolio/” + “Nature” and returns required markup for jQuery plugin - Portfoliojs.

and In my templates/about.html I’ve this line of code which renders markdown/about.md markdown file to neat html. markdown2 is the python module which was used to convert markdown files to HTML.

{% render_markdown "about.md" %}

Similarly I’ve this template tag line in all pages (projects.html, about.html, photography.html). Please do not forget to use load tag {% load extra_tags %} in your template.

6. Updating content in Dropbox

Now we’ve everything perfectly setup. You can update markdown files from your desktop, laptop or even your mobile. I use iA Writer to edit my markdown files. It is ridiculously brilliant and yet minimal software to edit text files including markdown files. It provides easy integration to Dropbox. You can buy / download iPhone App and also Mac App from here. There are many free alternatives too.

and all my portfolio gallery folders are stored in /Users/abhinay/Dropbox/abhiomkar.in_files/media/portfolio/. Adding new photo to my gallery is as easy as copying a file from one folder to another folder in you local machine. Your media / portfolio folder will be synchronised to your server which is used by website.

This setup worked with Mac OS X in local and Ubuntu 12.04.2 LTS as server running Django==1.5.1 on both. If you’ve any questions or suggestions please feel free to comment.

Happy hacking! :-)

Update

Discussion at Hacker News