How To Push Code to GitHub: Step-by-Step

Implementing version control would be a simple endeavor if you only worked as a solo dev with a local repo. However, this isn’t the case for many professional projects. Instead, a team will pool resources into a remote repo using a host such as GitHub. As such, it’s important to learn how to push to GitHub because it’s something you will have to do as part of your workflow.

This post will show you how to push to GitHub using the command line. Also, we look at dedicated apps to help make the process smoother. At the end of the article, we talk about why pull requests should be something you learn and how they relate to pushing code. First, let’s look at how you’d use GitHub for your projects.

How a Developer or Programmer Will Use GitHub

GitHub is an essential tool for developers and programmers worldwide for a number of reasons. It lets you store your code in a centralized location, which makes it easy to access and offers greater collaboration with other developers.

The GitHub logo, showing the word “GitHub” in black text on a white background.
The GitHub logo.

You’re also able to track changes made to your code and revert to previous versions if necessary. In addition, GitHub provides tools to help manage issues and bugs, and this makes it more straightforward to maintain your codebase.

Collaboration is one of the key reasons why you might use GitHub as your remote version control system (VCS) of choice. It lets you share code, track changes, and collaborate on issues without much fuss. This can help efficiency and can also lead to better code quality.

GitHub also gives you a pain-free way to manage multiple versions of a codebase, track changes, and roll them back if you need to. Large projects and open-source collaborative efforts will be just two ways GitHub will show its value.

Even straightforward use cases can be ideal. For instance, you could store code for your web development project and push remote updates as you make changes. Also, continuous integration/continuous deployment (CI/CD) projects will benefit from automation in the form of GitHub Actions during build phases.

A portion of the GitHub Actions website, showing a gray box with the dialog, “Build, Test, and Publish” along with a button. There are lines akin to a flow chat connecting to three boxes for Linux, macOS, and Windows systems, each with the command, “run: npm test”. There are also gray lines running and converging from those boxes.
An example of how GitHub Actions fit into a workflow.

On the whole, GitHub – and other remote VCS hosts such as GitLab – provides a platform for collaboration, version control, and other development workflows. It can help streamline the development process and improve code quality. As such, you will want to learn how to push to GitHub, as this knowledge will benefit you almost every day.

How To Push to GitHub from the Terminal (Command Line)

The rest of this article will show you how to push to GitHub. It’s a process that’s simple to understand and execute.

However, you need to make sure you set your project up beforehand, otherwise, you’ll encounter errors. In our first section, we look at what tools and skills you need, then look at the process itself in detail.

What You Need to Push to GitHub

It’s important to ensure you set up your project to support using a remote repo and integrating pushing into your workflow. As such, first and foremost, you need a Git repository – a ‘repo’ to store your code in. Consider this a folder that contains the files associated with your project.

The entire version control process begins within a local environment on your computer. We have the exact steps to do this later, but you may already have this knowledge (or know where to access it.)

You also need a GitHub account. In fact, you could also use another online VCS host, such as GitLab, BitBucket, Buddy, and more. The instructions we give you here will transfer, for the most part, to other platforms. However, comparing these hosts is beyond the scope of the article.

To push your code to GitHub, you can use either the command line or a graphical user interface (GUI.) The main bulk of our post will be about the command line workflow, but there’s also a section on using a GUI, too, as some are popular. However, note that each GUI may have a different process to push to GitHub, which means you need to stick to a particular app to make the most of it.

Finally, ensure you have the right access to your repo. GitHub’s documentation is comprehensive here, and you should look to either HTTPS access tokens or Secure Shell (SSH) access. Without this, you won’t be able to do any work!

1. Create a GitHub Repository

The first step is to create a new online repo within GitHub. While you can do this from the command line, it’s just as straightforward to do it using a web browser.

Once you log in or sign up to GitHub, head to the top-right corner of the screen and look for a Plus drop-down menu next to your profile avatar. If you open this, it will show you a few options that include New repository:

A portion of the GitHub interface that shows a list of latest changes within the GitHub repo. On top is a drop-down menu with a number of options. The New repository option is highlighted in blue.
Choosing to create a new repository in GitHub.

Once you click this, you come to the Create a New Repository page. This will show you a bunch of settings to help set your remote repo up:

The Create a new repository screen within GitHub. There are a number of options here, such as naming an owner, setting a repository name, making the repo private or public, and initialization options. There are settings for readme and .gitignore files, and the option to choose a suitable license.
Creating a new repository in GitHub.

