1.2 Create a Public Webpage with GitHub Pages

This tutorial will show you how to create a publically accessible webpage that you can share with your family and friends using GitHub Pages.

Pre-Requisites

You should already have the following set up…

Registrations

GitHub Account

Installations

git CLI (Mac/Linux /Windows)

Note: CLI stand for Command Prompt Interface. These are command we can run in Command Prompt or Terminal.

Get access GitHub Pages code

Here is a short video that provides an example of what you will be doing at the Command Prompt on both your Mac or Windows PC.

Open Terminal/Command Prompt
If you are on a MAC or a Windows PC run the following commands for each platform.
1. Create a folder to hold your repository (Mac, Linux & Windows)
```
 cd Documents 
```
  Note: This should be your Documents folder on your Mac
```
 mkdir resume-app 
```
  Note: mkdir creates a folder in the documents folder
```
 cd resume-app
```
  Note: cd changes directory to the folder you just created
Run the following commands.
1. Create a new branch
```
 git init  
```
  Note: git init initialises the directory and creates a .git file so the git can track things locally.
2. Configure user name and email for github in command line
```
 git config --global user.name "<enter-your-username>"
 git config --global user.email "<enter-your-github-email>"
 git config --global --list
```
  Note: Remove aligator clips < & >
3. Add the your new repository to your local git directory
```
 git remote add origin <the URL you copied from "quik setup" in the last step should be pasted here>
```
  Note: Remove aligator clips < & >
  
  Note: We are adding your new remote repository to the new local git directory.
  
  Example:
  
  The command should look like this:
```
 git remote add origin https://github.com/jjovah/myressapp5.git
```
4. Create a new branch and switch to the branch
```
 git checkout -b gh-pages 
```
  Note: We are creating and switchig to our new gh-pages branch.
5. Get code for webpage
```
 git pull https://github.com/blackcodecamp/CloudWebDevelopment.git gh-pages --rebase   
```
  Note: We are downloading code from the URL provided.
6. Update Remote Repo
```
 git push --set-upstream origin gh-pages
```
  Note: We are pushing the code to our newly created branch in our new repository.

Edit your website

Open your IDE, VS Code
Open the folder where you stored your repository by opeining the menu and clicking File then Open Folder
Then select to your ~\Documents\resume-app folder
Open index.html by clicking the file name in the Explorer on the right side
Once the html file is open in VS Code, edit the HTML file with your information. See Example
Once editing is complete, save your changes by going to the menu and clicking File then Save
In the menu click Terminal and then New Terminal to open the Terminal window in VS Code.
Run the following commands
1. Make sure you are in your git directory.
```
 cd Documents\resume-app
```
2. Add all changes to staging area
```
 git add --all
```
3. Store changes in version history
```
 git commit -am "<descriptive-message>"
```
  Note: Your descriptive message can be “My First Change”
  
  Note: Remove aligator clips < & >
4. Send changes to remote repository
```
 git push
```

Deploy To GitHub Pages

Navigate to Your Repository in your browser https://github.com/
In the menu bar under your repository title click on Settings
In the left side menu under Code and Automation select Pages
Under Source select Deploy from a branch
Under Branch select gh-pages
When your page is ready you will see a message at the top of this page under GitHubPages that says ‘Your site is live at https://<github-username>.github.io/<your-repo-name>’

Note: Remove aligator clips < & >
Visit your site!