Skip to content

Latest commit

 

History

History
61 lines (48 loc) · 3.74 KB

01_github.md

File metadata and controls

61 lines (48 loc) · 3.74 KB

Using Github

What is Github?

Github is different from something called Git.

Git is a version control system that many programmers use to tracks changes in their code (or any other kinds of files). Git uses git commands using a terminal to track and update the changes we make to code (or other files).

Github is a place where we can share, collaborate on, and view the files that we are updating and tracking. YouTube: What is GitHub?

Some basic Git/Github vocabulary that you might hear in the wild includes: clone a repo, commit changes, push/pull commits, make a branch, checkout a branch, merge changes,...

Using Github to create a live web portfolio

The following is modified from github.com/susanev/uw-hcde-creative-computing

We are going to use Github, without the terminal (which is uncommon), to upload web files so that they can be shared with and viewed by others on the web.

Part 1: Create your portfolio repository

  1. Login to Github
  2. Click the + in the upper-right corner and choose New repository
  3. Fill in a repository name (e.g., cse-startup, cse-da-summer-2017, etc)
  4. Check Initialize this repository with a README
  5. Click Create repository

Part 2: Update your default branch

  1. Click Branch: master on the left-side, type gh-pages intro the text box, and press enter
  2. Click Settings, Click Branches, in the Default branch drop-down select gh-pages
  3. Click Update, and then click I understand, update the default branch.
  4. Click Code
  5. Click 2 branches
  6. Click the trash-can icon, deleting the master branch

Part 3: Uploading your p5.js work

  1. Click Code
  2. Click Upload Files
  3. Using your computer's file explorer, navigate to your Creature 2.0 files on your computer.
  4. Drag the entire folder (which contains index.html and sketch.js at a minimum) into Github's drag and drop interface box
  5. Write a short commit message to describe what you did (e.g. "Uploads my p5.js creature")
  6. Click Commit Changes

Part 4: Viewing your work

  1. Navigate to https://username.github.io/repositoryname/yourcreaturefolder/ where you replace username with your github username, replace repsoitoryname with your repository name, and replace yourcreaturefolder with the name of your creature folder. So mine is: http://sudocrystal.github.io/startup-test/creature_ex/
  2. Congratulate yourself! This website is live and you can share the link with others!
  3. Add a description to the repo with a link to the base part of this URL (everything except the creature folder) - we will use this later.

Part 5: Add all p5.js work

  1. Repeat Part 4 to add your cookie game to github
  2. Repeat Part 4 to add your pong game to github

Part 6: Creating an index page

It's kind of a pain to have to remember the folder name for each folder, so let's create a landing page with links to those pages.

  1. Click README.md
  2. Click the trash-can icon
  3. Add a commit message describing what you are doing (e.g. "Removes README")
  4. Click Create new file
  5. Name the file index.html
  6. In the body of file, put Check out some of my p5.js projects: <a href="yourcreaturefolder/">My Creature</a>, where yourcreaturefolder is the name of your creature folder.
  7. Add a commit message describing what you are doing (e.g. "Adds index.html with a link")
  8. Click Commit new file at the bottom of the page
  9. Navigate to https://username.github.io/repositoryname/ where you should now see the non-compliant HTML that you just wrote (we'll fix that soon!)
  10. Adds links to all your p5.js work