Publishing to GitHub Pages

You’ll need an email address you can check to complete this step. Make sure your parent is ready if you need their help!

1. Create an account on GitHub

  1. Be sure to write down your username and password on the account reminder worksheet!
    Check your email for the GitHub verification email.
  2. In your Cloud9 dashboard, click the “repositories” link on the left. You should see the coding & cupcakes project you forked. Click “clone to edit”.
  3. Give your project a name – all lowercase & no spaces, then click “Create workspace”.
    Once loaded, ensure “Workspace” in the top left nav is selected. Expand the list of project folders, and double click on “index.html” to open this file.
  4. Click preview in the top nav and select “Live Preview File (index.html)”, then click the icon to “pop out into new window” (hover over icons until you find this option). This action opens a preview pane into a new window.

2. Connecting Your Project To GitHub

You can connect your new GitHub account to Cloud9 in your account settings under “Connected Services” at Cloud9 Account Services. Please do this before moving on!

Easiest: Create a new project on GitHub and clone it into Cloud 9

  1. Go to your Dashboard
  2. Click the left side menu to select “Repositories”
  3. Select the repository you want and press “Clone”
  4. Give your project a name, and off you go!

Harder: Connect an existing project to a new GitHub repository

  1. In one tab, keep your Cloud9 project open.
  2. In a second tab, open GitHub and create a New Repository
  3. Name your project and add a description
  4. Under “Quick setup” copy the project URL. It looks like this: git@github.com:yourusername/mastery-project-example.git
  5. Back to your Cloud9 tab
  6. In your bash terminal (located at the bottom of the Cloud9 page), type the following Git commands:
    git init – starts a fresh project capable of tracking changes and deploying
    git remote add origin {link} – sets this project up to track to GitHub in the repo you just made
    git add . – Adds all existing files to the project change list
    git commit -m “Initial commit” – commits all your existing code
    git push origin master – pushes files to your branch in GitHub

3. Deploying Changes GitHub

You can repeat this step as many time as you need.

  1. In your bash terminal (located at the bottom of the Cloud9 page), type the following Git commands:
    git status – shows what has changed
    git add [filename] – adds file to the next change set. You can use git add . to add all changes
    git commit -m “{message}” – commits files with message about what you changed
    git push – pushes files to your branch in GitHub

4. Deploying to GitHub Pages

  1. In your bash terminal (located at the bottom of the Cloud9 page), type the following Git commands:
    git push origin master:gh-pages – creates a page where your repository is hosted.

5. View your page!

  1. Head over to your new github page’s website, available at: https://{username}.github.io.