Pushing Your First Website Live via GitHub (Git to Production)

For decades, publishing a website required manual FTP clients like FileZilla, manually dragging HTML and CSS files over unstable connections into an public_html directory on a remote cPanel server. If you made a typo, you had to manually overwrite the remote file and pray you didn't break production.

Today, the modern web industry operates on Git-driven Continuous Deployment (GitOps). Every time you commit code and run git push, automated cloud pipelines detect the commit, trigger production builds, run unit tests, and deploy your site to global edge data centers in under 30 seconds.

In this hands-on, zero-jargon tutorial, we will take a local folder of website files on your computer and walk through the exact terminal commands to initialize Git, create a remote GitHub repository, push your code securely, and hook it up to modern automated hosting.

1. What Are Git and GitHub (and Why Are They Different)?

Before typing commands, ensure you understand the distinction between Git and GitHub:

• Git: A local version control software program installed on your personal computer. It tracks changes made to files over time, allowing you to roll back mistakes, branch experimental features, and compare code revisions.
• GitHub: A cloud-based hosting platform (owned by Microsoft) that stores remote copies of your Git repositories. It enables collaboration, code reviews, and automated deployment integrations.

Think of Git as your computer's local digital camera taking snapshots of your project, and GitHub as the cloud photo album where those snapshots are safely backed up and shared.

2. Step 1: Install and Configure Git on Your Machine

Open your terminal (Terminal on macOS/Linux, or PowerShell / Git Bash on Windows). First, verify if Git is installed:

git --version

If installed, it will print something like git version 2.44.0. If not installed:

• macOS: Run xcode-select --install or install via Homebrew (brew install git).
• Windows: Download the official installer from git-scm.com.
• Linux (Ubuntu/Debian): Run sudo apt update && sudo apt install git.

Set Your Global Identity:

Every Git commit attaches an author name and email. Set this once globally:

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

(Use the same email address associated with your GitHub account).

3. Step 2: Create a Vital .gitignore File

One of the biggest security mistakes beginners make is accidentally committing private files (like API keys, passwords, or the massive 500MB node_modules folder) to a public GitHub repository.

In the root of your project directory, create a file named exactly .gitignore:

# Dependency directories (never push to GitHub)
node_modules/
.pnp
.pnp.js

# Environment variables & secrets (NEVER PUSH SECRETS!)
.env
.env.local
.env.development.local
.env.production.local

# Production build outputs
dist/
build/
.next/
out/

# Operating system junk files
.DS_Store
Thumbs.db

Git will now permanently ignore these files and folders during commits.

4. Step 3: Initialize Your Local Git Repository

Navigate to your website project folder in your terminal using the cd command:

cd path/to/my-website-project

Initialize a fresh Git repository:

git init -b main

(The -b main flag sets main as your default primary branch rather than the legacy term master.)

Stage and Commit Your Files:

1. Check the status of your directory:

   git status
   

   You will see your project files listed in red under "Untracked files".

2. Stage all files for your snapshot:

   git add .
   

   The dot (.) tells Git to stage every non-ignored file in the current directory.

3. Commit your snapshot with a descriptive message:

   git commit -m "Initial commit: launch ready project files"
   

You have now created your first local Git checkpoint!

5. Step 4: Create a Remote Repository on GitHub

1. Log into your GitHub account.
2. In the top-right corner of the interface, click the + dropdown icon and select New repository.
3. Name your repository (e.g., my-portfolio-site).
4. Choose Public (visible to the world) or Private (visible only to you and collaborators).
5. CRITICAL: Leave "Add a README file", "Add .gitignore", and "Choose a license" UNCHECKED. Since we already created our project locally, checking these will create conflicting commits.
6. Click the green Create repository button.

6. Step 5: Link and Push Local Code to GitHub

GitHub will present you with quick setup commands. Copy and run the block under "…or push an existing repository from the command line":

# 1. Link your local project to your remote GitHub repo
git remote add origin https://github.com/your-username/my-portfolio-site.git

# 2. Push your main branch up to GitHub
git push -u origin main

If prompted for credentials:

• Modern GitHub requires a Personal Access Token (PAT) or SSH Key rather than your raw password.
• Generate a token at GitHub > Settings > Developer Settings > Personal Access Tokens (Classic) with the repo scope selected.

Once the command finishes, refresh your GitHub repository page in your browser. All of your code files, directories, and commit history are now securely backed up in the cloud!

7. Step 6: Hooking Up Continuous Deployment

Now comes the magic: connecting your GitHub repository to a modern deployment cloud (like Vercel, Netlify, or Cloudflare Pages) so that every future code change deploys automatically.

Deploying with Vercel:

1. Go to Vercel and click "Add New Project".
2. Select "Continue with GitHub".
3. Locate your new repository (my-portfolio-site) and click Import.
4. Vercel automatically detects whether your site is built with Next.js, Vite, React, Astro, or plain static HTML.
5. Click Deploy.

Within 30 seconds, Vercel pulls your code from GitHub, builds your project on their cloud servers, and provides you with a live, global production URL!

8. The Modern Developer Workflow (Your Daily Routine)

From this day forward, you never need to use FTP or manually upload zip files. Your daily development cycle consists of three simple terminal commands:

# 1. Edit your code in VS Code and save your files
# 2. Stage your changes
git add .

# 3. Create a commit describing what you changed
git commit -m "Fix mobile navigation alignment and update hero copy"

# 4. Push to GitHub
git push

The moment git push completes, GitHub notifies your deployment host via webhook. Your live website updates worldwide automatically within seconds without a single second of downtime.