Basic user cases from git, Github repo, to Github page

For one user and one branch

Photo by Roman Synkevych on Unsplash

There are a lot of learning materials for git, Github, and Github page. Today’s story is based on the following cases:

1. The files are ready and I would like to push them to a remote repo(Github)
2. I make some changes locally and would like to publish the changes to the remote repo
3. I would like to create a Github page based on the project.

Preliminary: The connection between the local computer and Github has been established, which means the email, the password has been verified and SSH keys have been created and saved.

Current situation: A DOM with HTML and CSS has been created, and the files are organized as below:

Pic 1

This web can be displayed at localhost: http://127.0.0.1:5500/index.html

What my target is: deploy a static web to Github Page.

How?

Step1: Create a public project at Github with the below settings

Pic 3

After clicking Create repository, the below page appears:

Pic 4

Now I would like to explain the commands line in line, which I believe will help me understand them greatly.

echo "# git_test_1" >> README.md

Add the content “# git_test_1” to the README.md file.

git init

Initiate a git. After this command, you will get a folder named .git, and your local repo is created.

git add README.md

Add the file README.md to the staging area.

git commit -m "first commit"

Commit to adding the file README.md, and add comments as the first commit.

git branch -M main

Give the name as main to the branch.

git remote add origin https://github.com/XueWang2019/git_test_1.git

Add a remote repo and give it a short name as origin.

git push -u origin main

Push local repo to remote repo (origin) at branch main.

Compared to the provided codes, I plan the different process as below:

1. I don’t want to add the README.md file currently → Maybe later.
2. I don’t want to just add one file (“README.md”) → I would like to add all the files.
3. I don’t want to give the branch name as main → I want to use the default branch name (which is master)
4. I don’t want to give the remote repo short name as origin → I want to give another name as pb

Step 2: Push the folder to the remote repo according to the planned processes. Try the below codes:

git init
git add .
git commit -m "first commit"
git remote add pb https://github.com/XueWang2019/git_test_1.git
git push -u pb master

Let’s check the result:

Pic 5

It works well. Now refresh the remote repo, and the files have been created.

Pic 6

Step 3: Now I think that it might be a good idea to add a README.md file.

A README.md file is added manually at my local repo and would like to push it to the remote repo. I use the below codes:

git add README.md
git commit -m "add README"
git push pb master

The codes run:

Pic 7

Refresh the remote repo: README.md file has been added.

Pic 8

Step 4: Now I would like to create a Github page based on this project.

Go to settings under this project:

Pic 9

Scroll down to Github Pages:

Pic 10

Click the link “ Check it out here!”, then go to the item source:

Pic 11

Default Branch is None, but we need to choose the Branch as master (which is created from the above step, if you name it as main, then it shows as main), then choose /docs and save.

If everything is fine, it might show as below two statuses:

1. Info as below: The site is ready to be published but hasn’t been, and your codes work well (here I use another project as an example).

Pic 12

In this case, if you click the link, it will show a 404 error like below.

Pic 13

In this case, don’t regenerate the page, again and again. Please wait. I have tried again and again, and in the end, took almost 4 hours to publish the page. There is a limitation to refresh the Github page if I am right, 10 times per hour (Please feel free to correct me if I am wrong).

2. Info as below: the site is published, now you can click the link to access your page.

Pic 14

Sometimes the page can be generated immediately, such as generating at the first time.

Summary:

1. How the codes should be organized depends on how you plan the process.
2. Based on my situation, I use the below commands to push the local repo to remote:

git init
git add .
git commit -m "first commit"
git remote add pb https://github.com/XueWang2019/git_test_1.git
git push -u pb master

2. Based on my situation, use the below codes to push changes

git add README.md
git commit -m "add README"
git push pb master

3. The meaning of the commands is explained in the story.

4. Additional info about git add:

• git add . : can add all of the files to the staging area
• Serval git add commands can be added before committing.

For example:

git add "file1.txt"
git add "file2.txt"
git commit -m "add file1 and 2"

4. Don’t regenerate your Github page too often, if you are sure that the codes work.

5. Today’s story is based on one branch and one user.

Thanks for your reading.