DEV Community

Cover image for How To Push From Local Environment To GitHub.(The Basics)
lotanna obianefo
lotanna obianefo

Posted on

How To Push From Local Environment To GitHub.(The Basics)

GitHub is a powerful platform for version control and collaboration, widely used by developers to manage code repositories. Pushing your local project to GitHub allows you to back up your work, collaborate with others, and integrate with CI/CD pipelines.

To push code from a local development environment to GitHub, you must first install Git Bash from https://git-scm.com/downloads
Select the appropriate installer for your operating system (Windows, macOS, or Linux/Unix) and proceed with the installation using the default configuration settings.

This is the interface of Git Bash after it has been successfully installed and launched.
gitbash

Next, configure the Git environment by setting your global username and email address, which will be associated with all commits made from this system.

git config --global user.name "lota001"
git config --global user.email "lotannaobianefo.official@gmail.com"

emailname

Also, running git config --list displays all the current Git configuration settings that are active in your environment. These include values set at different levels System.

git config --list

list

Operating within the configured Git environment

The next step is to create a new directory that will serve as the workspace for initializing and managing your Git repository.

mkdir lotannadirectory

mkdir

By running ls command this will list all files and directories in the current folder. Notice you can see the directory we just created.

ls

ls
When the console becomes overloaded, use the clear command to refresh the terminal display temporarily.

clear

clear

In a typical work environment with numerous directories, you can navigate to a specific directory such as the one we just created by using the cd command.

cd lotannadirectory

cd

To initialize a Git repository within a project directory, the git init command is executed. This is typically the initial step when enabling version control for a new or existing project. Executing this command creates a hidden .git directory that contains all metadata, commit history, and configuration required for Git-based version control.

git init

git init

Now, to list all files and directories in the current directory with detailed information, including hidden files ls -al command is used to achieve that.

ls -al

ls al

We have to create a new file in the current directory by using the below command. So in practice, it’s a quick way to either initialize a new file or refresh the timestamp of an existing file.

touch index.html

touch indexhtml

The vi command is used to launch the text editor for creating or modifying text files. It is commonly employed for editing configuration files, scripts, or other text-based files directly within the terminal.

vi index.html

vi indexhtml

Now press "i" to be on the insert mode then you copy and paste your html file. Press "Esc" afterwards.

ii

Now press Shift + : at once and type wq and click enter. This is the standard way to save changes and exit the vi editor.

shift

Access your GitHub account to create a new repository, assign it a name, set its visibility to public, and enable the option to include an initial README file.

udhehe

Within the newly created repository, navigate to the Code tab, select the HTTPS option, and copy the provided repository URL. While multiple methods exist to obtain the repository link, this approach is recommended for beginners.

jjdw

In Git Bash, execute the command git remote add origin followed by the repository URL to establish a connection between your local Git repository and the remote repository.

git remote add origin

repo

Now to display the current state of the working directory and staging area, use the git status command. This command provides visibility into files that are modified, staged, or untracked within the project.

git status

status

To stage all changes within the current project directory and its subdirectories for the next commit, use the git add . command. This instructs Git to include all modifications, new files, and deletions in the staging area.

Execute the git status command afterward to verify that the changes have been staged successfully, staged files will be highlighted in green.

git add .

add

add2

Next, create a new commit with a descriptive message by running the git commit -m "message" command. This generates a snapshot of the staged changes and associates it with the specified commit message.

git commit -m "message"

commit msg

To upload the commits from your local master branch to the master branch of the remote repository referenced as origin, execute the git push origin master command. This action synchronizes the local branch with its remote counterpart.

Once executed, you will be prompted to authenticate by signing in to your GitHub account.

git push origin master

origin master
congrats
On your GitHub account, navigate to the master branch and open the index.html file. All changes made locally on your computer have been successfully deployed to the repository.
hdehdsj
Navigate to the repository Settings, then select Pages. Set the source branch to master, the branch where the resources were deployed and save the configuration. Refresh the Pages view to apply the changes.
e453
53t6353
Access the web page by clicking the provided link or by navigating directly to the URL in a browser.
456tee
Wholah! Here is our webpage
webpage
Synchronizing changes from a local environment to GitHub is an essential skill for developers, facilitating version control, team collaboration, and deployment readiness.

This guide enables the setup of a streamlined workflow that leverages GitHub’s capabilities while aligning with DevOps and cloud computing best practices. Begin with basic operations, experiment with branching strategies, and progressively incorporate advanced tools to optimize development efficiency.

Top comments (1)

Collapse
 
realcloudprojects profile image
SKILL.SCH

very detailed. Welldone!