Array
University of Oregon
Browse: Home / Deploy with Github Pages

Deploy with Github Pages

As a CIT student developer, the best way to can show off your skills to prospective employers is by putting your applications on the web, where people can actually see them run.

Cloud application platforms (Surge, Now, …) are an extremely efficient way to do that.

But Github Pages can be used not only to host your apps but can be used as a central hub where all of your projects can be accessed:

A) Deploy a web app using your app as a Github Project Page.

B) Use your Github User page as a code portfolio for accessing your CIT projects.

Before you Begin

  • If you’re loading jQuery in your .html file, be sure to use https:, and not http:
  • Some ad blockers will block an API request made by your Github Project Page. If you see “net::ERR_BLOCKED_BY_CLIENT” in the DevTools console, disable your ad blocker for the github.io domain.
  • The local project you deploy must be a git repo with a defined origin remote. You can check if the origin is defined with this command “git remote -v”

A. Deploy to a GitHub Project Page

GitHub Pages makes it easy to turn a GitHub repo into a static website, including AJAX.

  1. In the shell, cd to a project directory. Example: project-4-username.
  2. If there is no file named package.json, create one with this command:npm init --yesYour repo should have README.md and .gitignore files.
    The directory should include a subdirectory named client, and client contains subdirectories named javascripts and stylesheets, as shown in this illustration.

    The client directory must contain a file named index.html (so rename dogs-gallery.html, or whatever else it is).

  3. In Atom, open package.json and add a new top-level field named homepage. Remember your JSON syntax: commas are used to separate fields, not terminate them.

    Here’s an example:

    "homepage": "https://uo-cit.github.io/project-4-oshaunessy/"

    Modify the URL to use your Github user name, and the project number for the project you are using.

  4. Use npm to install the gh-pages package in your project directory. This package includes a command line utility that automates the task of pushing your repo to the gh-pages branch on the GitHub project repo you defined in the previous step:
    npm install --save-dev gh-pages
    gh-pages is one of the branches that GitHub Pages uses to publish projects (in addition to the master branch).

  5. Add a script named deploy to the scripts field in package.json. The command assumes you are deploying the contents of your client directory:
    "deploy" : "gh-pages -d client"

  6. Deploy your project to the gh-pages branch.$ npm run deploy

    The deploy command automatically pushes your changes on the local branch to the gh-pages branch on your remote repo.

  7. You’re almost done: Head to your repo’s settings tab on GitHub. In the GitHub Pages section, confirm that your project is set to use the gh-pages branch: Use the Settings tab:

    You will need to select this branch on your Github repo, rather than the master branch.

  8. You can now navigate to the URL you entered in the homepage field of your package.json file, where you’ll see your project has been deployed!Example: https://uo-cit.github.io/project-4-michaelh-uo/

B. Create a CIT Code Portfolio

Create a Github User Page and set it up as a CIT Code Portfolio:

  1. Create a Github User page.
  2. Add content to your User page. The content should describe your CIT Code Portfolio.
  3. Add a link that connects to the Project page you completed in step A, above.

Other Content you can Add to your User Page

  • Add a link that connects to your 110 folder on uoregon.edu
  • Add a link that connects to your 111 folder on uoregon.edu
  • Create a Project page for one of your other 281 repos, then add a link that connects to it
  • As you complete other CIT courses, add links that connect to content from those courses.

    For example, when you take CIT 382, you will have a repo for each project you do in the course. You can create a Project page for each of those repos, and add the links to this Portfolio page.

Demo Portfolio Page

You are welcome to copy the content from this demo page to use on your own portfolio page: mh108.github.io

The easiest way to do this is to create a fork of my repo.

A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.

Forks can be used to copy someone else’s project as a starting point for your own idea.

Here’s how to do it:

i) Open my User Page repo.
ii) In the top-right corner of the page, click Fork.
iii) That’s it! You now have a fork of my portfolio repo, in your Github account. You can copy code out of the fork, or you can clone your fork down to your computer, and open it in Atom.

Skip to toolbar