Deploying to Github

---

Overview

By the end of this lesson, you'll have deployed your first production website to the internet! You already have an account with Github and we'll be using their service for hosting static sites called Github pages. We won't go too deep into what git, a version control system, is, but it's important to know that it's widely used by developers. The purpose of a version control system like git is so that many developers can work on a project, simultaneously, and collaborate as they iteratively work their way through building features and fixing bugs. Eventually, you and a team of your classmates will work together using git to collectively build a client project.

Deployment

If you're still working on your site and aren't ready for it to be live, hold off! You can always come back to this when the time comes. We're going to look at two methods of getting our project online. The first will be to use your command line (PowerShell on Windows and Terminal on MacOS) and the second will be using your browser to drag/drop and upload files. People with more experience generally enjoy the expediency of working via the command line, but both choices will get you to the same result.

Regardless of which choice you make, we're going to start in the same place: on Github.

1. Navigate to Github.
2. If you're logged in, you should be taken to your dashboard and see a green button on the left-hand side that has a book and the word 'New' - click this button.
3. Create a name for your repo. This will be part of the url, so make it appropriate!
4. Write a description if you wish.
5. Click the green 'Create repository' button at the bottom.

Command Line

At this point, if you plan on using git via the command line, pick up with these directions. Otherwise, head down to the 'File Upload' heading below.

NB: The following assumes you have git installed on your machine. You can download it from here if needed.

1. You should see a block of text that says, '...or create a new repository from the command line'.
2. Click the clipboard icon in the top-right of this box.
3. Open your command line, navigate to the directory where your project is, and go inside it.
4. Paste the text from your clipboard.

This will make an initial commit, or addition of your code to the repository. However, it won't actually add any files. We have another few steps to go.

5. Copy and paste the following code below:

1# This will add all the files in the current directory (your project)
2git add .
3# This will create a message to go with your commit
4git commit -m "My first REAL commit of files"
5# This will push your code to your repo on Github
6git push origin main

At this point, you should be able to navigate to your repo using your browser and see your project's code online. If you can, head down to the heading of 'Github Pages' below.

File Upload

1. At the top of your empty repository, you should see a link that read, '...upload an existing file'. Click this.
2. Drag your project's folder into the upload window and click the 'Commit changes' button at the bottom of the page.

Github Pages

Github pages is an excellent static method for hosting projects like these!

1. Click 'settings' at the top of the repository.
2. In the side-menu, click 'Pages'
3. Choose your branch (main).
4. Click 'deploy'

---

Previous and Next Lessons: