While most of us use some form of version control at the office, I find few have it at home. Not for lack of wanting though, the main problem is that setting up version control that's going to be accessible anywhere requires you have root access to a remote server. And setting up a suitable app like SVN is no easy task, one which most designers would be forgiven for not knowing.
I certainly fall into this category. I swear by the SVN client and have become very confident using it daily but setting up an SVN server from scratch is another story. But I did find a solution that has worked extremely well since the launch of this site, a hosted repository that goes by the name Beanstalk. The free account which I've been using gives you 100mb of space which allows up to 3 users and 1 repository.
Of course they only provide the repository and a slick interface for it, and you will need to communicate with it using your version control client of choice. I use SVN but there are many options available.
If you've never used a version control application then this tutorial should be a good introduction for you. I will be using Tortise SVN as I'm most familiar with it and because it has a good interface that doesn't require any command line work. To get started you will need a Beanstalk account and the Tortise SVN client.
Setup your SVN client
Download Tortise SVN for Windows (it's free) and install. Restart your computer if prompted. If you're on a Mac, Martin Ott (no relation to me) has created a Subversion package just for you.
Setup your beanstalk account
Go to the Beanstalk signup page and setup a free account. You can upgrade at a later date if you feel the need. Once your account has been created you will be automatically logged in. Note that the username and password you specify here will be used to access your repository with the Tortise SVN client or through the web interface.
Hit the Create a new repository button.
Enter a name for your repository - this is typically the name of the project you want under version control. Note that this is for just one web site.
Use the Create the repository from scratch option and tick the Create default repository structure checkbox. Hit the Next step button.
Assign permissions for each user. If this is a free account you will only see one user (you) listed.
Hit the Go to the repository overview page link.
It may take a while for the repository to be setup, but you will see a progress indicator in the right pane. This seems to hang sometimes, and I found that if the indicator stays on '1 minute remaining' for several minutes, refreshing the page fixes it.
Checkout your repository
On your PC open the directory where your local web sites are located (I run Apache and keep mine in Htdocs). Right click somewhere and select SVN Checkout. The following dialogue will appear:
Enter the URL of the repository (which can be obtained from your Beanstalk Setup page). Copy and paste it into the Tortise SVN dialogue, hit OK.
When prompted, enter the username and password you used to create your beanstalk account. Hit OK when completed.
You should now see a folder with the name of the repository on it. The green tick indicates that it's in sync with the repository on the beanstalk server. This folder will contain 3 more folders: branches, tags and trunk.
Now copy and paste all the web files of the project you want to be under version control into the trunk folder. You are now ready to do your first check in.
Right click the root folder and select (in my case, the webguyblog folder) and select SVN Commit. Select all the files and enter a comment. As this is the first check-in, it can be something like "checking in for the first time" or something similar. Hit OK and you will see all the files being added to the repository. When it's done hit OK again.
Congratulations, your site is now under version control.
Version control basics
The general idea is that every time you make a set of changes, complete a milestone or even just a single change to your local version of the web site, you perform an SVN Commit so that the files on the repository are the same. If you stuff something up you can roll back to the previous version of the entire site or just a single page. You can view a log on your Beanstalk page as well:
You can now go to another computer that has Tortise SVN installed and do a checkout of the repository. As an example, I do the bulk of my edits on my desktop PC at home, but sometimes I do them on my laptop away from home. Every time I finish some edits on my PC version I check them in, and before I start any edits on my laptop version I do an SVN Update, which pulls down the latest version of the files. When I'm done editing on the laptop I check the files in again.
SVN is smart enough to know when something isn't right as well. If a file is out of sync you can launch the differences browser and see which parts of the code of any page want to be kept or discarded. Or you can simply opt to keep an entire file you already know is the right one.
The most common Tortise SVN commands (all accessed from the Tortise SVN context menu) you will use will be:
- SVN Commit (commits your edits to the repository)
- SVN Update (gets the latest version of modified web site files from the repository)
- Repo-browser (lets you see the file revisions on the repository - this can also be done in the Beanstalk web interface)
- Cleanup (cleans any issues that arose from conflicts)
Conclusion
This concludes your very basic introduction to version control. Play around with Tortise SVN to see what all the other functions on the context menu do. It's one of the apps you will wonder how you ever got by without before.
The coolest thing is the feeling of knowing that your site is safe and sound, and that no matter what you or anyone else does to your site, you can just roll back any time.
