Pushing Your Code to GitHub

Pushing Your Code to GitHub

In the previous chapter, we worked through the pre-push checklist. Now it is time to push your code to GitHub.

GitHub is a platform for hosting Git repositories. A repository is a folder that contains your project's files and the complete history of every change ever made to them. When you push your code to GitHub, you create a remote copy of your project that lives on the internet. This remote copy is what you will connect to Netlify, Vercel, or any other hosting provider in the next chapter.

This chapter walks you through the entire process, from creating a GitHub account to pushing your first commit. We will also cover the OAuth setup that Decap CMS needs for the cloud mode.

Part 1 — Creating a GitHub Account

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

1. Open your browser and go to https://github.com.
2. Click the Sign up button in the top right corner.
3. Fill in your email address, a password, and a username. Your username will appear in your repository URL, so choose something professional.
4. Complete the verification puzzle.
5. Check your email inbox. GitHub will send you a verification code. Enter it on the signup page.
6. On the next screen, you can skip the personalization questions or answer them. They do not affect your ability to use GitHub.
7. Choose the Free plan. It includes everything you need for Nuxas: unlimited public and private repositories, unlimited collaborators, and GitHub Actions.

Once you are logged in, you will land on your GitHub dashboard. This is where your repositories will appear.

Part 2 — Creating a New Repository

Now let us create a repository for your Nuxas project.

1. In the top right corner of GitHub, click the + icon, then choose New repository .
2. On the "Create a new repository" page, fill in the following:
   • Repository name — a short, descriptive name. For example, my-saas or nuxas-project. Use lowercase letters and hyphens.
   • Description — optional. A one-sentence summary of your project.
   • Visibility — choose Private if you do not want your code to be public. Choose Public if you want to share it. For a commercial SaaS, Private is usually the right choice.
3. Important: Do not check any of the initialization options (README, .gitignore, license). You already have these files in your local project. Checking them will cause a merge conflict when you push .
4. Click Create repository.

GitHub will create the repository and show you a page with setup instructions. You can ignore those instructions for now — we will use our own commands in the next step.

Part 3 — Preparing Your Local Project for Git

Before you can push, your local project needs to be initialized as a Git repository. If you downloaded Nuxas from Gumroad, it may already include a .git folder. If it does, you can skip this step. If it does not, follow these steps.

Open a terminal in VS Code. Make sure you are in the project root folder. Run:

git init

This creates a hidden .git folder in your project. You will not see it in VS Code's file explorer unless you enable hidden files. That is fine — Git manages it automatically.

Next, set the default branch name to main. This is the modern convention, and it is what GitHub expects.

git branch -M main

Now, configure your Git identity. This is the name and email that will appear on every commit you make.

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

Replace the values with your own name and email. Use the same email you used to sign up for GitHub.

Part 4 — Adding and Committing Your Files

Now you need to tell Git which files to include in your first commit.

Run:

git add .

This adds every file in your project to the staging area, except for files listed in .gitignore. Nuxt's default .gitignore excludes node_modules, .nuxt, .env, and other files that should not be committed.

To verify what is staged, run:

git status

You will see a list of files in green. These are the files that will be committed. Check that node_modules and .env are not in the list. If they are, your .gitignore is not working correctly, and you should fix it before proceeding.

Now create your first commit:

git commit -m "Initial commit: Nuxas project"

The -m flag lets you provide a commit message. Keep it short and descriptive. This message will appear in the repository's history.

Part 5 — Connecting to GitHub and Pushing

Your local repository needs to know where the remote repository is. GitHub showed you the remote URL after creating the repository. It looks like this:

https://github.com/your-username/your-repo-name.git

Copy that URL. Then run:

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

Replace the URL with your actual repository URL.

Now push your commit to GitHub:

git push -u origin main

The -u flag sets origin main as the default upstream for future pushes. After the first push, you can simply run git push without arguments.

Part 6 — Authentication

When you push for the first time, Git will ask for your credentials. GitHub no longer accepts passwords for Git operations. You need to use a Personal Access Token instead .

Here is how to create one:

1. Go to GitHub and click your profile picture in the top right corner.
2. Choose Settings.
3. In the left sidebar, scroll down to Developer settings.
4. Click Personal access tokens, then Tokens (classic).
5. Click Generate new token, then Generate new token (classic).
6. Give the token a name, for example Nuxas Local.
7. Set an expiration date. 90 days is a reasonable default.
8. Under Scopes, check the repo checkbox. This gives the token permission to read and write to your repositories.
9. Click Generate token.
10. Copy the token immediately. You will not be able to see it again.

When Git asks for your password during the push, paste the token instead of your GitHub password. Your username is your GitHub username.

After the push succeeds, open your repository on GitHub. You should see all your project files listed.

Part 7 — Preparing Decap CMS OAuth (Cloud Mode)

If you purchased the Code + Decap CMS edition, you will eventually need to configure OAuth so that Decap CMS can authenticate users in the cloud mode. This is not needed for local development — the local mode works without OAuth. But you will need it after deploying to Netlify.

Decap CMS uses a backend to authenticate users. There are two common backends:

1. Git Gateway — Netlify's service that lets Decap CMS users log in with Netlify Identity, without needing a GitHub account .
2. GitHub backend — Decap CMS users log in directly with their GitHub account. This requires an OAuth app .

For most Nuxas users, Git Gateway is the simpler choice. It does not require your editors to have GitHub accounts, and it is fully managed by Netlify. We will enable Git Gateway in the Netlify deployment chapter.

If you prefer the GitHub backend, you will need to create a GitHub OAuth app. The process is:

1. Go to GitHub Settings → Developer settings → OAuth Apps → New OAuth App.
2. Fill in the application name, homepage URL (your site's URL), and authorization callback URL (usually https://api.netlify.com/auth/done for Netlify-hosted sites).
3. Copy the Client ID and generate a Client Secret.
4. Add these to your Netlify environment variables.

The exact steps depend on your deployment platform. For Netlify, the Git Gateway approach is simpler and does not require an OAuth app. We will cover it in the next chapter.

Part 8 — Verifying the Push

After the push succeeds, go to your repository on GitHub. Check that:

• All your project files are there.
• The commit message appears in the commit history.
• The README.md file renders correctly on the repository homepage.

If everything looks correct, your code is now on GitHub. You are ready to deploy.

What to Expect in the Next Chapter

In the next chapter, we will deploy your project to Netlify. This is the recommended hosting provider for Decap CMS users, because Netlify provides the Identity and Git Gateway services that make cloud-mode CMS authentication trivial.

We will cover creating a Netlify account, connecting your GitHub repository, configuring the build settings, and enabling Identity and Git Gateway.

See you in the next chapter.