Easy Intoduction 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 push our files to it.
Let us get started!
- Head to GitHub and login or create an account if you didn't create one in part 1.
- Click on the + sign between your profile picture and notifications icon. ?
- 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 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 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.
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