Git and GitHub Getting Started

GitHub Account

Go to GitHub and sign up for an account:

Note: Remember to use the same e-mail address you used in the Git config.


Create a Repository on GitHub

Now that you have made a GitHub account, sign in, and create a new Repo:

GitHub New Repo

And fill in the relevant details:

GitHub Create New Repo

We will go over the different options and what they mean later. But for now, choose Public (if you want the repo to be viewable for anyone) or Private (if you want to choose who should be able to view the repo). Either way, you will be able to choose who can contribute to the repo.

Then click “Create repository”.


Push Local Repository to GitHub

Since we have already set up a local Git repo, we are going to push that to GitHub:

GitHub Push Local

Copy the URL, or click the clipboard marked in the image above.

Now paste it the following command:

Example

git remote add origin https://github.com/learnkro-test/hello-world.git

git remote add origin URL specifies that you are adding a remote repository, with the specified URL, as an origin to your local Git repo.

Now we are going to push our master branch to the origin url, and set it as the default remote branch:

Example

git push --set-upstream origin master
Enumerating objects: 22, done.
Counting objects: 100% (22/22), done.
Delta compression using up to 16 threads
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 92.96 KiB | 23.24 MiB/s, done.
Total 22 (delta 11), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (11/11), done.
To https://github.com/learnkro-test/hello-world.git
 * [new branch]      master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.

Note: Since this is the first time you are connecting to GitHub, you will get some kind of notification you to authenticate this connection.

Now, go back into GitHub and see that the repository has been updated:

GitHub New files in repo

Git GitHub Edit Code

Edit Code in GitHub

In addition to being a host for Git content, GitHub has a very good code editor.

Let’s try to edit the README.md file in GitHub. Just click the edit button:

GitHub Edit File

Add some changes to the code, and then commit the changes. For now, we will “Commit directly to the master branch”.

Remember to add a description for the commit:

GitHub Commit Changes

That is how you edit code directly in GitHub!

Git Pull from GitHub

Pulling to Keep up-to-date with Changes

When working as a team on a project, it is important that everyone stays up to date.

Any time you start working on a project, you should get the most recent changes to your local copy.

With Git, you can do that with pull.

pull is a combination of 2 different commands:

  • fetch
  • merge

Let’s take a closer look into how fetchmerge, and pull works.


Git Fetch

fetch gets all the change history of a tracked branch/repo.

So, on your local Git, fetch updates to see what has changed on GitHub:

Example

git fetch origin
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 733 bytes | 3.00 KiB/s, done.
From https://github.com/learnkro-test/hello-world
   e0b6038..d29d69f  master     -> origin/master

Now that we have the recent changes, we can check our status:

Example

git status
On branch master
Your branch is behind 'origin/master' by 1 commit, and can be fast-forwarded.
  (use "git pull" to update your local branch)

nothing to commit, working tree clean

We are behind the origin/master by 1 commit. That should be the updated README.md, but lets double check by viewing the log:

Example

git log origin/master
commit d29d69ffe2ee9e6df6fa0d313bb0592b50f3b853 (origin/master)
Author: learnkro-test <[email protected]>
Date:   Fri Mar 26 14:59:14 2021 +0100

    Updated README.md with a line about GitHub

commit e0b6038b1345e50aca8885d8fd322fc0e5765c3b (HEAD -> master)
Merge: dfa79db 1f1584e
Author: learnkro-test 
Date:   Fri Mar 26 12:42:56 2021 +0100

    merged with hello-world-images after fixing conflicts

...
...

That looks as expected, but we can also verify by showing the differences between our local master and origin/master:

Example

git diff origin/master
diff --git a/README.md b/README.md
index 23a0122..a980c39 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,4 @@
 Hello World repository for Git tutorial
 This is an example repository for the Git tutoial on https://www.learnkro.com

-This repository is built step by step in the tutorial.
-
-It now includes steps for GitHub
+This repository is built step by step in the tutorial.
\ No newline at end of file

