Publishing Your Project to GitHub

beginner10 min read

Git
GitHub Actions

Git helps you track the history of your project on your computer. GitHub gives you a place to store that Git repository online, making your project easier to back up, share, and access from other computers. In this topic, you will learn how to create a GitHub repository, connect it to an existing local project, commit your changes, and publish those commits to GitHub. You will also learn the difference between Git and GitHub, understand what a remote repository is, and see how Git clients such as GitHub Desktop, VS Code, and the Git command line can be used to perform the same workflow. The examples use a small project such as a JavaScript calculator so you can see the complete journey from a project on your computer to a project stored on GitHub.

Publishing Your Project to GitHub

Overview

In this topic, you will learn how to create a GitHub repository, connect it to an existing local project, commit your changes, and publish those commits to GitHub. You will also learn the difference between Git and GitHub, understand what a remote repository is, and see how Git clients such as GitHub Desktop, VS Code, and the Git command line can be used to perform the same workflow.

The examples use a small project such as a JavaScript calculator so you can see the complete journey from a project on your computer to a project stored on GitHub.

Why This Matters

You have built a project on your computer.

For example:

calculator/
├── index.html
├── style.css
└── script.js

The project exists locally, but what happens if your computer fails?

And what if you want to:

access the project from another computer?
share your code with a mentor?
show your project to someone else?
keep an online copy of your work?
continue working with other developers?

GitHub provides an online home for Git repositories.

The basic idea is:

Your computer
     ↓
   Git
     ↓
Local repository
     ↓
   push
     ↓
  GitHub
     ↓
Remote repository

1. Git and GitHub Are Not the Same Thing

This distinction is important.

Git

Git is a version control system.

It runs on your computer and tracks changes to your project.

For example:

git add .
git commit -m "Add calculator"

These commands create and record a commit in your local Git repository.

GitHub

GitHub is a platform that can host Git repositories online.

It gives you a place where your Git repository can be stored and shared.

A useful way to think about it is:

Git
→ manages version history

GitHub
→ hosts and shares that Git repository online

Git can be used without GitHub.

GitHub repositories, however, are built around Git.

2. What Is a Repository?

A repository, often shortened to repo, is a project managed by Git.

A local repository lives on your computer.

For example:

calculator/
├── .git/
├── index.html
├── style.css
└── script.js

The .git directory contains Git's information about the project and its history.

When you create a repository on GitHub, you create an online repository that can store the project's Git history.

3. Local Repository vs Remote Repository

You may hear the terms local and remote.

Local repository

The repository on your computer.

Your computer
└── calculator
    └── .git

Remote repository

Another copy of the repository stored somewhere else, commonly on GitHub.

GitHub
└── calculator

The two repositories can exchange commits.

Local repository
       ↕
     Git
       ↕
Remote repository

When you send your local commits to GitHub, you push them.

4. What Is a GitHub Repository?

A GitHub repository is an online Git repository hosted on GitHub.

A repository has an address such as:

https://github.com/username/calculator

It can contain:

project files
commits
branches
README files
other repository information

Depending on the repository settings, it can be public or private.

5. Public vs Private Repositories

When creating a GitHub repository, you normally choose whether it is:

Public

Other people can view the repository.

This is useful for:

portfolio projects
open-source projects
projects you want to share

Private

Only people with appropriate access can view it.

This is useful for:

personal projects
unfinished projects
private work

For a learning project that you want to use as part of a portfolio, a public repository can be useful.

6. Creating a GitHub Repository

After signing in to GitHub:

GitHub
  ↓
New repository
  ↓
Repository name
  ↓
Choose Public or Private
  ↓
Create repository

For example:

Repository name:

calculator

GitHub will create the online repository.

At this point, however, your local calculator project is not automatically uploaded.

That is an important distinction.

Creating the GitHub repository and publishing your local project are two separate steps.

7. Choosing How to Work with Git

You do not have to use one particular application to work with Git and GitHub.

Common choices include:

GitHub Desktop

A graphical Git client provided by GitHub.