The options you set here will be unique to your project’s needs. However, if you already have a local repo to push to GitHub, we’d tick as little as possible in order to keep parity between local and remote.

From here, click the Create repository button, and GitHub will set things up under the hood. At this point, you come to the repo home page with instructions on how to set up a new local repo that links to the remote one using the command line. The path you follow will depend on whether you don’t yet have a repo or would like to clone the contents of an existing project.

If you have already initialized Git and populated your local repo, you won’t need to carry out anything from step two. Instead, you can head right to the third step, where we look at pushing code to GitHub from your local repo.

2a. Clone Your Remote Git Repo

If you don’t yet have a local repo, the GitHub version will be the only one. The best way to sync both locations is by using the git clone command on your computer. However, you do need the URL for your repo.

To get this, head to the repo within GitHub, and look for the green Code drop-down option above your list of files:

A portion of a repo within Github. The main part of the image shows the green Code drop-down menu, complete with the HTTPS URL for the repo itself, and options to download a ZIP file of the repo, and to open it with GitHub Desktop.
Opening the Code drop-down menu in GitHub.

If you don’t see this, it’s likely because you don’t yet have a populated repo. Note that you could copy the repo URL from the blue Quick Setup box at the top of the screen. Simply switch to HTTPS using the buttons, and copy the URL.

A portion of the GitHub screen showing the Quick Setup box in blue. It has a header that reads, “Quick setup – if you’ve done this kind of thing before” and options to set up the repo in GitHub Desktop or copy both the HTTPS and SSH URLs for the repo. There is also a snippet of code to create a new repo on the command line.
Using the Quick setup options to copy a repo URL address in GitHub.

However, we’d prefer to generate a .gitignore file, as this will be something you need anyway. You can use gitignore.io to search for the tools you use and, from there, generate a complete .gitignore file to upload to the repo:

Toptal’s GitIgnore website. It’s white, with a blue toolbar at the top. In the middle, there’s a search bar with a green confirm button to search for elements, and a blue title that reads, “gitignore.io”.
The gitignore.io website.

Regardless, once you can open the Code drop-down, it will show URLs for your repo. There will be options for HTTPS, Secure Shell (SSH,) and others. However, the straightforward approach is to use the HTTPS URL. You can click the small Copy icon next to the URL in question to copy it to your clipboard.

Next, head back to your Terminal or command line application, and run the following:

git clone <full-github-url>

Once you run the command, Git will copy the remote repo to your local environment.

2b. Initialize Git In Your Local Project Folder

For situations where you don’t yet have a local version of your remote repo, you need to initialize one. Most of the work you do will be local, with pushing the changes to the remote server at regular intervals. Here are the steps:

  • First, cd to a folder you’d like to use for your project.
  • Next, run the git init command. This will initialize Git in your local project folder and create a hidden .git directory.
  • Add your .gitignore file to the root of your project’s local folder, as you won’t want to stage some changes relating to system files.

At this point, you need to index your current files. You do this in the typical way using git add, then committing the changes:

git add .

git commit -m “Initial Commit”

git branch -M trunk

The last line changes your main branch to something else of your choosing if you haven’t yet switched from master. The latter is problematic as it has negative connotations to slavery, so it’s recommended to change it. We’ve used trunk here, but main is also acceptable. If you know this line is not one you need, you can omit it.

At this point, you’re ready to learn how to push to GitHub!

3. Add a New Remote Origin and Push Your Code to GitHub

Once you’ve created a new remote repository on GitHub, you need to add a new ‘remote origin’ to your local repository. This is essentially the link to your remote repo, so that your local one knows where to send the upstream changes.

To do this, enter the following command in your terminal:

git remote add origin <github-url>

In a technical sense, the remote you add can be any name. However, most call it “origin” as you only use one remote add, and it offers absolute clarity. At this point, you can push to GitHub using the following:

git push -u origin trunk

This command will push your code to the new remote origin – named “origin” – and sets the upstream branch to “trunk.” You’re also welcome to push any branch to the remote repo if you need to.

A portion of a Terminal window that shows the output from a git push command. It shows how the process enumerates through files, compresses them, and writes them to GitHub. It also shows which URL those files go to, any new branches that have to be set up, and a summary of the overall action taken – tracking a remote branch from the origin.
Running a git push command in the Terminal.

Once the process completes, you need to verify that the push was a success. There are a couple of ways to do this. For example, you can head to the repo on GitHub and check to see if the changes are live:

