Git Push | Easy Introduction to Git and Github (Part 3)

Hello and welcome to the third part of this series, I would advise you to go through part 1 and part 2 before you continue with this article. In this article, we are going to create a repository and git push our files to it.

Let us get started!

  1. Head to GitHub and login or create an account if you didn’t create one in part 1.
  2. Click on the + sign between your profile picture and notifications icon. ?
  3. You will see this form

Write the repository name “my_website” description “my first website hosted on Github”

Leave it public and click create repository.

You will see this

Its now time to go back to our Terminal. Go to my_ebsite folder and open a terminal there or

symons@symons-macbookair:~$ cd my_website
symons@symons-macbookair:~/my_website$ ls
index.html  style.css
symons@symons-macbookair:~/my_website$ 

Here I’m changing directory to where my folder is and listing everything inside the folder using ls Command.

We now have several options with us:

    • Clone the repository we just created: This will be useful if you don’t have files on your computer already. we would use git clone for this.  you can try it on another folder.
      git clone https://github.com/Symonss/my_website.git

      We are not using this option.

    • Push an existing repository: This would be useful if we had initialized a repository in our folder which we haven’t so we are not using this option but you can try it out.
      git remote add origin https://github.com/Symonss/my_website.git
      git push -u origin master

Create a new repository and git push: 

  • Since we don’t have a repository but we have project files lets create one:
    symons@symons-macbookair:~/my_website$ git init
    Initialized empty Git repository in /home/symons/my_website/.git/
    symons@symons-macbookair:~/my_website$ 

    We can add README a file that shows others how to utilize your repo:

    symons@symons-macbookair:~/my_website$ echo "#Clone and enjoy!" >> README.md
    

    Lets now use git status to see the status of our files:

    symons@symons-macbookair:~/my_website$ git status
    On branch master
    
    No commits yet
    
    Untracked files:
      (use "git add <file>..." to include in what will be committed)
    
    	README.md
    	index.html
    	style.css
    
    nothing added to commit but untracked files present (use "git add" to track)
    

    As you can see git status is telling us that we are in a branch called master and we don’t have commits yet. It is suggesting that we use git add to add our untracked files. Let us do that:

    symons@symons-macbookair:~/my_website$ git add --all .
    
    symons@symons-macbookair:~/my_website$ git status
    On branch master
    
    No commits yet
    
    Changes to be committed:
      (use "git rm --cached <file>..." to unstage)
    
    	new file:   README.md
    	new file:   index.html
    	new file:   style.css
    

    We now have staged files for commit. Let us commit :

    symons@symons-macbookair:~/my_website$ git commit -m "initial commit"
    
    [master (root-commit) aa051ab] initial commit
     3 files changed, 17 insertions(+)
     create mode 100644 README.md
     create mode 100644 index.html
     create mode 100644 style.css
    
    symons@symons-macbookair:~/my_website$ git status
    
    On branch master
    nothing to commit, working tree clean
    

    We have committed the three files next we need to git push them to Github but before that, we need git to know the specific repository on GitHub to connect with our local one. We add remote:

    symons@symons-macbookair:~/my_website$ git remote add origin https://github.com/Symonss/my_website.git
    

    Then we finally Push

    symons@symons-macbookair:~/my_website$ git push origin master
    
    Username for 'https://github.com': Symonss
    
    Password for 'https://Symonss@github.com': 
    
    Counting objects: 5, done.
    Delta compression using up to 4 threads.
    Compressing objects: 100% (4/4), done.
    Writing objects: 100% (5/5), 501 bytes | 501.00 KiB/s, done.
    Total 5 (delta 0), reused 0 (delta 0)
    To https://github.com/Symonss/my_website.git
     * [new branch]      master -> master

    In my case, I had to put the Username and Password.

  • Congrats so far.

Lets now get back to Github and refresh that page:

Your colleagues may now clone or fork and contribute. We will see how to use branches in part 4.

Hosting 

Let us now host our site so that we can share links with friends and family :

Click on settings and scroll down to GitHub pages

After selecting the Master branch your website will be live

Find your link here:

You should see this:

In the next Part we will make changes to the files and push. We will also have to branches for footer and header. Bye for now

Write a comment