It lets you see:

changed files
commit changes
branch information
push and pull operations
repository status

For beginners, GitHub Desktop is a good place to start.

VS Code

VS Code includes Git integration through its Source Control panel.

You can:

review changes
stage files
create commits
pull
push
switch branches

This is convenient if you already spend most of your time coding in VS Code.

Git command line

You can perform the same operations directly using Git commands:

git status
git add .
git commit -m "Add calculator"
git push

The command line gives you the most direct understanding of what Git is doing.

Other Git clients

There are other graphical Git clients as well.

The important point is:

The client is a tool. Git is the underlying version control system.

8. Recommended Starting Point for Beginners

If Git itself is still new to you, GitHub Desktop is a comfortable starting point.

You can see the workflow visually:

Change files
    ↓
See changed files
    ↓
Commit
    ↓
Push
    ↓
GitHub

Once you understand this workflow, you can use VS Code or the command line without changing the underlying concepts.

You should still understand the Git commands behind the actions.

For example:

GitHub Desktop
"Commit"
      ↓
git commit

GitHub Desktop
"Push"
      ↓
git push

The graphical interface is simply another way to perform Git operations.

9. Connecting Your Local Repository to GitHub

Suppose your calculator already has a Git repository.

You create the GitHub repository:

calculator

Git needs to know where that online repository is.

This connection is called a remote.

The common remote name is:

origin

You can connect it with:

git remote add origin https://github.com/username/calculator.git

Now your local repository knows about the GitHub repository.

You can check the connection:

git remote -v

You may see:

origin  https://github.com/username/calculator.git (fetch)
origin  https://github.com/username/calculator.git (push)

10. What Does origin Mean?

origin is simply a conventional name for a remote repository.

It is not a special GitHub account.

When you run:

git remote add origin ...

you are essentially saying:

"Give this remote repository the name origin."

You can have other remote names, but origin is the common default.

11. Making Your First Commit

Before pushing your project, make sure the project is committed locally.

Check the status:

git status

Stage the changes:

git add .

Create a commit:

git commit -m "Add calculator"

Now the changes are saved in your local Git history.

They are still not necessarily on GitHub.

12. Push Your Commit to GitHub

This is where git push becomes important.

git push -u origin main

The command sends your local commits to the GitHub repository.

Think of it as:

Local Git commit
       ↓
    git push
       ↓
GitHub repository

After the push succeeds, open the GitHub repository in your browser and you should see your project files.

13. Commit and Push Are Different

This is one of the most important concepts in this topic.

Commit

git commit

saves changes into your local Git history.

Push

git push

sends those commits to the remote repository.

So:

Change file
    ↓
git add
    ↓
git commit
    ↓
Local history
    ↓
git push
    ↓
GitHub

A commit does not automatically upload your code to GitHub.

14. Making Another Change

Suppose you improve your calculator display.

After making the change:

git status

Stage it:

git add .

Commit it:

git commit -m "Improve calculator display"

Push it:

git push

Now GitHub contains the new commit.

The everyday workflow becomes:

Make changes
     ↓
Stage
     ↓
Commit
     ↓
Push

15. Using GitHub Desktop

The same workflow can be performed through GitHub Desktop.

A typical workflow is:

Open repository
      ↓
Review changed files
      ↓
Enter commit message
      ↓
Commit
      ↓
Push origin

GitHub Desktop lets you visually inspect the files that changed before creating the commit.

This can be particularly helpful while learning.

You should still understand that the actions correspond to Git operations.

16. Using VS Code

If you are working in VS Code, the Source Control panel provides a similar workflow.

You can:

Source Control
     ↓
Review changes
     ↓
Stage changes
     ↓
Commit
     ↓
Sync / Push

VS Code is especially convenient because your code editor and Git interface are in the same application.

The underlying concepts remain the same.

17. Using the Git Command Line

You can also work entirely from the terminal.

For example:

git status
git add .
git commit -m "Add calculator"
git push

This is the most direct way to interact with Git.

You do not need a graphical client to use GitHub.

