Keep your code

Our website's code is still in v0. We'll connect the project to GitHub, then download a copy into the projects folder so we can edit and run it on our computer.

Git records versions of a project's files. GitHub hosts Git projects online. A project stored with its Git history is called a repository, often shortened to repo.

Outcome

Clone the website's GitHub repository into ~/projects/small-hours-studio and verify its connection to the online repository.

Hands-on exercise 2.2

Connect the existing project

Sign in to GitHub, or create an account and complete its verification steps. Use an account that can own this course project.

Return to the v0 project we published in Section 1. Open Project menu → Settings → GitHub, then select Connect. Complete any authorization prompts. Under Git Scope, choose your GitHub account, name the repository small-hours-studio, and select Create Repository. This v0 connection creates a private repository and sends the project's code to it.

If the project already has a repository connected, open that repository and continue with it. Keep the connection to the Vercel project from “Go Live.”

Open the repository on GitHub. It should contain application files, including package.json. A branch is a named version of the project where we can save a series of changes. Note the default branch shown above the file list, often main.

v0 uses working branches for subsequent edits. Finish publishing any reviewed changes still waiting in v0 before cloning, and check that the repository's default branch contains that version. For this course project, the default branch should be the branch we're publishing. From that point on, we'll edit the local copy.

Install Git and GitHub CLI

Open macOS Terminal or the Ubuntu window from lesson 2.1. Run these checks separately:

git --version
gh --version

gh is GitHub CLI, which we'll use to sign in from the terminal. CLI means “command-line interface.” If both commands print version information, continue to sign-in. Otherwise, follow your platform's setup below.

On macOS: Install Homebrew using its official instructions, including the installer's “Next steps.” Homebrew installs command-line tools. Once brew --version works, run:

brew install git gh

Wait for installation to finish, then repeat the version checks. If macOS prompts you to install Command Line Tools, complete that installation too.

In Ubuntu through WSL: Use Ubuntu's package manager to install the tools:

sudo apt update
sudo apt install git gh

apt update refreshes the list of available packages; apt install installs the named tools. sudo requests administrator access inside Ubuntu and may ask for the Linux password from lesson 2.1. Review any confirmation prompt. If gh is unavailable, follow GitHub's Ubuntu installation instructions, then repeat the version checks in Ubuntu.

Sign in from the terminal

The terminal needs access to our private repository. Start GitHub CLI's browser sign-in:

gh auth login

Choose GitHub.com, HTTPS, and browser login when prompted. Agree to authenticate Git with your GitHub credentials if asked. Follow the displayed URL and one-time code in your browser, using the account that owns the repository. On WSL, open the displayed URL manually if the browser doesn't open.

After sign-in, configure Git to use that login and check the account:

gh auth setup-git --hostname github.com
gh auth status

The setup command connects Git to GitHub CLI's authentication. Confirm that the status names the intended account. Keep login codes and credentials out of the v0 chat.

Clone into the projects folder

A clone is a local copy of the repository, including its history. On the GitHub repository page, select Code → HTTPS and copy the repository URL.

In the terminal, return to our projects folder:

cd ~/projects
ls

Check whether small-hours-studio already exists before continuing. Git will create that folder during cloning. If it's already there, use the troubleshooting steps below.

Build the next command by replacing PASTE_HTTPS_URL_HERE with the URL copied from GitHub. The final word sets the local folder name:

git clone PASTE_HTTPS_URL_HERE small-hours-studio

Check the account and repository name in the URL before pressing Enter. Once the download finishes successfully, enter the new folder:

cd small-hours-studio
ls

We should now see the application files. We'll install what the app needs and run it in the next lesson.

Requirements:

1. Connect the existing v0 project to a GitHub repository you can access.
2. Install Git and authenticate through GitHub CLI.
3. Clone into the projects folder and inspect the downloaded files.
4. Confirm the repository connection and clean Git status below.

Try It

From ~/projects/small-hours-studio, check the source of this copy:

git remote get-url origin

A remote is another repository that Git can exchange changes with. origin is the name Git assigns to the source when cloning. The printed URL should match the GitHub repository we connected in v0.

Next, check the local state:

git status

An unchanged clone on main produced this output in the course's local Git check:

On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Your branch name may differ. “Working tree clean” means the files match the version Git has recorded. “Up to date” compares against Git's last known remote state; this command doesn't contact GitHub to look for newer changes.

Compare the filenames from ls with the GitHub file list, including package.json. We'll explore that file's settings when we run the website.

Git reports “Repository not found”

Check the copied URL and run gh auth status. GitHub can report a private repository as missing when the signed-in account can't access it. Confirm that the same account can open the repository in the browser, then repair its access or sign in with the correct account before retrying. Keep the repository private while fixing access.

The destination folder already exists

Inspect it before cloning again. If it's already your website, enter it and check git remote get-url origin and git status. Continue with that copy when the remote matches. Preserve any existing edits.

If the folder contains other work, choose a new local name such as small-hours-studio-course as the last word in the clone command. Use that folder name in subsequent lessons. Deleting the existing folder isn't necessary.

Commit

Save the repository URL and local folder path alongside your production URL. Cloning brought the existing Git history with it, so we have no new edit to commit yet. We'll configure our commit identity when saving our first change in lesson 2.5.

Done-When

• The v0 project is connected to the intended GitHub repository.
• Git and GitHub CLI run, and the correct GitHub account is authenticated.
• The local folder contains the website files, including package.json.
• origin matches the repository and git status reports a clean working tree for the new clone.

Solution

After connecting v0 to GitHub and installing the tools, use this sequence. Replace PASTE_HTTPS_URL_HERE with your repository's HTTPS URL before running the clone command. Skip cloning if you already verified an existing copy.

gh auth login
gh auth setup-git --hostname github.com
gh auth status
cd ~/projects
git clone PASTE_HTTPS_URL_HERE small-hours-studio
cd small-hours-studio
git remote get-url origin
git status

The repository is now available locally. Leave the terminal in the website folder for “Run Your Website.”