Using GitHub is a prerequisite of most of the tutorials on this site, so it is helpful to learn to use it. In this tutorial, I’ll show you how to push a project to GitHub.
To follow this tutorial, a few things are required:
With GitHub ready to go, we can start the tutorial.
To keep things simple, we’ll use a single HTML file. You can review the HTML file here.
There are a few ways to get the HTML file we need.
- Copy the code in the gist (linked above) into an
- Go to this link, then click Download this one page web-profile.
- Use Terminal to go to the project folder you want to use and run:
However you choose get the HTML, you will have one file,
index.html, at the root of your directory.
For the rest of the tutorial, we will use Terminal to run commands. Unless instructed otherwise, run commands at the root level of your project directory.
Because we created our file locally, we need to push it to GitHub to store it there. The first step is initializing Git.
The git init command turns your directory into a new Git Repository.
With Git initialized, we need to mark it so that it is included in the next commit. This process is also called staging.
git add .
This command marks all files in the repository, except for any in the .gitignore file.
Our file is now marked and ready for its first commit. A commit is a snapshot of the history of changes to the file.
git commit -m "Add index.html"
The text following -m is the commit message. It is a human friendly reminder about what changes are in the commit.
Pushing to GitHub
Pushing uploads all your local commits to the remote repository. This makes the changes in your file available to people you are working with. There are two parts to this process:
- Creating a repository
- Pushing the project
Creating a GitHub repository
In your browser, go to github.com and log in if you need to. Click the plus sign icon at the top right of the page. Then select New Repository.
Enter a name, then click Create Repository. I have used the name
new-repository for this tutorial. We will be using this name later on, so make a note of it.
There you have it, a sparkling new repository. If this is your first one, congratulations! You have reached a programming milestone.
Stay on the Create Repository page to complete the next step.
Pushing the project to GitHub
So far in our project folder we have just one file, and we have committed the changes we made to it. The next step is to push these changes to GitHub. Our project is in ‘new-repository’, which we just created, so we can push to an existing repository.
clipboard icon to copy the three commands shown in the “push an existing repository from the command line’ section. Paste them in your Terminal and press ENTER to execute them.
Note: Replace the username shown in the code with your GitHub username.
git remote add origin https://github.com/NdagiStanley/new-repository.git git branch -M main git push -u origin main
After running these commands, reload the browser page. Our
index.html file is now listed in the online repository.
You can make more updates to the repository by running these commands in order:
git add . git commit -m "Commit message" git push origin main
Replace the sample message with a descriptive one of your own. If you are working on a branch other than
main, replace that with the name of the branch you are using. You can read more about git branching here.
In this tutorial, you pushed an online git repository to GitHub. Getting comfortable with Git and GitHub will let you move on to the next step of setting up a CircleCi project based on your GitHub repository. GitHub and other Git-based version control systems are widely used. Understanding them can be a key addition to your developer’s skill-set toolkit.
About Stanley: From a young age, Stanley tinkered with electronics and building things with tech. His work involves data, the web, and IoT. Stemming from his lifelong love of DIY, he’s on a personal journey of invoking the builder within and teaching others along the way. He cares about how technology affects society and seeks collaborations with others who are working to create positive impact.