18. Do Not Upload Everything

Before publishing a project, check what you are committing.

Some files should generally not be uploaded.

For example:

node_modules/
.env

A .gitignore file tells Git which files or directories to ignore.

Example:

node_modules/
.env

This is particularly important because .env files may contain passwords, API keys, or other secrets.

Never publish passwords, API keys, private credentials, or other secrets to a public GitHub repository.

19. A Simple Calculator Example

Suppose you have completed:

calculator/
├── index.html
├── style.css
└── script.js

You can publish it using this general workflow:

1. Create GitHub repository
          ↓
2. Connect local repository
          ↓
3. Check files
          ↓
4. Commit changes
          ↓
5. Push to GitHub
          ↓
6. Open GitHub repository
          ↓
7. Verify the project

Once published, your calculator becomes a real project that you can share.

20. Common Beginner Mistakes

Creating a GitHub repository but not pushing the project

Creating the online repository does not automatically upload your local files.

Confusing commit and push

commit → local history
push   → GitHub

Uploading secrets

Never commit:

.env
API keys
passwords
private credentials

Uploading node_modules

Dependencies can normally be installed from package.json.

They generally should not be committed to the repository.

Connecting to the wrong repository

Always verify:

git remote -v

before pushing if you are unsure where the repository points.

Using a vague commit message

Avoid:

fix
update
changes

Prefer:

Add calculator display
Fix division operation
Add keyboard input

A commit message should help someone understand what changed.

21. Your First GitHub Publishing Checklist

Before considering the project published:

□ Git is initialized
□ Project changes are committed
□ GitHub repository exists
□ Local repository is connected to the correct remote
□ No secrets are included
□ .gitignore is configured where necessary
□ Changes are pushed
□ GitHub repository shows the project files
□ Commit history is visible

Key Takeaways

Git tracks the history of your project.
GitHub can host your Git repository online.
A local repository lives on your computer.
A remote repository can live on GitHub.
origin is the conventional name for the GitHub remote.
git commit saves changes to local Git history.
git push sends commits to GitHub.
GitHub Desktop, VS Code, and the Git command line can all perform the workflow.
GitHub Desktop is a good visual starting point for beginners.
The underlying Git concepts remain the same regardless of the client.
.gitignore helps prevent unnecessary or sensitive files from being committed.
Never publish passwords, API keys, or other secrets.
A project becomes much easier to share and showcase once it is published to GitHub.

Prerequisites

Git Basics
Basic command-line usage
A completed project
A GitHub account

Git Basics
Branching
Pull Requests
GitHub Workflow
Semantic Commits
GitHub Actions
Code Reviews

Publishing Your Project to GitHub

Overview

Why This Matters

1. Git and GitHub Are Not the Same Thing

Git

GitHub

2. What Is a Repository?

3. Local Repository vs Remote Repository

Local repository

Remote repository

4. What Is a GitHub Repository?

5. Public vs Private Repositories

Public

Private

6. Creating a GitHub Repository

7. Choosing How to Work with Git

GitHub Desktop

VS Code

Git command line

Other Git clients

8. Recommended Starting Point for Beginners

9. Connecting Your Local Repository to GitHub

10. What Does origin Mean?

11. Making Your First Commit

12. Push Your Commit to GitHub

13. Commit and Push Are Different

Commit

Push

14. Making Another Change

15. Using GitHub Desktop

16. Using VS Code

17. Using the Git Command Line

18. Do Not Upload Everything

19. A Simple Calculator Example

20. Common Beginner Mistakes

Creating a GitHub repository but not pushing the project

Confusing commit and push

Uploading secrets

Uploading node_modules

Connecting to the wrong repository

Using a vague commit message

21. Your First GitHub Publishing Checklist

Key Takeaways

Prerequisites

Related Topics

Further Reading

GitHub

GitHub Docs — Getting started with GitHub

GitHub Docs — Creating a repository

GitHub Docs — Adding a locally hosted code repository to GitHub

GitHub Desktop

GitHub Desktop Documentation

Git — Official Documentation