Week 1 Introduction to Github

This tutorial is intended for those who have never used Github. If you already use the terminal or the desktop app to track your projects with git, you do not have to complete this tutorial.

In this tutorial you will:

  1. Create an account
  2. Set up your desktop app and upload a sample page
  3. Publish the page
  4. Submit the address of the published page to courseworks

Step 1 Create your GitHub account

Go to github.com and sign up for an account. Using your UNI keeps things simple but you’re free to use whatever you like.

Use default settings and click Continue.

Answer survey questions as you like, and click Submit.

Once on this screen, hit Start a project.

Step 2. Make your class website project + install GitHub client

Type your repository name exactly as yourusername.github.io. (If this is not exact, you will run into problems later.) Enter a description that makes sense to you, keep the rest of the settings as in, and click Create repository.

Once on this screen, click Set up in Desktop.

You’ll be brought to this page; click on Download for macOS (or whatever OS you have.)

Install the GitHub Client as a normal application. If on Mac, you should have it in your Applications folder like so.

Open the GitHub client to see this screen. Click on Sign in to GitHub.com.

Enter your username and password.

Confirm your email if prompted.

Next, you’ll be prompted to “clone a repository.” Select the yourusername.github.io project you made earlier, make note of where the Local Path folder is on your computer, and click on the Done button.

Your GitHub Client screen should now look like this.

Find the folder that was in Local Path. By default on a Mac, this is /Documents/GitHub/username.github.io . This will be your home folder.

Step 3. Make a simple .html page and save as your site.

Using /Documents/GitHub/username.github.io as your home folder.

Choose one of your previous hw assignments. Copy and paste the working .html file and all its dependencies(any data or external .js or .css files) that it requires into the home folder. Rename your file index.html

When you go back to the github client page, you will see this that the file for your site: the index.html file are listed on the left hand panel.

  • You will just see the index.html file and no css or img folders — unless you added images and external css to your webpage.
  • You may or may not see the .git folder depending on your computer’s setting. It is hidden and there even if you don’t see it in the finder.

3. Make your webpage using Intro_to_Web.pdf and save your site.

Make sure you have completed the steps there.

Using /Documents/GitHub/username.github.io as your home folder.

Copy and paste the files(not the folder) into /Documents/GitHub/username.github.io so that your folder looks like this(you may not have the .git folder visible, it doesn’t mean that it is not there, this is a show hidden files setting on my computer):

When you go back to the github client page, you will see this that the files for your site: the index.html file are listed on the left hand panel.

  • You will just see the index.html file and no css or img folders — unless you added images and external css to your webpage.
  • You may or may not see the .git folder depending on your computer’s setting. It is hidden and there even if you don’t see it in the finder.

Step 4. Upload and publish your class site.

Continuing in the github client window, in the bottom left, locate the Summary(required) field.

Type a message in the Summary(required) field, not the Description field. The message should summarizes the changes we just made(in my case, I just wrote ”publish initial test”, you can write what you like), and click on Commit to Master.

After you click commit to master, your screen will look like below.

Now you can publish your branch. Click on Publish branch located in the top right. You will know that your files have been published when the publish branch button(below left) turns into the fetch origin button(below right)

5. Now open a new browser tab and go to https://github.com/yourusername/yourusername.github.io and you should see this screen, listing the files you uploaded and your summary message.

Within 5 minutes or so, you (or a friend) can open https://yourusername.github.io and see your page — you’ve just published the a code example at your own url. You will continue to use this repository for your final project.

If you do not see your page after a few minutes, go back to the previous screen above in your github account, click on “settings” on the top menu

Then click on “pages” on the left hand menu that appears.

From there, select main in the drop down menu labeled “Select branch” then click save. A URL will appear above this page where your page is published. Click on that link to see your page live.

Once you have a working page, submit your link to this page on Canvas.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store