For a while now, my friend and fellow Learning Tree instructor Nigel Armstrong has been urging me to put my jQuery ratings plugin (jquery.rate) on GitHub. So today I finally decided to do something about it. I found it considerably more complicated than I expected – sufficiently so that I thought it might be useful to share the how-to with others and help them learn from my pain.
What I wanted was to upload files directly from Visual Studio to GitHub without having to mess around on the command line. I managed it… eventually. Here is what you need to do if you want to do the same.
First, join GitHub if you’re not already a member. This is the easy part! Once you’re a member, it’s trivial to create a new repository – just click on the link in the top right hand corner and follow the instructions
You’ll end up creating a simple .md documentation file that appears on the home page of your repository and tells people about it:
Okay – so that part was easy. Now the difficult part – getting the files you want into your repository from Visual Studio. The first thing you need to do is download and install the Git extensions – including installing the software dependencies if you don’t already have them on your machine. This will give you all the base things you need.
When it runs, it will come with a settings window which will initially have some red bars until you fill in all the necessary settings such as your email address):
Once that’s set up, you have to create a public/private key pair. You’re going to save the private key locally and upload the public key to GitHub. This is where it gets confusing. You’d think the key would be part of your setup, but it’s not. You need to run the actual Git Extensions GUI in order to set up your keys. It looks like this:
You need to click on the Remotes link at the top and then select PuTTY | Generate or import key.
You then get a dialog that asks you to move your mouse over the blank area to create randomness:
Once it’s complete, you are given the public and private keys. You need to save the private key somewhere safe (and passphrase protect it through the dialog) and you need to select and copy the public key with CTRL+C.
Now you’re ready to go back to GitHub and install the public key so you can connect to the repository using SSH. Log in to GitHub and click on the account link in the top right corner:
Then you need to click on SSH Keys in the menu, paste your public key into the form and give the key a name.
Phew! Now we’re ready for the next step – Visual Studio integration.
First, you need to download and install the Visual Studio Git Source Control Provider Extension. The best way to do this is via Tools | Extension Manager.
Once you have it installed, you can start using Git within Visual Studio. You’ll see the Git menu item. Go to your project and select Initialize new Repository.
This will open a dialog. Click on the Initialize button and you’ll see the Git tool, which I’ve docked below my main window here:
Then we need to set up our remote repository. Go back to that Git menu item and select Manage remotes.
That brings up this dialog – it’s asking for the URL of your repository.
Go back to your repository page on GitHub and select the SSH tab.
That will give you an SSH link in the textbox. Grab it and paste into the dialog
We’re almost done with connecting now, but if you click on the Test connection button at this point, you aren’t going to like what you see – a message telling you the host does not exist:
The trouble is we haven’t loaded our key yet. So now you browse for your private key and click the Load SSH button – somewhere along the line you’ll be asked to enter the passphrase you created earlier. Now when you test your connection, you’ll get something altogether more helpful and you’ll be asked if you want to cache the public key: enter y to do so, n to leave it uncached:
So now we can go ahead and start uploading stuff to the repository. The tool that I docked at the bottom of Visual Studio had a commit link. That should do it, right?
So, you click the checkbox beside the things you want to upload (in my case, the .js file and a zip with the samples/images etc.) and then click commit… and nothing happens. You need to push as well. So you right-click on the project in Solution Explorer and select Git | Push.
And it doesn’t work. The problem is, you haven’t downloaded the .md file that’s already in the repository, so you’re not synchronized. So, try again, but this time click on Pull instead of Push. That will download the .md file (though you won’t see it in Visual Studio unless you click on the refresh icon at the top of Solution Explorer). Now you’re ready to upload files by going back, selecting and committing them and then trying Push again. I also took the opportunity to enhance the .md file by adding a little more information and a link to the online samples. I made the changes insides Visual Studio:
Then I went through the commit- Push process again, and here is the revised file on GitHub:
So – simple, huh? Well, maybe not. But hopefully it will be a bit simpler for you than it was for me, now that I’ve written this blog post! And if you’re interested in downloading the plugin from GitHub: here it is.
For other related information, check out this course from Learning Tree: