khan-omar

Collaboration with Omar to build a website.

Getting Started

Download and install Git for windows here. You can use this tutorial for reference. Follow the steps in the video till 4:54.
To understand SCM better, watch this. You can read up some articles on this as well.
I've added your user ris-tlp as a collaborator for this repository. Login to github and accept the invite.
Let's use Visual Studio Code as the IDE for development. You can download and install the community version here.
Define your local workspace. I like to keep my git projects under one folder and recommend yours to be C:\workspace\
Open git-bash and change your current directory to the local workspace. This command shell will use unix commands which is slightly different from the windows command prompt. That's ok, you'll learn along the way. The command is -

cd C:/workspace

To verify you're in the right place type in

pwd

The cmd will tell you the present working directory which should be C:/workspace
Now comes the cool part, in the same cmd window, issue the following command -

git clone https://github.com/shaeqkhan/khan-omar.git

You should see a folder khan-omar in your workspace C:\workspace\khan-omar

Message me once you're done, pat yourself on the back and then we'll talk about making the website.

Next Steps

Get familiarized with the IDE, learn the common keyboard shortcuts from the help menu.
In the IDE, File > Open. Select the folder C:\workspace\khan-omar. You should see the project in the explorer.
In the IDE, press ctrl + ~ . This should open the terminal window at the bottom within VS Code. Now you don't have to switch between the IDE and Git Shell to issue git commands. We'll do eveything from the IDE.
In the terminal window, type git status and you should see the following information -
On branch master
Your branch is up-to-date with 'origin/master'.
nothing to commit, working tree clean
We'll use git commands to interact with the local and remote repository. You can use this cheat sheet to learn the commands here. Read them atleast once and you'll remember the commands once you start to using them regularly.
It's good practice to "do a pull" on the repository before starting any new work. This brings down any new changes to the repository in your local workspace.
git pull origin master
Create a new file index.html under C:\workspace\khan-omar\index.html
This file exists in your local workspace. To push this file up to the github repository, there are a few additional steps.
In the terminal window, type git status
This command shows you all the files that have changed, been added or removed in your repository (khan-omar project is the repository here, that's the terminology we use). You should see index.html in the list.
Now, type git add .
This command starts tracking all the changed files in the repository and gets them ready to be saved. You can also track individual files by specifying their path, we'll try this later on.
Now, type git commit -m "new file"
This command creates a "commit" with a group of all the files that were tracked for changes in the previous step. The contents within the double quotes is a brief message you can write to describe the work completed by the commit.
Now, type git push origin master
This command pushes your change directly to the "master" branch.
Now try to add some content in index.html and repeat steps 14-17.
Git uses an interesting concept to manage work between different team members. Read more on branching model here. Feel free to watch some videos on this concept until you get a hang of the basic idea.
Now lets create a branch where you'll work on this issue. Type the following in the terminal window.
git branch fix-typo
You have created a branch fix-typo that only you can see. To verify -
git branch
This command lists all the branches you have on the local repository. You should see -
fix-typo
* master
The * symbol and green color indicates that the "master" branch is the current working branch.
To switch to the new branch you just created -
git checkout fix-typo
To verify that the command went through -
git branch
You should see -
* fix-typo
master
Now, open this file from the IDE file explorer and correct this typo, save the file ctrl + S
To view your changes in your branch - git status
To "commit" your changes to the local repository,
git add .
git commit -m "fixes #1"
A couple of interesting things happen with this command - one, the typo you corrected gets saved with the local repository and the terminology used in the message indicates that you have worked on a particular issue on github and that will be linked to your code automatically. For more information, read this.
Now we will push your typo correction in the new branch fix-typo to github.
git push origin fix-typo
You'll see a bunch of output lines and a success message. Go to https://github.com/shaeqkhan/khan-omar and in the "Code" tab, the top left corner has a dropdown "Branch: master". You branch should show up if you click on that.
Awesome! Your code is now on github but if you open the issues section, your fix still hasn't made it to the "master" branch. For this, you'll have to create a "Pull Request" - the terminology implies you're requesting me to pull your suggested fix into the main codebase. There are other formats used across different teams and we'll discuss them later.
To create a "Pull Request", go to https://github.com/shaeqkhan/khan-omar/pulls and click the "New pull request" green button. Select "base:master" and "compare:fix-typo". The "base" branch is the one you want to merge to. The "compare" branch is the one that has your work. The UI will show you the change you made. If things look good, click "Create pull request". I'll get an email once you do this and when I "accept" your request, you will see that issue #1 will close automatically.
We'll do some practice with git to get you comfortable first. Great job so far! If you understand this then you know enough to start contributing to open source projects.

Get familiar with Forks

Login to your github account and got to the repo page. Click the Fork button on the top right of this page. This will create a copy of the project in your github account. You can now work on the files locally and push to your copy and finally get it in to my repo by creating pull requests.
For this, you need to re-setup your local workspace. Simple no hassle way to do this -
cd C:\workspace\
rm -rf khan-omar
This will delete your repository on the local machine.
After you Fork, your repo will probably be at this url https://github.com/ris-tlp/khan-omar
Clone your repo into the local workspace -
git clone https://github.com/ris-tlp/khan-omar.git
cd C:\workspace\khan-omar
Now we need to keep your version of the repo connected with my version.
git remote add upstream https://github.com/shaeqkhan/khan-omar.git

If you type this command git remote -v this should show -

origin https://github.com/ris-tlp/khan-omar.git (fetch)
origin https://github.com/ris-tlp/khan-omar.git (push)
upstream https://github.com/shaeqkhan/khan-omar.git (fetch)
upstream https://github.com/shaeqkhan/khan-omar.git (push)

This means that now you have access to both repos from your local development space. Typically, you will not have access to push code directly to my repository (or anyone else's personal repo) so when you fork you can make changes to your version of my repository and then submit changes using Pull Requests.

In simple words, always pull from upstream and always push to origin. Read more here.
cd C:\workspace\khan-omar
git fetch upstream
git checkout template
You should see the new files and folders for the static website.
Branch off to a new branch where you will make all your changes. The following command creates a copy of the template branch into a new branch for you.
git branch update-content
Make all the changes you want to the html file.
git add .
git commit -m "new content for website"
git push origin update-content
Create a Pull Request but this time it will be across forks like this -
ris-tlp/update-content -> shaeqkhan/master
Login to AWS to verify you have access.
Get familiar with Cloud Computing.
We will use AWS Route53 and AWS S3 to get your website live. For now, get familiar with these and I will show you how to create the following -

Register a domain name - AWS Route53
Create a S3 bucket for website content - AWS S3
Configure the S3 bucket to serve static content - AWS S3
Configure reroutes for internet traffic coming to your domain - AWS Route53

ris-tlp/khan-omar

khan-omar

Getting Started

Next Steps

Get familiar with Forks