Friday, March 16, 2012

Github and Cloud9 IDE Set-up mini-tutorial

This post will describe setting up Cloud9 in-browser IDE with GitHub. I am new to both, but am excited to be able to develop "in the cloud". (Quit snickering, I know the last bit doesn't really mean much)

Since I am new to both services, the post will be describing my actual process for getting them connected. Hopefully it works by the end!

Based on the tutorial here: http://help.github.com/win-set-up-git/
Will point out which steps are important, which to cut when using no local resources.

(Way more relevant tutorial here: http://support.cloud9ide.com/entries/20637007-setting-up-a-git-project)

First: Download and Install Git


We're in the cloud baby! No downloads for us!

Next: Set Up SSH Keys

Guess what, Cloud9 generates a key for you! All you have to do is hit the "Copy" button on the right of the page from you Account Settings.


You do not have to use a local version of ssh to generate one, as is in the tutorial, so skip down to step 4 of this section:
Add your SSH key to GitHub. 
Account Settings 

but since Cloud9 makes it so easy to copy your key, you do not have to do the intermediate step of finding a hidden file and opening in a text editor to copy! Just paste it into your github |Account Settings | SSH Keys.

Hit "Add Key", and BOOM!

Step 5 of the tutorial: 
Test everything out. 
The Cloud9 IDE has a command line, but does not have a full ssh client so we can't check it correct this way...

Ok, I was going to take a screen shot of Cloud9 Account section, and just realized there is a "Add on Services", and Github is one of them! So, just click "activate" and if you are logged into Github like I was when I did this, it will work! (I am not sure if it was necessary to transfer key to Github first, if you figure out to just click activate before copying your key, please let me know in the comments and I will edit this section.)



At this point, I think we are done with the setup, now on to the next github tutorial: 

Ok, back to github and follow the directions just how they are in the tutorial.

For a project name, I am choosing: awesome_test_project, same for project description, and I just created my first repository!

Now, we need to figure out where Cloud9 diverges from the tutorial. First, go back to Cloud9. 
  • From you account page, click the big "+" (Plus) next to My Projects
  • Choose to "Clone from URL"
  • Copy and paste the URL from the github page you landed on after creating the repository
Once your project is cloned, click it in My Projects area, then choose to "Start Editing." This will open a new window where Cloud9 really starts to look like a more traditional IDE, just happens to be in your browser. Next steps should follow the help.github tutorial, so let's go back to there.
  • Create a README
    • No command line for us! In our Cloud9 IDE, create a new file using your existing window navigation skills.
    • Save (Cloud9 has great key bindings, so you can use Ctrl+S if you want)
    • Change file name to README, then click OK
  • Commit it! 
    • First chance to use the Cloud9 command line, guess what? They followed the UNIX design principle to a tee! Works just as expected! Same commands from the tutorial.
$ git add READMEStages your README file, adding it to the list of files to be committed$ git commit -m 'first commit'

OK, up to here this worked fine. Commiting to github, it is not clear from the tutorials which should be next. But, that's why I'm here! Do this now:

git push git@github.com:/mgrollins/awesome_test_project.git master

You are now pushing your files to github, and creating the master branch. Congrats!

Expect this output:
Warning: Permanently added 'github.com,207.97.227.239' (RSA) to the list of known hosts.
Warning: Permanently added 'github.com,207.97.227.239' (RSA) to the list of known hosts.
To git@github.com:/mgrollins/awesome_test_project.git
* [new branch]      master -> master
To git@github.com:/mgrollins/awesome_test_project.git
* [new branch]      master -> master

If you go back and refresh your GitHub page now, you should see your README! 

You're all ready to start developing the cloud now. Once I have some executable code, I will continue this series by discussing deploying and running said code. Let me know in the comments what you think of this post, it was fun to bring it to you!