That looks precisely as expected! Now we can safely merge.



Git Merge

merge combines the current branch, with a specified branch.

We have confirmed that the updates are as expected, and we can merge our current branch (master) with origin/master:

Example

git merge origin/master
Updating e0b6038..d29d69f
Fast-forward
 README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

Check our status again to confirm we are up to date:

Example

git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

There! Your local git is up to date!


Git Pull

But what if you just want to update your local repository, without going through all those steps?

pull is a combination of fetch and merge. It is used to pull all changes from a remote repository into the branch you are working on.

Make another change to the Readme.md file on GitHub.

GitHub Update Readme

Use pull to update our local Git:

Example

git pull origin
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 1), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 794 bytes | 1024 bytes/s, done.
From https://github.com/learnkro-test/hello-world
   a7cdd4b..ab6b4ed  master       -> origin/master
Updating a7cdd4b..ab6b4ed
Fast-forward
 README.md | 2 ++
 1 file changed, 2 insertions(+)

That is how you keep your local Git up to date from a remote repository. In the next chapter, we will look closer at how push works on GitHub.

Git Push to GitHub

Push Changes to GitHub

Let’s try making some changes to our local git and pushing them to GitHub.

Example

<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
<link rel=”stylesheet” href=”bluestyle.css”>
</head>
<body>

<h1>Hello world!</h1>
<div><img src=”img_hello_world.jpg” alt=”Hello World from Space” style=”width:100%;max-width:640px”></div>
<p>This is the first file in my new Git Repo.</p>
<p>This line is here to show how merging works.</p>
<div><img src=”img_hello_git.jpg” alt=”Hello Git” style=”width:100%;max-width:640px”></div>

</body>
</html>

Commit the changes:

Example

git commit -a -m "Updated index.html. Resized image"
[master e7de78f] Updated index.html. Resized image
 1 file changed, 1 insertion(+), 1 deletion(-)

And check the status:

Example

git status
On branch master
Your branch is ahead of 'origin/master' by 1 commit.
  (use "git push" to publish your local commits)

nothing to commit, working tree clean

Now push our changes to our remote origin:

Example

git push origin
Enumerating objects: 9, done.
Counting objects: 100% (8/8), done.
Delta compression using up to 16 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 578 bytes | 578.00 KiB/s, done.
Total 5 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (3/3), completed with 3 local objects.
To https://github.com/learnkro-test/hello-world.git
   5a04b6f..facaeae  master -> master

Go to GitHub, and confirm that the repository has a new commit:

GitHub New Commit

Now, we are going to start working on branches on GitHub.

Git GitHub Branch

Create a New Branch on GitHub

On GitHub, access your repository and click the “master” branch button.

There you can create a new Branch. Type in a descriptive name, and click Create branch:

GitHub Create New Branch

The branch should now be created and active. You can confirm which branch you are working on by looking at the branch button. See that it now says “html-skeleton” instead of “main”?

GitHub New Branch Created

Start working on an existing file in this branch. Click the “index.html” file and start editing:

GitHub Edit File

After you have finished editing the file, you can click the “Preview changes” tab to see the changes you made highlighted:

Preview Changes and Commit

If you are happy with the change, add a comment that explains what you did, and click Commit changes.

You now have a new branch on GitHub, updated with some changes!

Git Pull Branch from GitHub

learn How to Pulling a Branch from GitHub

Now continue working on our new branch in our local Git.

Lets pull from our GitHub repository again so that our code is up-to-date:

Example

git pull
remote: Enumerating objects: 5, done.
remote: Counting objects: 100% (5/5), done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
Unpacking objects: 100% (3/3), 851 bytes | 9.00 KiB/s, done.
From https://github.com/learnkro-test/hello-world
 * [new branch]      html-skeleton -> origin/html-skeleton
Already up to date.

Now our main branch is up todate. And we can see that there is a new branch available on GitHub.

