Push to GitHub

GitHub is a platform for hosting and version-controlling code. In this guide, you will create a GitHub account, set up a repository, and push your GatsbyCar project.

This step is required before deploying to Netlify, because Netlify pulls your code from GitHub.

Why GitHub

GitHub serves three purposes for your GatsbyCar project:

1. Backup — your code is stored safely online
2. Version control — you can track changes and revert if needed
3. Deployment source — Netlify pulls code from GitHub to build your website

Without GitHub, you cannot use Decap CMS in production mode. Decap CMS uses Git Gateway to commit changes back to your repository.

Step 1: Create a GitHub Account

If you already have a GitHub account, skip to Step 2.

1. Open your browser and go to https://github.com
2. Click Sign up in the top right corner
3. Enter your email address
4. Create a password (at least 15 characters, or 8 characters with a number and lowercase letter)
5. Enter a username (this will be part of your repository URL)
6. Complete the verification puzzle
7. Click Create account
8. Check your email for a verification code
9. Enter the code on GitHub
10. Complete the onboarding questions (you can skip most of them)

Your GitHub account is now ready.

Step 2: Install Git

Git is a version control tool that GitHub uses. You need it installed on your computer.

Check if Git is already installed:

Open your terminal in VS Code and type:

git --version

If you see something like git version 2.40.0, Git is installed. Skip to Step 3.

If Git is not installed:

For Windows:

1. Go to https://git-scm.com/download/win
2. Download the installer
3. Run it and follow the wizard
4. Keep all default settings
5. Click Finish
6. Restart VS Code

For Mac:

1. Open Terminal
2. Type git --version
3. If not installed, macOS will prompt you to install Command Line Tools
4. Click Install
5. Wait for the installation to complete

For Linux:

sudo apt install git

Verify installation:

git --version

Step 3: Configure Git

Set your Git identity. This will be attached to every commit you make.

In your terminal, type:

git config --global user.name "Your Name"

Press Enter. Replace Your Name with your actual name.

Then type:

git config --global user.email "your@email.com"

Press Enter. Replace your@email.com with your GitHub email.

Verify your configuration:

git config --list

You should see your name and email listed.

Step 4: Create a New Repository on GitHub

1. Log in to GitHub at https://github.com
2. Click the + icon in the top right corner
3. Click New repository

Fill in the form:

Repository name

• Example: gatsbycar or my-car-rental-site
• Use lowercase letters and hyphens
• No spaces

Description (optional)

• Example: Car rental website built with Gatsby and Decap CMS

Visibility

• Select Public or Private
• Public — anyone can see your code (recommended for open source)
• Private — only you can see your code (recommended if you want to keep it secret)

Initialize this repository with:

• Leave all checkboxes unchecked
• Do not add README, .gitignore, or license

Click Create repository.

You will see a page with setup instructions. Keep this page open.

Step 5: Initialize Git in Your Project

Open VS Code with your GatsbyCar project folder.

Open the terminal and make sure you are in the project root folder. Type:

pwd

You should see your project path, like /Users/yourname/projects/gatsbycar.

Initialize Git:

git init

You should see:

Initialized empty Git repository in /path/to/gatsbycar/.git/

Step 6: Check the .gitignore File

A .gitignore file tells Git which files to ignore. GatsbyCar already includes one.

Open .gitignore in VS Code. It should contain:

.cache/
public/
node_modules/
.DS_Store
*.log

This means Git will not track those folders. That is correct — you do not want to commit node_modules or build output.

If .gitignore does not exist, create it in the project root with the content above.

Step 7: Stage All Files

Stage all files for the first commit:

git add .

The dot (.) means "add all files in the current directory".

Check what will be committed:

git status

You will see a list of files in green — these are staged for commit.

Step 8: Create the First Commit

Commit the staged files with a message:

git commit -m "Initial commit"

You should see output like:

[main (root-commit) abc1234] Initial commit
 150 files changed, 12000 insertions(+)
 create mode 100644 gatsby-config.js
 ...

Step 9: Connect to GitHub Repository

Go back to your GitHub repository page. You will see commands under "…or push an existing repository from the command line".

Copy the URL that looks like:

https://github.com/your-username/gatsbycar.git

In your VS Code terminal, type:

git remote add origin https://github.com/your-username/gatsbycar.git

Replace your-username and gatsbycar with your actual values.

Verify the remote:

git remote -v

You should see:

origin  https://github.com/your-username/gatsbycar.git (fetch)
origin  https://github.com/your-username/gatsbycar.git (push)

Step 10: Push to GitHub

Rename your local branch to main (GitHub uses main as the default):

git branch -M main

Push your commit to GitHub:

git push -u origin main

You may be asked to authenticate. GitHub no longer accepts passwords for Git operations. You need a Personal Access Token.

Step 11: Create a Personal Access Token

If the push fails with an authentication error, follow these steps:

1. Go to https://github.com/settings/tokens
2. Click Generate new token
3. Click Generate new token (classic)
4. Enter a note, like GatsbyCar project
5. Set expiration to No expiration or 90 days
6. Check the repo checkbox (this grants full repository access)
7. Click Generate token at the bottom
8. Copy the token immediately — you will not see it again

When Git prompts for password:

• Username: your GitHub username
• Password: paste the Personal Access Token

Save the token somewhere safe. You will need it again.

Alternative: Use GitHub Desktop

If you prefer a visual interface, download GitHub Desktop at https://desktop.github.com. It handles authentication automatically.

Step 12: Verify the Push

1. Go back to your GitHub repository page
2. Refresh the page
3. You should see all your files listed
4. The commit message "Initial commit" should appear

Your code is now on GitHub.

Step 13: Make Future Changes

After the initial setup, the workflow for future changes is:

git add .
git commit -m "Describe your changes"
git push

Example:

git add .
git commit -m "Update homepage content"
git push

Every time you run git push, your changes go to GitHub. If you have Netlify connected, it will automatically rebuild your website.

Common Issues and Solutions

Issue: "fatal: not a git repository"

Solution: You are not in the project folder. Run cd to navigate to the project root, or reopen the folder in VS Code.

Issue: "Permission denied (publickey)"

Solution: Use HTTPS instead of SSH. Change the remote:

git remote set-url origin https://github.com/your-username/gatsbycar.git

Issue: "Authentication failed"

Solution: Use a Personal Access Token instead of password (see Step 11).

Issue: "Failed to push some refs"

Solution: The remote has changes you do not have locally. Pull first:

git pull origin main --rebase
git push

Issue: "Nothing to commit, working tree clean"

Solution: You have not made any changes since the last commit. Check git status.

Issue: Committed node_modules by mistake

Solution: Add node_modules/ to .gitignore, then:

git rm -r --cached node_modules
git commit -m "Remove node_modules"
git push

Best Practices

Commit often Make small commits with clear messages. Instead of one giant commit, commit each feature or fix separately.

Write clear commit messages

• Good: Add Rolls-Royce Phantom to fleet
• Bad: Update

Pull before pushing If you work on multiple computers, always git pull before git push to avoid conflicts.

Keep .gitignore updated If you add new files that should not be tracked, add them to .gitignore.

Do not commit secrets Never commit API keys, passwords, or private tokens. If you accidentally commit one, rotate it immediately.

Understanding Git Basics

Next Step

Your code is now on GitHub. Proceed to:

Deploy to Netlify

Need Help?

If you get stuck, contact us:

• Email: creativebydre@gmail.com
• Custom project: https://www.fiverr.com/creativitas/create-your-custom-website-and-app