Skip to content

Instantly share code, notes, and snippets.

@chrisjacob
Created March 24, 2011 14:20
Show Gist options
  • Save chrisjacob/885133 to your computer and use it in GitHub Desktop.
Save chrisjacob/885133 to your computer and use it in GitHub Desktop.
QUICK setup Github Pages + Cloud9 IDE for HTML/CSS/JavaScript hacking

QUICK setup Github Pages + Cloud9 IDE for HTML/CSS/JavaScript hacking

GitHub + GitHub Pages

  1. Get a GitHub account: https://github.com/
  2. Github > Dashboard > New Repository ... https://github.com/repositories/new
  3. Enter a Project Name and Description; click "Create Repository"
  4. On the project page ignore the suggested setup instructions... instead click on the "Admin" button
  5. Check the "GitHub Pages" checkbox... You'll get a popup.
  6. Click the "Automatic GitHub page Generator" button.
  7. Choose a funky colour... or go safe with just white... then click "Create Page" button
  8. Your project now has only 1 branch "gh-pages" - there is no "master" branch (which is good in our case).
  9. Copy the "Your page has been created at" url; then click in the "click here to add a homepage" area and paste in the url. Also open your GitHub Pages page in a new browser tab/window to see the page that was auto-generated.
  10. Copy the SSH read+write GIT url e.g. [email protected]:yourname/projectname.git ... you'll need this in a minute for setting up Cloud9

Cloud9 IDE

  1. Get a Cloud9 IDE account: http://c9.io (sign up with same "username" as your github account. Then instant sign in with github!)
  2. In the Cloud9 Dashboard paste in your Git SSH url into the "Paste your GIT URL here" then click the "Start editing" button (the first time you do this you will have to jump through some hoops so GitHub can talk to Cloud9 via SSH).
  3. The Cloud9 IDE should open... double click on index.html file and make some edits. You can view these changes by clicking on the "preview" button in Cloud9 IDE.
  4. In the Cloud9 IDE console type git add . then git commit -m "first commit" then git push origin gh-pages

Go back to your GitHub Pages page and see the update you've made!

Final tidy up

Now in Clound9 IDE add a README.md file; enter some text e.g. the Github Pages url; you may want to also delete the auto-generated index.html file now... then add, commit, push.

Start hacking away. You're page is hosted for free on Github Pages; and you can access Cloud9 IDE from anywhere to make updates!

WIN!

^_^

@seppkurt
Copy link

Having problems when integrating into Cloud9? read this https://github.com/ajaxorg/cloud9/issues/3122 and deactivate + activate again you github account to set the permissions again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment