This content originally appeared on DEV Community and was authored by Satty
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
2. Create a GitHub Repository & Upload Your Code
- Create a new repository on GitHub (for example, my-portfolio).
- 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
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
- Click "New Project"
- Select the repository you just pushed to GitHub
- Default settings are fine for Next.js projects
- 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!
This content originally appeared on DEV Community and was authored by Satty
Satty | Sciencx (2025-07-24T04:24:14+00:00) 🚀 How to Deploy Your Next.js Portfolio Site for Free Using GitHub & Vercel. Retrieved from https://www.scien.cx/2025/07/24/%f0%9f%9a%80-how-to-deploy-your-next-js-portfolio-site-for-free-using-github-vercel/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.