HelpSpa.com

Introduction
One of the biggest challenges I faced when I started building websites was keeping reliable and organized copies of website versions, and then trying to figure out what the difference was among the different version I had created. This article will present you with an overview of my personal system for maintaining web site versions, and how to easily find the version you need to access when you need (as we all do sometimes) to roll back from a backup.

Part I of this article will review why as a web designer/developer you need version control, the concepts behind version control, and how to setup and maintain the directory structure and copies of the various versions of your site.

Part II of this article will go over how you keep track of what the difference is among all of the versions, now that you’ve go multiple folders and multiple versions of the site.

Why is Version Control Necessary?
Every site needs to have a backup copy. And as you make modifications to a site, it’s critically important to save at “good working point” or “good stopping point”. The reason is simple. Let’s assume you have a working website, and you make a change to the style sheet that cripples the site. If that’s the only change, then no problem…you restore the .css file from the backup copy and you are done.

But what happens if you added three new classes to the stylesheet, removed some javascript from the header section of the template page, changed the names of some of the fields on the contact form, and then upon reloading the site you find that everything is broken. The header is now shifted all the way to the right, none of the text is the correct font, and your form processing script is returning errors. Where did you make the mistake?

A Moment for Basic Setup

Let’s assume for this discussion that web have an established site that we built a few months ago, and that we are using Dreamweaver (doesn’t matter which version). Those familiar with Dreamweaver know that you need to setup or define a site, and in doing so you must select the root folder for the site and the images folder.

My structure is always like this:

/website
/website/images

Note that you can put the client content images anywhere such as website/galleries, but I put the images for the actual design in the /images folder.

The key to my system is that the current version of the site is ALWAYS located in the /website directory.

How to Setup the Website Version Control System

So lets say that now we have a completed site in the /website directory and we need to make updates. The first thing to do is to copy the /website folder and rename the folder: /website_v1.0-backup. Now if we make a simple change to the stylesheet and screw it up, we can always restore the file from backup from the 1.0 version. At this point you have two directories, a /website directory, and a /website_v1.0_backupdirectory.

Wait! Hold it a Minute! How Do I Safely Restore the Backup with Dreamweaver?
Great question! And that’s why I paused to address is now! Earlier on I said the key is to always keep the most current copy of the site in the /website folder and now you’ll see why. Assume we did totally ruin the stylesheet in the above example and needed to “go back” to the version 1.0. You could (and DON’T do this) go back into Dreamweaver and then just set the site root folder to /website_v1.0_backup. Right? Done and easy? Wrong. You could do it like this but changing the root folder CAN cause Dreamweaver to have path errors, and believe me, it’s not worth the risk. The best thing to do in this situation is to just go back to the version 1.0 directory, where we know the original stylesheet file is located, and then just copy this backed up stylesheet file from the /website_v1.0_backup directory, to the /website directory and you’ll be back to where you started from.

Back to Version Control

Ok. So as we talked about above we have the website and we have a version 1.0. Let’s go back to the original example I gave at the beginning of the article — the one where the developer changed the stylesheet, the template and the form code. Let’s take this example and apply my version control system.

The thing that you need to do whenever you make a change to a website is to decide when to stop and make a backup. When to stop and save a “good copy” is up to you, and is based on your experience. I often find that when I am working on a stylesheet, I’ll stick with only fixing or updating one class at a time. I then save it and check in Firefox and then IE. If it works, I move forward. Your comfort level with debugging and familiarity with coding will let you know when you need to stop.

So in our example, we’d go ahead and take the site in the /website directory and change the stylesheet for our needed site update. (Recall that we made an original backup before we changed anything and we called that version 1.0). So now we go to the stylesheet in the original site (the /website directory) and we update the stylesheet. All of our changes works as planned, so let’s save a version. We’ll copy the entire contents of the /website directory (e.g the whole site) to a directory that we’ll call website_v1.1_backup. I’ve decided to call it 1.1 because it’s a minor change. So now we have three directories: the original (/website) directory, version 1.0, and version 1.1.

Now let’s make the template change. That’s usually a big change so we’ll make that change and again, we’ll copy the /website directory (recall that we always keep the most current site in the /website directory — are you sick of me saying that yet?) to a new directory that we’ll call /website_v2.0_backup”. Now that we verify that all of that works, we’ll change the code on the contact form and create another version, with the procedure above, that we’ll call 2.1. I chose to go with 2.1 as opposed to 3.0 because changing some code in the contact form doesn’t really warrant a new version.

So we’ve gone through a lot in Part I of this article, and you are almost there. We now have a current site (which if you are keeping track is 2.1) and we have backups for version 1.0, 1.1, 2.0, and 2.1

In Part 2 I am going to talk about how to actually keep track of all of these version.