Facebook Pixel

The mysterious Git: Using Git with Dreamweaver and Bitbucket


We have started using Git more and more here at Black Belt Designs, and I thought that it was time to share a little bit about what we have learned while using it. Git is a FREE, open source, distributed version control system that is designed to handle everything from small to extremely large projects with speed efficiency.

I know many people still use Adobe’s Dreamweaver and believe it or not, according to some searching online, many are doing this on a Windows based machine. Contrary to popular beliefs, Dreamweaver is a decent IDE and has many powerful tools available to use if you know how to use them. I figured today, I would go over how we got Dreamweaver to use Git as our VCS using a free repo service from Bitbucket.

This article will assume the following:

     
  1. You are on a Windows system
  2.  
  3. You are using Dreamweaver
  4.  
  5. You aren’t scared to try new things

The first thing you need to do is install Git. For the windows installer, download it from the Git website here: http://git-scm.com/download/win. The Windows installer (msi) makes installing Git on Windows pretty straightforward. For our install, we used the following settings.

Now Git is installed on your windows machine. The next step is to install TortoiseGit. TortoiseGit is available on Google Code here: https://code.google.com/p/tortoisegit/wiki/Download?tm=2. Select which version you need on your machine. Ours is a Windows 8 64-bit machine so we downloaded the 64-bit version. For the TortoiseGit install, we only make a change in selecting the SSH client. Make sure to use the OpenSSH, Git default SSH Client as shown below.

Thanks goes to Chris McKee for the next part. Chris developed a plugin for Dreamweaver called ‘gitweaver’. You can download gitweaver from Chris’ GitHub repo here: https://github.com/ChrisMcKee/gitweaver. We are using Dreamweaver CS6. If you are using the same, you will need to install using the .zxp file. Go ahead and install the plugin since we will be needing it to utilize Git from within Dreamweaver.

The next thing you will need is a repository host. We love free! Go to Bitbucket and create a free account there: https://bitbucket.org/. Once you have created this account, you will be able to develop, co-develop, and maintain all of your development project repos. They can be public or private. The choice is yours.

The first thing you need to ensure is that you have an identity on your system for Git to use. Open a Git Bash console window and verify that ssh is installed and available. Type in ssh –v.

You should see something like this:

Now we want to set up a default identity. To do this, you will need to create a key to identify you to other systems. Do this by entering ssh-keygen You should see something like this:

Accept the default by simply pressing `Enter` when asked `Enter file in which to save the key`. You will then be asked to enter a passphrase, and again to re-enter a passphrase. This will be your password to this key file we are generating.

Now verify that you have a public and private key by entering ls –a ~/.ssh. You should see two files show up named `id_rsa` and `id_rsa.pub`.

You will now need an ssh config file. Create a new document in your .ssh folder and name it `config`. Inside this file, you just want 2 lines. The bottom line will purposely be indented.

 

Host bitbucket.org
IdentityFile ~/.ssh/id_rsa

It should look like this:

Once you have created this file you will need to close and re-open the Git Bash console.

Next we want to create a `.bashrc` file so that we can automatically start our ssh agent when we launch Bash. This file will reside in your root directory, and not your .ssh directory. 

Windows doesn’t like creating files like this. I personally like Notepad++ for tasks like this. Notepad++ is also a good utility to keep in your belt.

Copy the following text to place in this new file:

 

SSH_ENV=$HOME/.ssh/environment
# start the ssh-agent
function start_agent {
echo "Initializing new SSH agent…"
# spawn ssh-agent
/usr/bin/ssh-agent | sed 's/^echo/#echo/' > "${SSH_ENV}”
echo succeeded
chmod 600 “${SSH_ENV}”
. “${SSH_ENV}” > /dev/null
/usr/bin/ssh-add
}
if [ -f “${SSH_ENV}” ]; then
. “${SSH_ENV}” > /dev/null
ps -ef | grep ${SSH_AGENT_PID} | grep ssh-agent$ > /dev/null || {
start_agent;
}
else
start_agent;
fi

