Version Control for Beginners using BitBucket, DropBox, and Coda 2

Note on software used: Coda 2 version 2.5.1, SourceTree version 2.0.3, OS X 10.10.1

Utilizing a version control system such as git is an invaluable practice. It allows you to ensure that you always have a backup of your site, and it facilitates team collaboration with aplomb. For our setup we use BitBucket (a git based repository) as our main backup, and we keep our local files on DropBox as a secondary backup. This article shows beginners how to set up BitBucket with DropBox and how to connect it up to Coda 2 (Portmanteau’s preferred SDE).

The reason we selected BitBucket over GitHub is because it allows for free private repos whereas GitHub charges you for that functionality (a drawback is that GitHub is much more social; for a further discussion about GitHub vs. BitBucket check out this article http://blog.takipi.com/bitbucket-vs-github-its-more-than-just-features/).

First off, click the ‘create’ button in the header. This will bring you to the creation screen below. When filling in the information note that the name you use will be the folder name on your local setup. Also, set the language to HTML/CSS. Click ‘Create repository’.
Screen Shot 2015-01-14 at 5.45.04 PM

 

Now that the repository is created we need to clone it to our local set up. I prefer to use SourceTree (free, download it here http://www.sourcetreeapp.com/) to manage my repositories rather than use the command line. I know that many other designers prefer to use the command line as you have more control, but I find that SourceTree does exactly what I want it to. So once you have SourceTree installed and configured, click the Clone in SourceTree button.

Screen Shot 2015-01-14 at 5.53.35 PM

This will launch SourceTree and bring you to the dialog box shown below. Now, I keep all of my local source files in a DropBox folder called Sites. I do this because utilizing DropBox gives me an extra layer of protection just in case something happens in between git pushes. It  might be unnecessary, but it makes me feel secure. And if I feel secure, I feel happy.

Screen Shot 2015-01-14 at 5.59.30 PM

 

When you click ‘Clone’ SourceTree will create the folder ‘greatest_git_repository_ever’ and nest a hidden .git folder inside of it. It will also bring you to the blank repository in SourceTree, as shown below.

Screen Shot 2015-01-14 at 6.09.12 PM

 

Screen Shot 2015-01-14 at 6.05.08 PM

Now, jump over to Coda 2 and add a new site. When setting it up, all you need to do is specify the same folder that SourceTree created for you, and turn on version control under Source.

Screen Shot 2015-01-14 at 6.11.42 PM

 

Screen Shot 2015-01-14 at 6.11.52 PM

Click save, and open up the project and create a new file called ‘index.html’. Inside of this file you can add some dummy text to allow you to test the git repo to ensure it’s working properly. Once the file is saved, you’ll notice that the Source Control side bar has a notification on it. This shows the number of new files the git repo is seeing. (Note you might have to add the Source Control tab by right clicking and adding Source Control). You’ll notice an ‘Add’ button next to the file you created. By clicking ‘Add’ this means that you are adding the file to be tracked by the git repo; this does not mean that the file is included in the repo yet, rather that it is being tracked.

Screen Shot 2015-01-14 at 6.20.59 PM

I would like to note here that for all of the steps moving forward you can use either Coda 2 or SourceTree. For the demo purposes I will be using SourceTree. To add index.html to the repo, click the checkbox next to the index.html file in the ‘Unstage files’ section of SourceTree shown below.

Screen Shot 2015-01-15 at 3.20.27 PM

Once you click the checkbox, the file will automatically be moved to the ‘Staged files’ section.

Screen Shot 2015-01-15 at 3.23.51 PM

When you add files to the ‘Staged files’ section, you will notice that the Source Control section of Coda 2 has also updated. It should now show a ‘commit’ button next to the file rather than ‘add’. This is part of how git repositories work, all the information about the repo is in the .git folder (which is hidden), when this is updated all the other applications using it will reflect the changes. Note that sometimes Coda 2’s Source Control needs to be refreshed before the change is reflected.

Screen Shot 2015-01-14 at 6.26.52 PM

Now, back in Source Tree we will commit all the staged files to the repo. When you click the ‘Commit’ icon at the top it will open a comment section at the bottom. These notes are what you and your collaborators will use to understand what changes you’ve made to this version of the repo, so ensure that you have an adequate level of description here. Also, click the ‘Push changes immediately to origin/master’. This will push the committed files to the BitBucket site.

Screen Shot 2015-01-15 at 3.31.25 PM

Afterwards, the Source Tree application will look blank, but if you click ‘master’ under ‘BRANCHES’ you will see that the ‘origin/master’ icon is now next to the commit. This means that the commit has been uploaded to BitBucket.

Screen Shot 2015-01-15 at 3.38.14 PM

Screen Shot 2015-01-15 at 3.40.21 PM

We can check this by going to BitBucket, and we’ll see that there is now a branch in the repo.


Screen Shot 2015-01-14 at 6.38.51 PM

Also, we can go into Coda 2, and we’ll see that index.html is no longer showing in the Source Control section. This because index.html is currently matching what what has been committed. As soon as we start editing this file (and save it), it will appear again in the Source Control section of Coda 2 and Source Tree.


Screen Shot 2015-01-14 at 6.31.39 PM

 

You now have a working repo in BitBucket! Awesome! When adding an entire site, make sure that you add a README which gives collaborators information on the repo, as well as a .gitignore which is a file that tells git to ignore specific files or folders (a good example of files you would want to ignore are images and videos which can be quite large).