Welcome to the final lesson of our 6-part Zero to Website Series! Now that you have a beautiful portfolio coded up and ready to go, the next step is to get it up on the web and share it with the world! In this lesson, you’ll learn how to use GitHub Pages to upload and deploy a website. Let’s get started!

Getting Started

The first thing you’ll need to do is log in to or create an account on GitHub. GitHub is a great place to store and collaborate on code. It also allows us to use GitHub Pages to host our site for free.

Step 1: Create A Repository

We're going to start by creating a repository (or repo). This is the space on GitHub where all of our project files will be stored and updated as needed. To create a repo, head to the top bar. Click on the "+" button and then click on "New Repository".

This will take us to a page where we’ll create our repository. Under “Owner”, you should see your GitHub username. In the field next to it, we’ll enter our repository name, “my-portfolio”. You don’t have to use this name, feel free to name it whatever you like. Just remember that this is your portfolio URL (name in the address bar of the browser) so it should be simple and to the point. You can also give it a description. This is a description for your GitHub repo and doesn’t affect your site in any way.

Click on “Create repository” to complete this step!

Step 2: Initializing Your Repository

Now that we’ve created our repo on GitHub, the next thing we’ll do is initialize it in our command line (or terminal). If this is your first time using the command line, or you're not too familiar with it, don't worry! We are going to walk through this step by step and explain commands that are most important in this process. If you want to get to know your command line a bit better before you start, feel free to check out our lesson about it.

Let's first open up our terminal. Your computer should come with one by default, so if you don't know where it is, try doing a quick global search for it.

By default, our terminal directory will be set to our user file. We want to change our directory to our actual portfolio project folder and start from there. I'm going to first change the name of our folder from "porfolio-scaffold" to "my-portfolio". Now, to change the directory of our terminal, type in cd desktop and then cd my-portfolio.

We're now working inside of our project folder. Next, we're just going to follow the second set of instructions on the GitHub site:

It's usually a good idea to include a readme file inside of all our repos. Let's do this by typing in echo "# my-portfolio" >> README.md in our command line:

If we check our project folder, there should be a new file called README.md in there. Next, we need to initialize our repo by entering git init into the terminal:

This important command just initalized our new repo. We always need to initialize a repo before we can use any other git commands.

Next, we're going to do git add README.md to add this file to a staging area. This preps the file to be "committed" later. We have to do this any time we add, remove, or change a file. In this step, we've specifically only added the README.md file.

After adding this file, we need to do a git commit -m "first commit" to save our changes locally on our computer. This doesn't actually affect the GitHub repo yet. It's useful to think of commits as "CMD + S" to save a file. We should do it often! Whenever we commit, we need to give it a name. Usually, the first commit is named just that, but all commits after should be more descriptive of what the changes were. This makes it easy to track the many changes that you'll make in your code.

Next, we need to do git remote add origin https://github.com/canterberrie/my-portfolio.git. In your terminal, you'll want to replace 'canterberrie' with your own GitHub name. This links our project folder to our GitHub repo and allows us to "push" any changes that we make locally in our project folder into our GitHub repository.

Finally, we need to do a git push -u origin master to push up the anything that we committed to the "master" branch of our repo. Pushing to master is what's going to affect your GitHub repo and your hosted site. The master branch is basically where all of our most updated code will live (and ultimately what we'll see in our site).

Let's refresh our GitHub repo. Since all we did was add the README.md file, that's all that's been pushed up to the repo.

Step 3: Add Project Files

Now that we've initialized and add our very first file to our repo, let's go ahead and add the rest of our project files. We're going to follow the familiar steps: add, commit, then push once we're ready. Let's start by adding all of our untracked files by doing git add .. This will add all untracked files.

Next we'll do another commit with git commit -m "add project files" and then push it to the repo with git push origin master.

Take a look at the repo now and it should be filled with all the project files:

Step 4: Set Up GitHub Page

The last step is to update our settings so that our GitHub Page is looking at the code inside of our master branch. Head to the "settings" tab up at the top.

Scroll down to the "GitHub Pages" section and change the source of the page to "master branch".

Our page is hosted on GitHub here:

Head over to that link and your site should be good to go! If it's not showing up yet, give it a couple of minutes. Sometimes it takes a bit of time for GitHub to process a new page that's just been deployed.

You can see the final project and the code here:
Final Project Code on GitHub
Link to live site

---