Again, you will need to close and re-open Git Bash. The difference is that this time it should ask you to enter your passphrase. Once you enter your passphrase, verify that your identity was successfully added by entering ssh-add –l. You should get a confirmation like this:

Let’s add this identity key to our Bitbucket account so we will be authorized. Go to Bitbucket and log into your account. Once logged in, click on your avatar in the top right and select `Manage account`. You will be taken to your account settings where a menu on the left has an option called `SSH Keys`. Click this option to add our key. We need to copy our key from our local system, so go to your Git Bash window and type in cat ~/.ssh/id_rsa.pub. This will spit out your key to the console window. Now click on the little icon in the console window (top left corner) and select `Edit` -> `Mark`. Drag your mouse over the key starting at ssh-rsa all the way to the end. Make sure you get the entire key. Copy this to your clipboard. Now in Bitbucket we can add our key. Click on `Add key`. Name this key whatever makes sense to you and paste your key into the bottom field. Click on the `Add key` submit button in the bottom and you are done.

You should now be able to return to your Bash console and type in ssh –T <a class="__cf_email__" href="/cdn-cgi/l/email-protection" data-cfemail="47202e3307252e332532242c223369283520">[email protected]</a><script data-cfhash='f9e31' type="text/javascript">/* <![CDATA[ */!function(t,e,r,n,c,a,p){try{t=document.currentScript||function(){for(t=document.getElementsByTagName('script'),e=t.length;e--;)if(t[e].getAttribute('data-cfhash'))return t[e]}();if(t&&(c=t.previousSibling)){p=t.parentNode;if(a=c.getAttribute('data-cfemail')){for(e='',r='0x'+a.substr(0,2)|0,n=2;a.length-n;n+=2)e+='%'+('0'+('0x'+a.substr(n,2)^r).toString(16)).slice(-2);p.replaceChild(document.createTextNode(decodeURIComponent(e)),c)}p.removeChild(t)}}catch(u){}}()/* ]]> */</script> and see a proper logged in verification like this:

Let’s go create our first repo in Bitbucket and test our setup. Inside Bitbucket, you want to click on `Create repository`. Enter in the following information for a simple test repo.

We could create and add files from this point, but right now we will just clone the repo. Click on the `Clone` button in the top menu and copy your clone link.

Now in Windows, create a folder in which you want this repo to reside. We named ours `Git`. Right mouse click in this folder and select `Git Clone`.

Notice we removed the `git clone ` from the beginning of the link.

Once this is done, you are ready to make, save, update, push, pull, or whatever you need to do from within Dreamweaver. Here’s how…

Create a new site in Dreamweaver. We created a locally hosted site called `test` for this using WAMP. Once this site is created, you will be able to manage your versions using Git as your Version Control System. Create a new file, index.html. Right mouse click on the file in your site branch and you will see a Git option. Click on `Add` to add this file to your repo.

  Click `OK`.

An option box will open asking you to verify adding the file(s) to your repo. Click `OK`.

You should receive a `Success` message. Click on the `Commit` button to save a few steps. Clicking this will open the Commit window:

Now you can add a note to indicate what you have done to the project and commit these changes. We like adding commit date and author to keep changes better documented. This is only adding the changes to your local Git repo for now. Once the commit processes, you will be presented with a success message and an option to Push.

Clicking this begins the process of pushing these changes to your repo on Bitbucket. In this example we are keeping it simple. Just click `OK` to push these changes to your repo on Bitbucket now.

You should now see a push success message.

Congratulations! You have now pushed your first file to your Bitbucket repo using Dreamweaver.

Go to Bitbucket and refresh the page. You should see a log of what has transpired.

Clicking on `Source` will show your file that was created on your local build and pushed to the repo.

For more on Git and a little practice, go to the Code School Git tutorial here: http://try.github.io/levels/1/challenges/1.

Have fun and happy coding!

Share this post

Comments

comments powered by Disqus