Do a quick status check:

Example

git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean

And confirm which branches we have, and where we are working at the moment:

Example

git branch
* master

So, we do not have the new branch on our local Git. But we know it is available on GitHub. So we can use the -a option to see all local and remote branches:

Example

git branch -a
* master
  remotes/origin/html-skeleton
  remotes/origin/master

Note: branch -r is for remote branches only.

We see that the branch html-skeleton is available remotely, but not on our local git. Lets check it out:

Example

git checkout html-skeleton
Switched to a new branch 'html-skeleton'
Branch 'html-skeleton' set up to track remote branch 'html-skeleton' from 'origin'.

And check if it is all up to date:

Example

git pull
Already up to date.

Which branches do we have now, and where are we working from?

Example

git branch
* html-skeleton
  master

Now, open your favourite editor and confirm that the changes from the GitHub branch carried over.

That is how you pull a GitHub branch to your local Git.

Git Push Branch to GitHub

How To Push a Branch to GitHub

Let’s try to create a new local branch, and push that to GitHub.

Start by creating a branch, like we did earlier:

Example

git checkout -b update-readme
Switched to a new branch 'update-readme'

And we make some changes to the README.md file. Just add a new line.

So now we check the status of the current branch.

Example

git status
On branch update-readme
Changes not staged for commit:
  (use "git add ..." to update what will be committed)
  (use "git restore ..." to discard changes in working directory)
        modified:   README.md

no changes added to commit (use "git add" and/or "git commit -a")

We see that README.md is modified but not added to the Staging Environment:

Example

git add README.md

Check the status of the branch:

Example

git status
On branch update-readme
Changes to be committed:
  (use "git restore --staged ..." to unstage)
        modified:   README.md

We are happy with our changes. So we will commit them to the branch:

Example

git commit -m "Updated readme for GitHub Branches"
[update-readme 836e5bf] Updated readme for GitHub Branches
 1 file changed, 1 insertion(+)

Now push the branch from our local Git repository, to GitHub, where everyone can see the changes:

Example

git push origin update-readme
Enumerating objects: 5, done.
Counting objects: 100% (5/5), done.
Delta compression using up to 16 threads
Compressing objects: 100% (3/3), done.
Writing objects: 100% (3/3), 366 bytes | 366.00 KiB/s, done.
Total 3 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 2 local objects.
remote:
remote: Create a pull request for 'update-readme' on GitHub by visiting:
remote:      https://github.com/learnkro-test/hello-world/pull/new/update-readme
remote:
To https://github.com/learnkro-test/hello-world.git
 * [new branch]      update-readme -> update-readme

Go to GitHub, and confirm that the repository has a new branch:

GitHub New Branch

In GitHub, we can now see the changes and merge them into the master branch if we approve it.

If you click the “Compare & pull request”, you can go through the changes made and new files added:

GitHub Branch Changes

Note: This comparison shows both the changes from update-readme and html-skeleton because we created the new branch FROM html-skeleton.

If the changes look good, you can go forward, creating a pull request:

GitHub Pull Request

A pull request is how you propose changes. You can ask some to review your changes or pull your contribution and merge it into their branch.

Since this is your own repository, you can  merge your pull request yourself:

GitHub Merge Pull Request

The pull request will record the changes, which means you can go through them later to figure out the changes made.

The result should be something like this:

GitHub Merge Confirmed

To keep the repo from getting overly complicated, you can delete the now unused branch by clicking “Delete branch”.

GitHub Delete Branch

An after you confirm that the changes from the previous branch were included, delete that as well:

GitHub Delete Skeleton Branch

Git GitHub Flow

Working using the GitHub Flow

On this page, you will learn how to get the best out of working with GitHub.

The GitHub flow is a workflow designed to work well with Git and GitHub.

It focuses on branching and makes it possible for teams to experiment freely, and make deployments regularly.

