GitHub is one of the most powerful tools for developers, whether you are working on your project solo or working amongst members of a team. Git and GitHub adds a version control layer to your code so anyone can see the change history, the edits, and also see various branches of the codebase.
In this episode of the Tech Stack Playbook, we are going to review the process of uploading a local codebase repository from a computer to GitHub from the command line.
This episode is packed with content, so here's a glance at what you'll learn about below, and a series of sections further down in this blog post highlighting the important topics we discussed:
Time stamps:
00:00 GitHub 101
02:15 Set up your code project locally
03:20 Create an empty repository in GitHub
04:47 Initialize your GitHub connection locally
10:28 Review the pushed changes in GitHub
10:53 Set up GitHub Desktop to manage our repository
11:33 Push new changes via GitHub Desktop to GitHub
12:57 Wrap-up and reflection on what we set up with GitHub
👨💻 GitHub 101
GitHub is one of the most powerful tools for developers, whether you are working on your project solo or working amongst members of a team. Git and GitHub adds a version control layer to your code so anyone can see the change history, the edits, and also see various branches of the codebase.
I like to think of GitHub as the code-version of Google Docs. You can switch back to a previous version of your document, make edits and push those in real time, and also collaborate with others on the same version of the document.
Another major benefit to GitHub is branching, allowing you to have different states of your codebase for different reasons. A common practice for codebases involves 3 core branches: dev, stage, and prod. The dev branches is what you will use to build from and test, debug, and add in new features. The stage branch is for new additions that are ready for review ahead of going to prod - the reason being, you need to thoroughly test the addition to make sure it is ready for users and so you don’t mess with the client-facing build. The prod, or production, version of your codebase is what is running live for your clients or customers or users. This (hopefully) is free of bugs and errors because of the previous two steps to push code to this stage.
However, if you are working on your project solo, you might only need 2 core branches: main, a version for you to build/test your app, and prod, a version in production that is always live.
In today’s tutorial, we are going to review the process of uploading a local codebase repository from a computer to GitHub from the command line. In each of these below steps, I denote which ones are things you do (local) - on your computer, or (web) - on the GitHub website.
👨💻 Step 1: Set up your code project folder (local)
For this example, I have created a ReactJS Soundcloud Clone application with the create-react-app framework and implemented the AWS Amplify framework with Cognito identity and access management, DynamoDB NoSQL database storage, S3 object oriented storage for media items, and AppSync to help us manage a GraphQL API. The app allows users to create an account that then allows them to upload songs to the cloud through the app and then play those media files through the built-in player. Stay tuned for a full-tutorial on this build coming soon ☺️
If you do have a local codebase on your computer that you want to push to GitHub, feel free to jump right into Step 2 below.
If you do not have a local codebase on your computer to push to GitHub, you can spin up a practice repo with either a React.js or NEXT.js template below to get started:
For React, run:
npx create-react-app techstackplaybookpracticerepo
For Next, run:
npx create-next-app --example with-tailwindcss techstackplaybookpracticerepo
Once you have a folder for your app created with one of these frameworks, move onto Step 2 below.
👨💻 Step 2: Create an empty repository in GitHub (web)
When you go to https://github.com, at the top right, when you click on your profile avatar, there is a drop-down of menu items.
Click on the drop-down item that says “Your Repositories” which will bring you to a page that lists out all of the repositories in your GitHub account. There will be a green button that says “New” - make sure to click that to pull up the create repository flow.
There will be a number of options to select, but here’s a quick guide:
- Repository template: (keep default option)
- Repository name: TechStackPlaybookPracticeRepo
- Description: (optional)
- Public/Private: Public
- Initialize this repository with: (keep these options unchecked)
When you are ready, click “Create repository” to finalize the setup of an empty repository in GitHub.
When the empty repository page loads, the link will look something like this: https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo
You will notice on this page, there is a URL that will be to the right of the HTTPS button. It will look like this: https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.git. You will want to copy this URL down as we will need it in Step 3 later on.
👨💻 Step 3: Initialize your GitHub connection (local)
From the root of your project folder (the outermost folder that wraps everything, for me this is called soundcloud which contains my /amplify folder, /public folder, /src folder, etc.), make sure that your terminal window is set at this level.
You will initialize an empty git repository with a branch called main with the following:
git init -b main
This will create a hidden folder called .git which will actually save and store all of our version control changes. It’s almost like a cookie that connects our local repository to the GitHub version.
Next, we add our locally created files to this .git file with the following:
git add .
We then want to commit these files we’ve added onto main to our specific repository that we are initializing for GitHub with:
git commit -m “First Commit to GitHub”
This will probably add a lot of files listed out. Make sure that .gitignore is included in this list of added files and includes node_modules so that you don’t upload a gazillion node_modules files to GitHub ☺️
In the github.com page with the URL that we copied down in Step 2, we will now use this to send our github files to this URL endpoint:
- make sure to change
YourGitHubHandleto your actual account: - make sure to change
TechStackPlaybookPracticeRepoto the name of your actual repo you created on GitHub
git remote add origin https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo.git
What this is effectively doing is telling git that, from the remote local version of our repository, we are going to add all of those files to the origin of this empty GitHub repository link online on the web.
We will now set the new remote with this:
git remote -v
You will then see that there are 2 lines printed in the terminal, one that ends with (fetch) and one that ends with (push). We are calling this GitHub repository and pushing our code locally from the remote to GitHub in the cloud.
Now that we’ve initialized the connection, we will push our code locally to the origin main which we’ve set as the destination in GitHub:
git push -u origin main
This will enumerate all the objects we want to push, it will then get compressed into threads to push them and will push to this GitHub link which is the one we want for this repository and the branch is set as one called main and sets it to track it from origin.
👨💻 Step 4: Review the pushed changes in GitHub (web)
On our GitHub repository page (https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo), what was once empty, upon refreshing the page, should now show our codebase that we had locally on our computer now on this web page.
What we have done is create a synced pair between our local repository (remote) and our GitHub repository (origin). However, this is just for our most recent changes on our local repository. What if we want to create ongoing pushes to our GitHub repository and do regular pushes as a backup to GitHub? We will review this with a tool called GitHub Desktop in the next step below.
👨💻 Step 5: Set up GitHub Desktop to manage our repository (local)
GitHub Desktop, a Microsoft-created GitHub manager, is a GUI (graphical user interface) client/platform that creates an easy and efficient way to manage our GitHub repository right from our computer without needing to worry about typing the right command line scripts and sequences in the terminal.
While it is very important to understand what is happening behind the scenes at the terminal level, for us to move fast, we need tools and ways to expedite and automate our work flow processes. When you are typing in the terminal, spelling errors and human error can cause us to make mistakes, errors, or lose precious time. GitHub Desktop helps developers move faster with their repositories and has been an amazing tool in my workflow.
As a side note, there are other GUIs for Git and SCM (source control management) tooling, such as Kraken which is optimized for Azure DevOps, as well as GitLab.
We will need to create a new repository in our GitHub Desktop client because while the repository is synced with github.com, our GitHub Desktop client wouldn’t have been updated to track this repository yet until we allow it.
In the “Add” drop-down on the button to the right of the text field in the GitHub Desktop client, you will select the drop-down option: Add Local Repository
When we have the option to “Choose” a folder, we will want to select the outermost folder container for our project. For you, this might look like: /user/Documents/GitHub/TechStackPlaybookPracticeRepo
Once the outermost folder is selected, we will click Add Repository
This will now connect to our hidden .git file and anytime we make changes and save them in our code editor, GitHub Desktop will show those changes reflected in the GUI.
👨💻 Step 6: Push new changes via GitHub Desktop to GitHub (local)
In GitHub Desktop, we should see 1 or more file changes reflected in the list of “changed files” on the left half of the app. In this video, I updated the README.md file, so that is why it has a check-mark next to README.md and the app says 1 changed file at the top.
In the bottom right, we will give our commit a name, which can be anything you wish. I said: Updated Readme for YouTube!. You can also write a description if you want, but it is optional.
At the top, you will see I have the current branch set to main, as I only have 1 branch created for this video.
When everything looks good, you will click the blue bottom at the bottom left that says “Commit to main`
The bottom right button should now say Push origin, and once you select this, it will send those updated changes committed to our local remote branch to the main GitHub branch on the web.
👨💻 Step 7: Review the pushed changes in GitHub (web)
On our GitHub repository page (https://github.com/YourGitHubHandle/TechStackPlaybookPracticeRepo), upon refreshing the page, you should see your changes reflected in the online version of the codebase, matching your changes locally as well.
In this example, the README.md file reflects the change and in the file/folder list, you will see that all the folders/files have the commit message First Commit to GitHub from Local except for one, which is that README.md file. It has a message that reads the same message we put into GitHub desktop: Update Readme for YouTube!
...
Check out the full recording below:
Let me know if you found this post helpful! And if you haven't yet, make sure to check out these free resources below:
- Follow my Instagram for more: @BrianHHough
- I'm also on Tik Tok too: @BrianHHough
- Watch my latest YouTube video for more
- Listen to my Podcast on Apple Podcasts and Spotify
- Join my FREE Tech Stack Playbook Facebook Group
- Join entrepreneurs and developers in the HelpMeDev Discord Server
Let's digitize the world together! 🚀
-- Brian
Top comments (0)