From Local to GitHub! Basic Steps to Upload Files with git push

In the previous article, you successfully created your first repository (storage place) on GitHub and uploaded (pushed) your initial file. Congratulations!

This time, as the next step, we'll learn the most common workflow in day-to-day development. Specifically, the procedure for how to reflect changes on GitHub after editing existing files or adding new ones on your own PC (local environment). This cycle of "add → commit → push" is the absolute basic of development using Git, so let's master it!

The Basic Git Workflow: Remember These 3 "Places"

To understand Git operations, you first need to know about the concept of "three places." Git uses a temporary storage area before it records file changes. This allows you to flexibly choose which changes to record.

• Working Directory: This is the actual folder on your PC where you open and edit files.
• Staging Area: A temporary place to put the changes you want to commit (save). Think of it as a "list of changes to be included in the next save point."
• Local Repository: The place where the changes in the staging area are officially recorded and stored as a save point (commit). The entire history is saved in the `.git` folder on your PC.

The basic flow of Git is moving files between these three places.

1. Edit or create files in the working directory.
2. Use the git add command to move the changes you want to commit to the staging area.
3. Use the git commit command to record the changes in the staging area into the local repository.
4. Use the git push command to send the records from the local repository to GitHub (the remote repository).

Now, let's experience this flow firsthand!

In Practice! Modifying and Adding Files to Reflect on GitHub

We'll continue working in the `my-first-repo` folder created in the previous article. If you don't have it open, please navigate to that folder in your terminal (or Git Bash).

cd my-first-repo

Step 1: Edit an Existing File and Check the Changes (git status)

First, let's open the `index.html` file we created last time with your favorite editor and change its content.

Example: Change `Hello, GitHub!` to `Hello, World!` and save the file.

Let's check if Git has recognized the file change with the `git status` command. This command is like asking Git, "What's the current state of the project?"

git status

You should see a report that `index.html` has been modified, something like `modified: index.html`.

Step 2: Add a New File

Next, let's try creating a new CSS file. Create a simple CSS file with the following command.

echo "h1 { color: steelblue; }" > style.css

If you run `git status` again now, `style.css` will be displayed as an "Untracked file". This means that Git doesn't know about this file's existence yet.

git status

Step 3: Stage the Changes (git add)

Let's add both the "modified `index.html`" and the "newly created `style.css`" to the staging area to include them in the next save point. The `git add` command can be used for both modified and new files.

Typically, you would stage all changes (new additions and modifications) in the working directory at once with the following command.

git add .

After this, if you run `git status` again, you will see all changes displayed in green as "Changes to be committed," which indicates that staging is complete.

Step 4: Commit the Changes (git commit)

Record the changes you've staged into the local repository as a single save point. Let's add a specific message so you know what you did.

git commit -m "Update index.html text and add style.css"

Step 5: Push to GitHub (git push)

Finally, send (push) the new commit you created in your local repository to the remote repository on GitHub. This shares your changes with team members and creates a secure backup.

For pushes after the first one, the initial `-u` option is not necessary.

git push origin main

Confirmation and Tips

Once the push is complete, try reloading your GitHub repository page in your browser. You should see that `style.css` has been added and that the last update time and commit message for `index.html` have changed. This confirms that your changes have been correctly reflected on GitHub.

[Image: Showing two files on GitHub, with the commit history also updated.]

• Make a habit of `git status`: Before you do any work, or before committing and pushing, make it a habit to always check the current state with `git status`. This will help prevent unintentional file additions or changes.
• Commit in meaningful units: Try to group related changes into a single commit, such as "Fix header design" or "Add footer links." This keeps your history clean and makes it easier to track changes later.