[Solved] Git and GitHub Example Practical
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:
And fill in the relevant details:
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:
Copy the URL, or click the clipboard marked in the image above.
Now paste it the following command:
git remote add origin https://github.com/w3schools-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:
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/w3schools-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:
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:
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
That is how you edit code directly in 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 is a combination of 2 different commands:
Let's take a closer look into how
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:
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/w3schools-test/hello-world e0b6038..d29d69f master -> origin/master
Now that we have the recent
changes, we can check our
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
git log origin/master commit d29d69ffe2ee9e6df6fa0d313bb0592b50f3b853 (origin/master) Author: w3schools-test <firstname.lastname@example.org> 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: w3schools-test <email@example.com> Date: Fri Mar 26 12:42:56 2021 +0100 merged with hello-world-images after fixing conflicts ... ...</firstname.lastname@example.org>
That looks as expected, but we can also verify by showing the differences between our local
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.w3schools.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 combines the current branch, with a specified branch.
We have confirmed that the updates are as expected, and we can merge our current branch (
git merge origin/master Updating e0b6038..d29d69f Fast-forward README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-)
status again to confirm we are up to date:
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!
But what if you just want to update your local repository, without going through all those steps?
pull is a combination of
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.
pull to update our local Git:
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/w3schools-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.
Push Changes to GitHub
Let's try making some changes to our local git and pushing them to GitHub.
<link rel="stylesheet" href="bluestyle.css">
<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>
Commit the changes:
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:
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:
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/w3schools-test/hello-world.git 5a04b6f..facaeae master -> master
Go to GitHub, and confirm that the repository has a new commit:
Now, we are going to start working on branches on GitHub.
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:
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"?
Start working on an existing file in this branch. Click the "
index.html" file and start editing:
After you have finished editing the file, you can click the "Preview changes" tab to see the changes you made highlighted:
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!
Pulling a Branch from GitHub
Now continue working on our new
branch in our local Git.
pull from our GitHub repository again so that our code is up-to-date:
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/w3schools-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
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:
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:
git branch -a * master remotes/origin/html-skeleton remotes/origin/master
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:
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:
git pull Already up to date.
Which branches do we have now, and where are we working from?
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.
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:
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.
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:
git add README.md
status of the branch:
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
git commit -m "Updated readme for GitHub Branches" [update-readme 836e5bf] Updated readme for GitHub Branches 1 file changed, 1 insertion(+)
branch from our local Git repository, to GitHub, where everyone can see the changes:
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/w3schools-test/hello-world/pull/new/update-readme remote: To https://github.com/w3schools-test/hello-world.git * [new branch] update-readme -> update-readme
Go to GitHub, and confirm that the repository has a new
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:
Note: This comparison shows both the changes from
html-skeleton because we created the new branch FROM
If the changes look good, you can go forward, creating a
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:
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:
To keep the repo from getting overly complicated, you can delete the now unused branch by clicking "Delete branch".
An after you confirm that the changes from the previous branch were included, delete that as well:
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
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.
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".
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.
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!
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:
This repository needs a special name to function as a GitHub page. It needs to be your GitHub
username, followed by
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).
URL from here:
And add it as a new
git remote add gh-page https://github.com/w3schools-test/w3schools-test.github.io.git
Make sure you are on the
branch, then push the
branch to the new
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/w3schools-test/w3schools-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 Out Your Own GitHub Page
That looks good, now click the Settings menu and navigate to the Pages tab:
The GitHub page is created, and you can click the URL to view the result!