11am: Uploading Your Webpage to a New GitHub Repository Using the Terminal

You've done it! You've created a simple webpage, and now it's time to keep it safe and sound in a version control system. Git is a powerful tool that allows you to track changes in your code and collaborate with others. In this guide, we're going to use Git in the terminal to initialise a local Git repository, create a new repository on GitHub, and then push your webpage code to GitHub.

What does this article replace?

In this guide, we're stepping away from the GUI-based Git clients and introducing you to the terminal, where you can directly interact with Git. We'll walk you through the steps to install, configure, and use Git on your macOS terminal.

How long will it take to set up?

Setting up Git in the terminal, creating a new repository on GitHub, and pushing your webpage project should take about 30 minutes. While it might seem intimidating at first, using Git in the terminal can greatly streamline your workflow in the long run.

4 out of 5 stars

Difficulty Rating:

Mastering Git commands in the terminal requires a solid understanding of version control and offers a difficulty rating of 4 out of 5. By gaining proficiency in Git, you'll be able to effectively manage your codebase and collaborate with others using the command line.

Prerequisites

  1. A free GitHub account - sign up here
  2. The email address associated with your GitHub account
  3. Your newly crafted webpage from the previous exercise

Step 1: Install and configure Git

xcode-select --install
git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

Step 2: Generate SSH key for GitHub

To interact with GitHub, you need an SSH key for authentication.

  1. In the terminal, enter: ssh-keygen -t rsa -b 4096 -C "youremail@example.com"

  2. Press Enter to accept the default file location for your keys.

  3. Enter a passphrase for extra security or leave it blank.

  4. Go to the .ssh directory: cd ~/.ssh

  5. Display the SSH key: cat id_rsa.pub

  6. Copy the entire output - that's your public SSH key.

Step 3: Add SSH key to GitHub

  1. Go to GitHub in your web browser.

  2. Click your profile photo, then click on Settings.

  3. In the sidebar, click on SSH and GPG keys.

  4. Click New SSH key.

  5. Paste your key into the "Key" field.

  6. Click Add SSH key.

Step 4: Create a new repository on GitHub

  1. Open your web browser and go to your GitHub account.

  2. In the upper-right corner, click the + icon and select New repository.

  3. Name your repository, provide a short description, select 'Public' or 'Private', and then click Create repository.

Step 5: Connect your local repository to GitHub

  1. Go back to the terminal and navigate to your webpage project directory.

  2. Initialize a local Git repository by typing git init.

  3. To connect your local repository to the new GitHub repository, type:

git remote add origin https://github.com/username/repository.git

Replace username with your GitHub username and repository with the name you gave your repository on GitHub.

Step 6: Push your webpage to GitHub

  1. Add all the files in your directory to the staging area with git add .

  2. Commit the changes with a message using git commit -m "Initial commit".

  3. Push your commits to the GitHub repository with git push -u origin master.

Step 7: Basic Git commands

  • git status: Check the status of changes.

  • git add .: Add all changes in the current directory to the staging area.

  • git commit -m "your message": Commit changes to the local repository.

  • git push origin master: Push changes to the remote repository. Replace "master" with the name of your branch if it's not "master".

Step 8: Pull changes

If others have made changes to the remote repository, pull those changes to your local copy with:

git pull origin master

Remember to replace "master" with the name of your branch if it's not "master".

Step 9: Create and switch branches

  • To create a new branch: git branch branchname

  • To switch to a branch: git checkout branchname

  • To create a new branch and switch to it in one command: git checkout -b branchname

Step 10: Merge branches

Once you're done with your changes on a branch, you can merge it back to the master branch.

  • First, switch to the master branch: git checkout master

  • Then, merge your branch: git merge branchname

That's a basic guide to using Git and GitHub on macOS. Remember, Git is a powerful tool with many more commands and features. It's recommended to look into a more in-depth guide or tutorial as you become more comfortable with these basics.