A repo home page on GitHub. It shows the path for the repo, a selection of navigation options to carry out different tasks, and a list of changes based on a recent commit. There is also information about the repo, such as its license, description, and release schedule.
Checking the status of a Git repo in GitHub.

However, you can also run git log from the command line:

The top of a Terminal window that shows the output from a git log command. The commit hash displays in yellow, with branch information in red. There is information for the author and date of commit, along with a commit message for each.
Running a git log command in the Terminal and viewing the output.

This command displays every commit for your repo, including the one you just pushed. As such, if the commit is within the log, the push was a success.

How To Push to GitHub Without Errors

In some cases, you might encounter an error when you attempt to push to code to GitHub:

A Terminal window that has looked to run a git push command, and encountered an error. The title for this error reads, “Warning: Remote Host Identification Has Changed!” and offers a lot of information relating to the error. In short, it guides you to check the RSA fingerprint, contact your sysadmin, and add the correct host key to your ‘known hosts’ file.
Getting an RSA key error after running a git push.

This happens when you already have a secure connection to GitHub through an old project but using an old RSA key. We have a guide on how to fix this issue in general. However, to fix this for GitHub specifically, you can run the following:

ssh-keygen -R github.com

This will update your ‘known hosts’ file, then display a confirmation message:

A corner of a Terminal screen that shows the results of removing old keygens for github.com from your ‘known hosts’ file. The command scraps the file, finds the host name, updates the file, and gives a path to where a copy of the original file is saved.
Removing an old host key using the Terminal.

From here, run the following to add the new RSA key to your known hosts file:

curl -L https://api.github.com/meta | jq -r '.ssh_keys | .[]' | sed -e 's/^/github.com /' >> ~/.ssh/known_hosts

In fact, you may also see an error here too, relating to the jq package. If this is the case, you can run either of the following depending on your operating system:

  • Windows: curl -L -o /usr/bin/jq.exe https://github.com/stedolan/jq/releases/latest/download/jq-win64.exe
  • Mac: brew install jq
  • Linux: apt-get update | apt-get -y install jq

Once this installs, run the command again and wait for it to complete:

The top of a Terminal window that shows the result of running a command to create a new RSA key and add it to the known hosts file. It shows the full command, and a summary of the data transfer.
Creating a new RSA key using the Terminal.

You can finally run the git push command again, and this time, you should see the process complete. If not, the issue is likely due to incorrect SSH keys or even that you need to set up secure connections using dedicated keys. We have a full guide on how to generate new SSH keys for GitHub, and GitHub’s documentation is also comprehensive here.

Using a GUI to Push Your Code to GitHub

While the process of pushing code to GitHub is simple once you set it up, there are plenty of steps, caveats, and subprocesses to consider. A GUI can simplify the process.

For instance, you have all of the functionality of the command line but using a nicer interface (with drag-and-drop in some cases.) What’s more, it’s often easier to visualize and manage changes through a GUI, especially if you’re not familiar with command line tools.

If you know you’ll never need to use your GUI app to access another remote VCS host, GitHub Desktop could be perfect.

The GitHub Desktop interface, showing a history of commits along the left-hand side, and code differences within a specific commit in the main window. There are a number of line additions that use green highlighting.
The GitHub Desktop app.

The app lets you create and manage repositories, commit changes, and push those changes to GitHub with just a few clicks. It works using drag-and-drop functionality and also has a ‘visual diff’ tool that simplifies identifying code changes between versions:

A portion of the GitHub Desktop interface that shows a single commit and its changes. It shows removal of whitespace that uses red highlighting, and line additions that use green highlighting.
Viewing differences in a commit using GitHub Desktop.

Sourcetree is another popular Git GUI that we look at in our roundup of web development tools.  While the preferred VCS is BitBucket (due to it being an Atlassian product), you can still use the tool with GitHub. The merge conflict resolution tool is also handy and is one of the standout features.

GitKraken is arguably the best looking GUI app available and offers a reasonable free version for local and public repos. This supports all of the major VCS hosts – GitHub, of course, but GitLab and BitBucket, too, among others. We love its visual representation of your repo, and the solution offers thoughtful functionality for teams too.

Using GitHub Desktop to Push to GitHub

While the process for each app will be slightly different, GitHub Desktop is slick. You work within a single screen that uses various windows and panels. Once you make a change to a file (which you can open within your editor of choice from a right-click context menu), you commit using a small widget on screen:

