How to Git & GitHub?

What is Git?

• A program you run from the command line
• A distributed version control system for tracking changes in source code

It was created in 2005 by Linus Torvalds, the principal developer of Linux.

Programmers use Git so that they can keep the history of all the changes to their code. This means that they can rollback changes (or switch to older versions) as far back in time as they started using Git on their project.

You know how Google Docs allow you to have a “version history” and move between different versions whenever you want? Git enables you to do that with any folder — and its contents — on your computer!

A codebase in Git is referred to as a repository, or repo, for short.

What is GitHub?

• A hosting service for Git repositories
• A web interface to explore Git repositories
• A social network of programmers
• We all have individual accounts and put our codebases on our GitHub account
• You can follow users and star your favorite projects
• A place where developers can access public codebases

What is the difference between Git and GitHub? Find an answer here.

Create Account

Create Account

• Sign up for a GitHub account.
• Download the GitHub Desktop application and install it on your computer.

Create Repository

• Log into github.com and create a new repository using the link under the + icon in the upper right of the GitHub homepage.

• Name the repository. For example, I named this one didactic-eureka. Thanks for the recommendation, GitHub! Check the box to add a README file. This repository will be the home for all your assignments and exercises for this class. Click the green create repository button.

• Once you’ve initialized the repository, it will take you to the home screen. Click the green Code button. Then select, Open with GitHub Desktop.

• When you press this button, you may see an alert window asking, Open GitHub Desktop? Click the Open GitHub Desktop button in the alert box. This will launch the GitHub Desktop application.

• Now…(this is important) choose a place on your computer where you want this repository to live. My local path is: /Users/your-computer-name/Documents/GitHub/didactic-eureka. Click the blue Clone button.

• Yay! You’re in your local repository. GitHub Desktop provides some friendly suggestions for where to go next:

1. Open the repository in your code editor (Visual Studio Code etc)
2. View the files in Finder
3. Open the repository page on GitHub in your web browser

• If you select, view the files in finder, you will be taken to a folder named ‘didactic-eureka’, this is the ‘local’ version of your github repository. It’s local address is: /Users/your-computer-name/Documents/GitHub/didactic-eureka. We will use this as a space to archive your projects and exercises.

Create Your First Webpage

• Open the repository in your code editor.
• Make a new HTML file named index.html in Visual Studio Code (or your code editor of choice).

• Copy the basic HTML structure from here and paste it into your index.html file (or, use the following VS Code shortcut).

• Modify the code with the words Hello World and save the file to your local GitHub repository.

Push Local Code to Remote Repository

• Confirm that you see changes made to your file in the Changes Tab on the GitHub Desktop app.

• Click the blue Commit to main button, then press Push to Origin.
• Now, check to make sure that your changes were pushed to the main github.com repository. Reload the page if you don’t yet see changes.

Publish Your Website

• In your github.com repository, find the Settings tab.
• Scroll to the GitHub Pages section. Under the Source heading, click the dropdown menu and select the main branch as your publishing source. Keep the /(root) folder for your publishing source.
• Click Save.
• Now, drumroll please! In the same GitHub Pages section, you should see a green success bar appear that says: “Your site is published at https://yourusername.github.io/didactic-eureka”
• Click on the link. Voila!

Fin.