Managing a Static Site with Dropbox

Posted by brian on 06-29-2016
posts

Managing a static site, like this one generated using Jekyll, can be difficult, and for non-programmers nearly impossible. I started searching for a better solution.

Problem: Give non-programmers a way to easily update their own site content

Nerd Level: ★★★☆☆

&TLDR;

  1. Create the site in Jekyll, other generators could be substituted here.
  2. Push site repository to production server, just the files, note _site/
  3. Copy new content files to shared Dropbox folder.
  4. Dropbox syncs those files to your webserver.
  5. Webserver recognizes the file changes and triggers a script to run.
  6. Script clones the site repository for the site code base.
  7. Script clones a build script that handles site rebuild and file movement on the server.
  8. Script cleans up.

Taking this approach requires a few things, a bare bones webserver and some basic server chops. There are other options for updating, deploying, and managing your static site. One popular option is to use Github Pages to host your site for free. All you do is develop your site locally and push to Github, the rest is automatic. The problem I found with Github pages was that plugins weren’t supported and I like more flexibility in my hosting.

You can always build locally, however complex your static site, and push to a remote webserver. But I wanted something easier, something that removed as much friction for updating my sites. Honestly I wanted a solution that I could set up a technically savvy client to use. I want to move away from using a CMS like Wordpress or Drupal and use static sites as much as possible.

This allows clients to update their own content without developer interaction. It makes managing our own site more seamless.

Example deployment script:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/bin/bash

DROPBOX = /home/user/Dropbox/my-shared-folder/
JEKYLL = /home/user/.rbenv/shims/jekyll
REPO = /home/user/repo/mysite.git
TEMPREPO = /home/user/tmp/git
WEBSERVERLOC = /var/www/mysite

# Get the latest repo
git clone $REPO $TEMPREPO
sleep 20

# Sync all of content from Dropbox folder
rsync -a $DROPBOX $TEMPREPO/_posts

# Change directory, run Jekyll build
cd $TEMPREPO
$JEKYLL build
sleep 10

# Move generated site to web server for serving
cp -r $TEMPREPO/_site/* $WEBSERVERLOC
sleep 60

# Clean up temporary files
chmod 0777 -R $TEMPREPO
rm -rf $TEMPREPO

exit

Additional scripts coming soon