How to Push Your Code to Github and Publish Your First Page

Version control is an important concept in programming.

Imagine you are adding a feature to an existing program. But somehow you screw it up. The whole program is not working anymore. What would you do?

Without version control, you will have to reverse all the code you have written. That’s assuming you remember what you wrote.

With version control, you can go back to the working version with a simple command.

Git is one of the most popular version control systems.

In this guide, I will share how you can set up Git on the HTML demo. Also, you will publish your HTML demo online so anyone can view your page.

Setting Up Git in Development Environment

The first step is to set up Git in your development environment. To do this, you have to type in the following command in your terminal:

git init

This command will initialise the git repository. Imagine creating an empty folder.

Then the next command is:

git add .

Remember the dot ( . ) after the add. The dot signals everything. This command means you want to add everything in this folder to Git.

You can check the status of the files added with the command:

git status

You see that Git recognises there are 3 new files under “Changes to be committed:”

To commit them type the following command:

git commit -m “Initial commit”

To commit the files means that you are committing the changes. “-m” is the message required for the commit. Type in any message you want. Usually, the message is something that you have done in this commit.

At this stage, you have set up a version control system in your development environment.

Pushing Your Code to Remote Repository

Most developers do not stop at setting git in the development environment. For collaboration purposes, they usually use a remote repository to store the code as well. Remote means not stored in your computer.

Github is a very popular remote repository. You can think of Github as Dropbox or Google Drive for your code. To upload your code to Github, you have to push them.

Note: Make sure you sign up an account with Github first.

Here’s how you do it:

Step 1: Create a new repository in Github

Step 2: Name your Repository

Give your repository a name and description. Choose “Public”. Then click on “Create Repository”

Step 3: Copy the command for adding remote

You will see this screen. Copy this command:

For my case, it is:

git remote add origin https://github.com/nthock/html_css_demo.git

You will have your own unique URL. So do not copy the above URL.

Step 4: Paste it in your Workspace

Step 5: Push to Github

Key in the below command to push the code to Github:

git push -u origin master

You may have to key in your Github Username and Password. Please note that you will not see anything when you key in the password. But the system will record that you are keying your password. So just continue as per normal.

You go back to your Github repository. You should see that the code is uploaded.

Publishing Your Page

Github gives you the flexibility of publishing your page with them. To do that:

Go to your repository, then click on Settings:

Scroll all the way down until you see the Github Pages section:

Select “master branch” and click on save.

You will see a URL presented to you. Click on that link. Then you will see your HTML page is published on the web.

My URL is: https://nthock.github.io/html_css_demo/

Conclusion

This guide introduces you to Git and Github. You will learn more about version control in future.

You also know how to publish your web pages on Github. Please note that this way only apply to static web pages. Once you go into Rails Development, I will share how can you publish your web applications for free.