GitHub connect a specific branch to the main branch
📦 GitHub
✨ The Prompt Phrase
What sequence of Git and terminal commands would you use to move into a local project folder, initialize a repository, create the first commit, connect it to a GitHub remote, rename the branch to main, and force push it upstream? cd "C:\Users\victo\Local Sites\abu-amra" ~git init~ ~git add .~ ~git commit -m "Initial commit"~ ~git remote add origin~ https://github.com/victorystreamlines/abu-amra.git ~git branch -M main~ ~git push --force -u origin main~
💻 Code Preview
📦 All-in-One Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Git Commands Reference</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: #0d1117;
color: #c9d1d9;
min-height: 100vh;
padding: 40px 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
font-size: 2rem;
color: #58a6ff;
margin-bottom: 8px;
}
.subtitle {
text-align: center;
color: #8b949e;
margin-bottom: 40px;
font-size: 0.95rem;
}
.command-summary {
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 24px;
}
.command-summary h2 {
color: #58a6ff;
margin-bottom: 16px;
text-align: center;
}
.command-list {
list-style: none;
counter-reset: cmd;
}
.command-list li {
counter-increment: cmd;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
margin-bottom: 8px;
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.9rem;
}
.command-list li::before {
content: counter(cmd) ".";
color: #1f6feb;
font-weight: 700;
flex-shrink: 0;
}
.cmd-text {
flex: 1;
min-width: 0;
overflow-x: auto;
}
.copy-btn {
flex-shrink: 0;
background: #21262d;
border: 1px solid #30363d;
color: #8b949e;
padding: 4px 10px;
border-radius: 6px;
cursor: pointer;
font-family: 'Segoe UI', sans-serif;
font-size: 0.78rem;
transition: all 0.2s;
white-space: nowrap;
}
.copy-btn:hover {
background: #30363d;
color: #c9d1d9;
border-color: #58a6ff;
}
.copy-btn.copied {
background: #0c1c0e;
border-color: #3fb950;
color: #3fb950;
}
.copy-all-btn {
display: block;
width: 100%;
margin-top: 16px;
padding: 12px;
background: #1f6feb;
border: none;
border-radius: 8px;
color: #fff;
font-family: 'Segoe UI', sans-serif;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.copy-all-btn:hover {
background: #388bfd;
}
.copy-all-btn.copied {
background: #238636;
}
.explanation-section {
margin-top: 30px;
}
.explanation-section h2 {
color: #58a6ff;
text-align: center;
margin-bottom: 24px;
font-size: 1.4rem;
}
.step-card {
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 24px;
margin-bottom: 16px;
}
.step-card-header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.step-number {
background: #1f6feb;
color: #fff;
font-weight: 700;
font-size: 0.8rem;
padding: 4px 12px;
border-radius: 20px;
white-space: nowrap;
}
.step-title {
font-size: 1.1rem;
color: #e6edf3;
font-weight: 600;
}
.step-command {
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 10px 16px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.9rem;
color: #79c0ff;
margin-bottom: 14px;
}
.step-desc {
color: #c9d1d9;
line-height: 1.7;
font-size: 0.92rem;
}
.step-desc strong {
color: #e6edf3;
}
.step-desc code {
background: #0d1117;
border: 1px solid #30363d;
border-radius: 4px;
padding: 2px 6px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.85rem;
color: #79c0ff;
}
.relation-box {
margin-top: 12px;
padding: 10px 14px;
border-radius: 8px;
font-size: 0.88rem;
line-height: 1.6;
}
.relation-prev {
background: #1c1c0c;
border: 1px solid #d29922;
color: #e3b341;
}
.relation-next {
background: #0c1c1c;
border: 1px solid #3fb9a0;
color: #56d4c0;
}
.relation-label {
font-weight: 700;
display: block;
margin-bottom: 4px;
}
.breakdown {
margin-top: 12px;
padding: 0;
}
.breakdown dt {
color: #79c0ff;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.88rem;
margin-top: 8px;
}
.breakdown dd {
color: #8b949e;
font-size: 0.88rem;
margin-left: 16px;
margin-bottom: 4px;
}
.flow-diagram {
background: #161b22;
border: 1px solid #30363d;
border-radius: 12px;
padding: 24px;
margin-top: 30px;
text-align: center;
}
.flow-diagram h2 {
color: #58a6ff;
margin-bottom: 20px;
}
.flow-steps {
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.flow-item {
background: #0d1117;
border: 1px solid #30363d;
border-radius: 8px;
padding: 8px 20px;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 0.82rem;
color: #c9d1d9;
width: fit-content;
}
.flow-arrow {
color: #3fb950;
font-size: 1.2rem;
padding: 4px 0;
}
.flow-label {
color: #8b949e;
font-size: 0.75rem;
font-family: 'Segoe UI', sans-serif;
}
</style>
</head>
<body>
<div class="container">
<h1>Git Commands Reference</h1>
<p class="subtitle">Connect a local project to an existing GitHub repository — 7 steps in order</p>
<div class="command-summary">
<h2>Complete Command Reference</h2>
<ol class="command-list">
<li><span class="cmd-text">cd "C:\Users\victo\Local Sites\abu-amra"</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
<li><span class="cmd-text">git init</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
<li><span class="cmd-text">git add .</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
<li><span class="cmd-text">git commit -m "Initial commit"</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
<li><span class="cmd-text">git remote add origin https://github.com/victorystreamlines/abu-amra.git</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
<li><span class="cmd-text">git branch -M main</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
<li><span class="cmd-text">git push --force -u origin main</span><button class="copy-btn" onclick="copyCmd(this)">Copy</button></li>
</ol>
<button class="copy-all-btn" onclick="copyAll()">Copy All Commands</button>
</div>
<!-- Detailed Explanation Section -->
<div class="explanation-section">
<h2>Step-by-Step Explanation</h2>
<!-- Step 1 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 1</span>
<span class="step-title">Navigate to your project folder</span>
</div>
<div class="step-command">cd "C:\Users\victo\Local Sites\abu-amra"</div>
<div class="step-desc">
<strong>What it does:</strong> <code>cd</code> stands for <strong>"change directory"</strong>. It moves your terminal's current location to the project folder. Every command you run after this will execute inside this folder.
<dl class="breakdown">
<dt>cd</dt>
<dd>The command to change your current working directory.</dd>
<dt>"C:\Users\victo\Local Sites\abu-amra"</dt>
<dd>The full path to your project. Quotes are required because the path contains spaces ("Local Sites").</dd>
</dl>
<div class="relation-box relation-next">
<span class="relation-label">Why Step 2 needs this first:</span>
All Git commands operate on the <strong>current directory</strong>. If you run <code>git init</code> without being in the right folder, Git will initialize in the wrong location. This step ensures every subsequent command targets your actual project.
</div>
</div>
</div>
<!-- Step 2 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 2</span>
<span class="step-title">Initialize Git in the folder</span>
</div>
<div class="step-command">git init</div>
<div class="step-desc">
<strong>What it does:</strong> Creates a hidden <code>.git</code> folder inside your project. This folder is where Git stores all tracking data — the history of every change, every commit, and every branch. Without it, the folder is just a normal directory and Git commands will not work.
<dl class="breakdown">
<dt>git</dt>
<dd>Calls the Git program.</dd>
<dt>init</dt>
<dd>Short for "initialize" — sets up Git tracking for this folder.</dd>
</dl>
<div class="relation-box relation-prev">
<span class="relation-label">Depends on Step 1 because:</span>
<code>git init</code> initializes Git in <strong>whatever folder the terminal is currently in</strong>. Step 1 made sure the terminal is inside your project folder, so Git starts tracking the right files.
</div>
<div class="relation-box relation-next">
<span class="relation-label">Why Step 3 needs this first:</span>
You cannot stage files (<code>git add</code>) unless Git is initialized. Without <code>.git</code>, Git has no system to track or stage anything — every git command after this depends on <code>git init</code> having been run.
</div>
</div>
</div>
<!-- Step 3 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 3</span>
<span class="step-title">Stage all files for commit</span>
</div>
<div class="step-command">git add .</div>
<div class="step-desc">
<strong>What it does:</strong> Takes <strong>all files</strong> in the current folder and its subfolders and moves them into the <strong>staging area</strong>. The staging area is a preparation zone — files placed here are marked as "ready to be saved" in the next commit. Think of it as packing items into a box before sealing it.
<dl class="breakdown">
<dt>git add</dt>
<dd>The command to move files into the staging area.</dd>
<dt>.</dt>
<dd>The dot means "everything in the current directory and all subdirectories." You could also add specific files like <code>git add index.html</code>.</dd>
</dl>
<div class="relation-box relation-prev">
<span class="relation-label">Depends on Step 2 because:</span>
<code>git add</code> requires an initialized Git repository. The <code>.git</code> folder (created by Step 2) is where the staging area lives. Without it, Git has nowhere to record which files are staged.
</div>
<div class="relation-box relation-next">
<span class="relation-label">Why Step 4 needs this first:</span>
<code>git commit</code> only saves files that are in the staging area. If you skip <code>git add</code>, the staging area is empty and Git will say "nothing to commit." You must add files before you can commit them.
</div>
</div>
</div>
<!-- Step 4 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 4</span>
<span class="step-title">Save the staged files with a message</span>
</div>
<div class="step-command">git commit -m "Initial commit"</div>
<div class="step-desc">
<strong>What it does:</strong> Takes everything in the staging area and <strong>permanently saves a snapshot</strong> of those files into Git's history. Each commit is like a checkpoint — a frozen version of your project at that moment in time. The message describes what this snapshot represents.
<dl class="breakdown">
<dt>git commit</dt>
<dd>The command to save a snapshot of all staged files.</dd>
<dt>-m</dt>
<dd>Flag that means "message follows" — lets you write the commit description inline.</dd>
<dt>"Initial commit"</dt>
<dd>Your description of this save point. Must be in quotes. Can be anything you want, such as "First version" or "Abu Amra project".</dd>
</dl>
<div class="relation-box relation-prev">
<span class="relation-label">Depends on Step 3 because:</span>
A commit saves <strong>only what's in the staging area</strong>. Step 3 placed all your files there. Without staging first, there would be nothing for the commit to save.
</div>
<div class="relation-box relation-next">
<span class="relation-label">Why Step 5 needs this first:</span>
Git can only push <strong>commits</strong> to GitHub — not individual files. Without at least one commit, there is nothing to push. Step 5 connects to GitHub, and Step 7 will push this commit there.
</div>
</div>
</div>
<!-- Step 5 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 5</span>
<span class="step-title">Connect the local repo to GitHub</span>
</div>
<div class="step-command">git remote add origin https://github.com/victorystreamlines/abu-amra.git</div>
<div class="step-desc">
<strong>What it does:</strong> Registers a <strong>remote destination</strong> — it tells your local Git repository the address of the GitHub repository. After this, Git knows where to send your code when you push. This does not transfer any files yet; it only saves the address.
<dl class="breakdown">
<dt>git remote</dt>
<dd>The command to manage remote server connections.</dd>
<dt>add</dt>
<dd>Subcommand that adds a new remote.</dd>
<dt>origin</dt>
<dd>The nickname for this remote. "origin" is the standard convention for the primary remote. You could name it anything, but "origin" is universally understood.</dd>
<dt>https://github.com/victorystreamlines/abu-amra.git</dt>
<dd>The HTTPS URL of the GitHub repository. We use HTTPS (not SSH) because your machine doesn't have SSH keys configured.</dd>
</dl>
<div class="relation-box relation-prev">
<span class="relation-label">Depends on Steps 1–4 because:</span>
You need an initialized Git repo (Step 2) with at least one commit (Step 4) to have something worth connecting to GitHub. Technically you can add a remote before committing, but there would be nothing to push.
</div>
<div class="relation-box relation-next">
<span class="relation-label">Why Steps 6 & 7 need this first:</span>
<code>git push</code> needs to know <strong>where</strong> to send your code. Without a remote, Git has no destination address. The word <code>origin</code> used in Step 7's push command refers directly to the URL saved here.
</div>
</div>
</div>
<!-- Step 6 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 6</span>
<span class="step-title">Rename the branch to main</span>
</div>
<div class="step-command">git branch -M main</div>
<div class="step-desc">
<strong>What it does:</strong> Renames your current branch to <code>main</code>. Some systems create the default branch as <code>master</code>, while GitHub expects <code>main</code>. This ensures your local branch name matches what GitHub uses, preventing conflicts during push.
<dl class="breakdown">
<dt>git branch</dt>
<dd>The command to manage branches.</dd>
<dt>-M</dt>
<dd>Capital M means "force rename" — it renames the current branch even if a branch named "main" already exists. Lowercase <code>-m</code> would fail if "main" already exists.</dd>
<dt>main</dt>
<dd>The new name for the branch. This matches GitHub's default branch name.</dd>
</dl>
<div class="relation-box relation-prev">
<span class="relation-label">Depends on Step 4 because:</span>
A branch only exists after the first commit. Before Step 4, there is no branch to rename. The act of committing creates the initial branch, and this step renames it.
</div>
<div class="relation-box relation-next">
<span class="relation-label">Why Step 7 needs this first:</span>
In Step 7, we push to <code>origin main</code>. If your local branch is still called <code>master</code>, the push would either fail or create a separate branch on GitHub. Renaming first ensures the local name (<code>main</code>) matches the remote destination (<code>main</code>).
</div>
</div>
</div>
<!-- Step 7 -->
<div class="step-card">
<div class="step-card-header">
<span class="step-number">Step 7</span>
<span class="step-title">Force push and set upstream tracking</span>
</div>
<div class="step-command">git push --force -u origin main</div>
<div class="step-desc">
<strong>What it does:</strong> Uploads all your commits from the local <code>main</code> branch to the GitHub repository, <strong>overwriting</strong> whatever was previously there. It also sets up tracking so future pushes and pulls are simplified.
<dl class="breakdown">
<dt>git push</dt>
<dd>The command to upload commits from your local repo to a remote repo.</dd>
<dt>--force</dt>
<dd>Overwrites the remote history with your local history. Necessary here because the GitHub repo had different content before, and Git would normally reject a push that doesn't match. Use with caution — this erases whatever was on GitHub.</dd>
<dt>-u</dt>
<dd>Short for <code>--set-upstream</code>. Links your local <code>main</code> to <code>origin/main</code> permanently. After this, you only need to type <code>git push</code> or <code>git pull</code> — Git remembers the rest. You only need <code>-u</code> once.</dd>
<dt>origin</dt>
<dd>The remote nickname defined in Step 5. Git looks up the URL associated with "origin" and pushes there.</dd>
<dt>main</dt>
<dd>The branch to push. This is the branch renamed in Step 6.</dd>
</dl>
<div class="relation-box relation-prev">
<span class="relation-label">Depends on all previous steps because:</span>
This is the final step that brings everything together. It needs: a project folder (Step 1), Git initialized (Step 2), files staged (Step 3), a commit to push (Step 4), a remote destination (Step 5), and the correct branch name (Step 6). Remove any one of these and the push will fail.
</div>
</div>
</div>
</div>
<!-- Flow Diagram -->
<div class="flow-diagram">
<h2>How It All Connects</h2>
<div class="flow-steps">
<div class="flow-item">Step 1: cd — Enter project folder</div>
<div class="flow-arrow">↓ <span class="flow-label">now inside the project</span></div>
<div class="flow-item">Step 2: git init — Activate Git</div>
<div class="flow-arrow">↓ <span class="flow-label">Git is now watching</span></div>
<div class="flow-item">Step 3: git add . — Stage all files</div>
<div class="flow-arrow">↓ <span class="flow-label">files are ready to save</span></div>
<div class="flow-item">Step 4: git commit — Save snapshot</div>
<div class="flow-arrow">↓ <span class="flow-label">snapshot saved locally</span></div>
<div class="flow-item">Step 5: git remote add — Set GitHub address</div>
<div class="flow-arrow">↓ <span class="flow-label">Git knows where to push</span></div>
<div class="flow-item">Step 6: git branch -M — Name the branch</div>
<div class="flow-arrow">↓ <span class="flow-label">branch name matches GitHub</span></div>
<div class="flow-item">Step 7: git push — Upload to GitHub</div>
</div>
</div>
</div>
<script>
function copyCmd(btn) {
var text = btn.previousElementSibling.textContent;
navigator.clipboard.writeText(text);
btn.textContent = 'Copied!';
btn.classList.add('copied');
setTimeout(function() {
btn.textContent = 'Copy';
btn.classList.remove('copied');
}, 1500);
}
function copyAll() {
var cmds = document.querySelectorAll('.cmd-text');
var all = [];
cmds.forEach(function(el) { all.push(el.textContent); });
navigator.clipboard.writeText(all.join('\n'));
var btn = document.querySelector('.copy-all-btn');
btn.textContent = 'All Commands Copied!';
btn.classList.add('copied');
setTimeout(function() {
btn.textContent = 'Copy All Commands';
btn.classList.remove('copied');
}, 1500);
}
</script>
</body>
</html>
Live Preview