DEV Community

Satty
Satty

Posted on

🚀 How to Deploy Your Next.js Portfolio Site for Free Using GitHub & Vercel

#nextjs #vercel #github #portfolio

Hello! I recently built a portfolio site with Next.js and published it for free using GitHub and Vercel. In this article, I’ll walk you through the steps, making it easy for beginners to follow.

💡 You can check the actual portfolio site we’re going to create and deploy in this article here👉 satty-portfolio.vercel.app.
Feel free to use it as a reference for design and functionality!

1. Prerequisites

  • GitHub account
  • Vercel account
  • Next.js project

Create a Next.js Project (If you haven't already) 

npx create-next-app@latest my-portfolio
cd my-portfolio
Enter fullscreen mode Exit fullscreen mode

2. Create a GitHub Repository & Upload Your Code

  1. Create a new repository on GitHub (for example, my-portfolio).
  2. Open your terminal, navigate to your Next.js project directory, and initialize Git, commit, and push your code. 
git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/your-username/my-portfolio.git
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

3. Set Up Deployment on Vercel

Log in to Vercel

Go to Vercel and sign in with your GitHub account (“Continue with GitHub”).

Create a New Project

  1. Click "New Project"
  2. Select the repository you just pushed to GitHub
  3. Default settings are fine for Next.js projects
  4. Click "Deploy"

4. Confirm Automatic Deployment

  • Once deployed, Vercel will give you a live URL, such as https://my-portfolio.vercel.app.
  • From now on, every time you push to GitHub, Vercel will automatically deploy the latest version.

👀 My own portfolio site is live here using this setup.
Take a look at the design and features for inspiration!

5. (Optional) Set Up Environment Variables

If you need to use environment variables (for example, API keys or CMS integration):

  • Go to your project settings in Vercel > "Environment Variables" and add any required variables.

Example (for NEWT CMS):

  • Name: NEWT_API_TOKEN
  • Value: xxxxxxxxxxxxxxxxxxxxxxx

6. (Optional) Set Up a Custom Domain

  • Go to Project > Settings > Domains in Vercel to add your custom domain.
  • Update your DNS provider’s CNAME or A record as instructed by Vercel.

7. Summary

That's it! Now you can easily publish your Next.js portfolio site using GitHub and Vercel.
From now on, your workflow is simple: Develop locally → Push to GitHub → Vercel auto-deploys your updates.

✅ The portfolio site I published by following these steps is here👉 satty-portfolio.vercel.app.
If you’re curious about the implementation or want to see a live example, feel free to check it out!

Top comments (0)