The GitHub Desktop interface that shows a change to a file on the left, and the specific changes in the main window. There is one line removal that uses red highlighting, and two additions using green highlighting. The bottom left corner shows the commit message box. It’s highlighted in purple, and lets you type the commit message and description. There’s a blue “Commit to trunk” button to confirm the commit.
Committing a change within GitHub Desktop.

This commit will become part of the Push Origin section within the top toolbar: If you don’t have any changes to commit, there will also be a notification to push your commits to the origin remote:

The GitHub Desktop interface showing that there are no local changes. There are a number of options in the main window to push commits to the remote repo, open the repo in an editor, view those files on your computer, and view the repo page within GitHub’s web interface
Pushing changes to the remote origin within GitHub Desktop.

This is a one-click solution to push changes to your GitHub repo. The whole workflow is quick, painless, and simple to execute.

Using Kinsta’s Application Hosting and GitHub

If you’re a Kinsta customer, you can bring all of your applications to us. Our Application and Database Hosting lets you deploy almost any app using a number of languages, such as PHP, Node, Python, and more. You connect to GitHub without the need to use a host of Git commands.

To start, log into your Kinsta dashboard, and navigate to the Applications screen. It will look bare when you first access it:

The MyKinsta dashboard, showing the Applications page. There’s a purple graphic of funnels and tubes, and a small section showing an Add service button in purple, and a Learn more button in white. There are also brief instructions on what it means to add your first service.
The MyKinsta Applications page within the Dashboard.

However, if you click the Add service button, this will give you the option to deploy either an app or a database. For this example, we’ll choose Application:

A close-up of the Applications page creation dialog. It shows a purple Add service button with a drop-down to either create an Application or Database. There’s a white Learn more button, and guidance on what to expect once you create a new service.
Adding a new service using the relevant button within Kinsta’s Applications screen.

Kinsta will then ask you to connect to GitHub in order to import repos from the platform:

The MyKinsta Applications page showing a popup dialog to integrate with GitHub. There is a brief description of what you do, and buttons to both Cancel the integration or Continue with GitHub.
Choosing to integrate with GitHub once you add a new service.

The wizard that comes next will help you set up your application. You first need to choose a repo from GitHub, then select the default branch:

The Add Application wizard, showing the four steps to set up an app and integrate it with GitHub. There are a number of options, such as choosing a repo and branch, adding an application name, choosing a data center location, and more. At the bottom is a purple Continue button and a white Cancel button.
Setting up the application details for your deployment within the MyKinsta Add application wizard.

You also need to give your application a name within MyKinsta and select a data center. Once you click Continue, you have to tweak the build environment settings:

The Build environment section of the Add application wizard. It shows a drop-down to select one of three build machine options, then a partial section to choose a Dockerfile for your deployment.
Setting build environment options within the MyKinsta deployment wizard.

Here, you have a couple of options:

  • Choose a build machine from the list.
  • Set up a container image, either using automation or from a specific path of your own.

After this, you need to set up your resources and processes. Our Quick Start Examples include the relevant web processes you need, but you can also set your own up. Note that you can have as many processes as your budget allows for:

The Resources section of the Add application wizard. It shows options to set a process name, select a process type, add a start command, select a pod size, and specify an instance count. There’s also a white Add new process button.
Specifying resources within the Add application wizard screen.

Once you view the monthly usage costs, you can make the payment. At this point, you can use Application Hosting complete with GitHub integration. There’s much more to discover about Application and Database Hosting, and our documentation is comprehensive and in-depth.

Summary

GitHub is an essential tool for developers and programmers. It provides a centralized repository to store, track, and collaborate on code. Once you learn how to push your code to GitHub from a local repo, you can join in with that collaboration.

Using the command line, it’s simple to push your code to GitHub and will only need a handful of commands once you set everything up. However, you may want to consider a dedicated GUI app, such as GitKraken or GitHub Desktop. These can take the command line out of the equation and let you perform almost every task you need with Git from a familiar interface.

What’s more, GitHub is excellent in combination with Kinsta’s top-tier Application and Database Hosting. This lets you hook up your GitHub repo to our network of 25 data centers and support a multitude of different frameworks. The resource-based pricing is also competitive and well within the reach of most!

Do you have any questions about how to push to GitHub? Ask away in the comments section below!

The post How To Push Code to GitHub: Step-by-Step appeared first on Kinsta®.

版权声明:
作者:congcong
链接:https://www.techfm.club/p/57842.html
来源:TechFM
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>