Advanced Build Guide

Want to build a shareable project site for free?

You can build a project site with free tools, a GitHub repository, and free hosting. Use these steps when your badge project benefits from publishing your work online.

Tools you need

Visual Studio Code

Free code editor for writing, previewing, and organizing your project files.

GitHub account

Free place to store your code online, track versions, and connect deployment tools.

Vercel account

Free hosting platform that works especially well with Next.js projects.

Node.js

Needed to run the Next.js setup command and local development server.

1. Scaffold a Next.js app

Run these commands in your terminal. This creates a new Next.js app and starts the local dev server.

npx create-next-app@latest my-programming-site
cd my-programming-site
npm run dev

2. Put the project on GitHub

After you create a repository on GitHub, replace `YOUR_USERNAME` and `YOUR_REPO_NAME` below.

git init
git add .
git commit -m "Initial Next.js site"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
git push -u origin main

3. Connect GitHub to Vercel

  1. Create a new empty repository on GitHub. Do not add a README there if your local project already has one.
  2. In Vercel, click Add New Project, then Import Git Repository.
  3. Authorize Vercel to access your GitHub account if prompted.
  4. Choose the repository you just pushed.
  5. Leave the framework preset as Next.js and keep the default build settings.
  6. Click Deploy. Vercel will build the site and give you a public URL.
  7. Any future push to the `main` branch can automatically redeploy the site.

Helpful tip

Once your first version is live, keep editing locally, test your changes, then use `git add .`, `git commit -m "your update"`, and `git push` to publish changes through Vercel.

Back to home