The GitHub flow works like this:

  • Create a new Branch
  • Make changes and add Commits
  • Open a Pull Request
  • Review
  • Deploy
  • Merge

You should already have a good understanding of how this works from the previous chapters. This chapter focuses on understanding how the flow makes it easy for you to work together.


Create a New Branch

Branching is the key concept in Git. And it works around the rule that the master branch is ALWAYS deployable.

That means, if you want to try something new or experiment, you create a new branch! Branching gives you an environment where you can make changes without affecting the main branch.

When your new branch is ready, it can be reviewed, discussed, and merged with the main branch when ready.

When you make a new branch, you will (almost always) want to make it from the master branch.

Note: Keep in mind that you are working with others. Using descriptive names for new branches, so everyone can understand what is happening.


Make Changes and Add Commits

After the new branch is created, it is time to get to work. Make changes by adding, editing and deleting files. Whenever you reach a small milestone, add the changes to your branch by commit.

Adding commits keeps track of your work. Each commit should have a message explaining what has changed and why. Each commit becomes a part of the history of the branch, and a point you can revert back to if you need to.

Note: commit messages are very important! Let everyone know what has changed and why. Messages and comments make it so much easier for yourself and other people to keep track of changes.



Open a Pull Request

Pull requests are a key part of GitHub. A Pull Request notifies people you have changes ready for them to consider or review.

 You can ask others to review your changes or pull your contribution and merge it into their branch.


Review

When a Pull Request is made, it can be reviewed by whoever has the proper access to the branch. This is where good discussions and review of the changes happen.

Pull Requests are designed to allow people to work together easily and produce better results together!

If you receive feedback and continue to improve your changes, you can push your changes with new commits, making further reviews possible.

Note: GitHub shows new commit and feedback in the “unified Pull Request view”.


Deploy

When the pull request has been reviewed and everything looks good, it is time for the final testing. GitHub allows you to deploy from a branch for final testing in production before merging with the master branch.

If any issues arise, you can undo the changes by deploying the master branch into production again!

Note: Teams often have dedicated testing environments used for deploying branches.


Merge

After exhaustive testing, you can merge the code into the master branch!

Pull Requests keep records of changes to your code, and if you commented and named changes well, you can go back and understand why changes and decisions were made.

Note: You can add keywords to your pull request for easier searching!

Git GitHub Pages

Host Your Page on GitHub

With GitHub pages, GitHub allows you to host a webpage from your repository. Let’s try to use GitHub Pages to host our repository.


Create a New Repository

Start by signing in to GitHub. GitHub pages need a special name and setup to work, so we start by creating a new repository:

GitHub Create New Repository

This repository needs a special name to function as a GitHub page. It needs to be your GitHub username, followed by .github.io:

GitHub Pages Naming Rules

Push Local Repository to GitHub Pages

We add this new repository as a remote for our local repository, we are calling it gh-page (for GitHub Pages).

Copy the URL from here:

GitHub Copy Repository URL

And add it as a new remote:

Example

git remote add gh-page https://github.com/learnkro-test/learnkro-test.github.io.git

Make sure you are on the master branch, then push the master branch to the new remote:

Example

git push gh-page master
Enumerating objects: 33, done.
Counting objects: 100% (33/33), done.
Delta compression using up to 16 threads
Compressing objects: 100% (33/33), done.
Writing objects: 100% (33/33), 94.79 KiB | 15.80 MiB/s, done.
Total 33 (delta 18), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (18/18), done.
To https://github.com/learnkro-test/learnkro-test.github.io.git
 * [new branch]      master -> master

Note: If this is the first time you are connecting to GitHub, you will get some kind of notification to authenticate this connection.

Check that the new repository has received all the files:

Check GitHub to see that everything is present

Check Out Your Own GitHub Page

That looks good, now click the Settings menu and navigate to the Pages tab:

Navigate to Pages tab, and see your URL

The GitHub page is created, and you can click the URL to view the result!

Leave a Comment