Quickie: using SVN for website development

It only took me about a decade, but I finally made the switch to using version control to manage the development of my websites. Looking back, I can only wonder what took me so long. Now I use Subversion. I am happy. Why? Here are some reasons:

• It provides a seamless way for several people to collaborate on the same project without stepping on each other's toes. (Have you ever had a collaborator delete one of your crucial files?)
• You can easily document the changes you make to your code.
• If you make a mistake, You can easily "roll back" to an earlier version.

Making the switch to Subversion is well worth the modest effort required. (If I can do it, so can you.) This "Quickie" article will take you through (1) creating an online repository for your site; (2) creating a development site for doing live testing on your live server; and (3) using Subversion in routine development work. There are, doubtless, other, better, ways to accomplish all this, but this is what has worked for me.

Assumptions in this article

• You have a basic grasp of what Subversion is, what it's for, and (roughly) how to use it
• Subversion is installed on your server and on your local computers
• You have a site (we'll call it www.example.com) that's already up and running on your Apache server. I'll also assume your site lives in the server directory ~/example.com (i.e., in your home directory)
• You have login (shell) access to the server

Setup

For starters, you'll need to create two new sub-domains. Follow your web host's instructions about how to do that:

1. Create two new sub-domains: svn.example.com (for your svn repository) and dev.example.com (for your development site). [If you're using DreamHost, go to your webpanel and select Domains » Manage Domains » Add New Domain/Sub-Domain.] It's a good idea to password-protect your dev site, so that only you and your co-developers have access to your not-quite-ready-for-prime-time version of the site.
2. Create a new Subversion project. We'll give it the id "myproject", and install it to the svn.example.com URL. (Don't forget the username and password you choose here!) [If you're using DreamHost, you can create a new Subversion project right from your webpanel: select Goodies » Subversion.]

The rest of the setup happens through the login shell on your server. So log on to your server and do the following:

3. To hide the Subversion directories from web browsers, create (or edit) the .htaccess file in ~/dev.example.com. Add the following line:

   RedirectMatch 403 /\.svn.*$

4. Add this line also to the .htaccess file in ~/www.example.com.
5. Create an empty trunk/branch/tag directory structure as the initial import into the project. (In the following, "YOURNAME" is your svn username.)

   % cd % mkdir tmp % cd tmp % mkdir branches trunk tags % svn import . --username YOURNAME -m "initial import" \ http://svn.example.com/myproject Authentication realm: <http://svn.example.com:80> My Project Password for 'YOURNAME': {enter password} Adding trunk Adding branches Adding tags Committed revision 1. % cd .. % /bin/rm -fr tmp

6. Now go ahead and import your current site (www.example.com) into the repository:

   % cd ~/www.example.com % svn import . --username YOURNAME -m "importing website" \ http://svn.example.com/myproject/trunk

   If your site contains some dirs that you want to exclude from the development version (e.g., wordPress), you might prefer to import the site on a directory-by-directory basis:

   % cd ~/www.example.com % svn import ./keep_me1 --username YOURNAME \ -m "importing keep_me1 directory" \ http://svn.example.com/myproject/trunk/keep_me1 % svn import ./keep_me2 --username YOURNAME \ -m "importing keep_me2 directory" \ http://svn.example.com/myproject/trunk/keep_me2

   Or, to be more efficient about it, you could run a little shell script like this:

   #!/bin/tcsh -f foreach d ( some_dir another_dir yet_another_dir ) { svn import $d --username YOURNAME -m "importing $d directory" \ http://svn.example.com/myproject/trunk/${d} }

7. Checkout a working copy to the development site (dev.example.com):

   % svn co http://svn.example.com/myproject/trunk ~/dev.example.com

Your dev site (dev.example.com) now contains a full working copy of the latest revision of your site.

Routine workflow

1. Checkout a working copy from the repository to your local machine. (I recommend the svnX GUI client for the Mac.)
2. Develop and test your code, etc., on your local machine.
3. At logical stages (say, when you fix a bug or finish writing a new function), commit your changes to the repository. Some good habits to practice: (1) Always update your working copy before each commit. Always jot down a meaningful comment with each commit. (Instead of saying "Fixed a bug", say "Fixed function Foo() in bar.php that had wrong mySQL query.")
4. Log on to your server and update the development site:

   % svn up ~/dev.example.com

5. View the dev site. You may discover bugs on the dev site that weren't apparent on your local machine. (They might be using different versions of Apache, PHP, mySQL, etc.) If there are bugs to be worked out, iron them out on your local working copy (i.e., go back to Step 2).
6. If you're satisfied that your dev site is good to go, then either checkout a copy to your live deployment site:

   % svn co http://svn.example.com/myproject/trunk ~/www.example.com

   or update the copy already in your deployment site:

   % svn up ~/www.example.com

7. Double-check that the deployment site (http://www.example.com) is working to your satisfaction. If it's not, go back to Step 2. If it is OK, you're done!

The development cycle is now much simpler and safer. If you go on the road, just checkout a working copy onto your laptop, make your changes, and commit them back to the repository when you get the chance. If you (or your collaborator) made a mistake 6 revisions ago, just tell svn to checkout or update to an earlier revision.

Nice!