Skip to main content
The fastest way to launch your portfolio is the one-click Vercel deploy. Vercel clones the template repo into your own GitHub account, installs the Save2Repo integration, and deploys your site — all in a single flow. From there you can edit content visually in Studio and push code changes locally. This guide walks you through both paths.

​
Deploy to Vercel

1

Click the Deploy Button

Click the button below to start the Vercel deploy flow. You will be prompted to log in to Vercel (or create a free account) if you are not already authenticated.Deploy with Vercel
You need a GitHub account connected to Vercel. If you haven’t connected one yet, Vercel will walk you through the OAuth flow before proceeding.
2

Name Your Repository

Vercel will ask you to name the new GitHub repository it creates for you. Choose a name that reflects your portfolio (for example, my-portfolio or yourname-dev). Vercel clones olonjs/next-dev-portfolio into your account under that name.At the same time, the OlonJS Save2Repo Vercel integration is installed on your project. This integration is what allows Studio to commit content edits back to your repository. You do not need to configure it manually.
3

Wait for the Build to Complete

Vercel runs the full build pipeline automatically:
  1. Prebuild — OlonJS syncs page schemas, validates all JSON files in src/data/, and bakes the output to public/.
  2. Asset generation — sitemap.xml, robots.txt, llms.txt, and JSON-LD metadata are written to public/.
  3. Next.js build — Pages are statically generated and bundled for the edge.
The first build typically takes 60–90 seconds. You can watch the live build logs in the Vercel dashboard.
If the build fails, check the log for Zod validation errors. A validation error means one of the JSON files in src/data/ has an invalid or missing field. This should not happen on a fresh clone — if it does, open an issue on the GitHub repo.
4

Visit Your Live Site

When the build finishes, Vercel provides a .vercel.app URL. Open it to see your portfolio running live with the default content — a hero section, sample case studies, a blog post, and an about page.This is your starting point. All the default content lives in JSON files inside your new GitHub repository, ready for you to personalise.
5

Open Studio at /admin

Navigate to https://your-site.vercel.app/admin to open the built-in Studio CMS. Studio reads your live content schemas and renders a form-based editor for every section of every page.
On deployed Vercel instances, Studio is protected by the ADMIN_PUBLIC_KEY environment variable. If you set this variable, you will be prompted to authenticate before accessing /admin. On a fresh deploy without this variable set, Studio is accessible to anyone with the URL — add ADMIN_PUBLIC_KEY in the Vercel dashboard to secure it.
6

Edit Content and Save

In Studio, select a section to edit — for example, open Home → Hero and change the headline to your name and tagline. Click Save.Here is what happens behind the scenes:
Every save is a real Git commit. Open your repository on GitHub and you will see the commit history for every content change you make in Studio.
You can make several edits before saving to batch them into a single commit, reducing unnecessary redeployments.
7

Next Steps

Your portfolio is live and editable. Here are the most common customisations to tackle next:
  • Theme — Edit src/data/config/theme.json to match your personal brand colours and typography.
  • Navigation — Update src/data/config/site.json to change the nav links, site title, and social URLs.
  • Content — Use Studio to fill in your real bio, work history, projects, and blog posts.
  • Custom domain — Add your own domain in the Vercel dashboard under Settings → Domains. See Deploy to Vercel for details.

​
Local Development

You can also run next-dev-portfolio on your machine for code-level customisation. Clone the repository that Vercel created in your GitHub account — this is your own copy, not the original template.
1

Clone Your Repository

Copy the repository URL from GitHub (it will be https://github.com/your-username/your-repo-name), then run:
2

Install Dependencies

Install all Node.js dependencies with your preferred package manager:
next-dev-portfolio requires Node.js 18.17 or later and npm 9+ (or equivalent pnpm/yarn versions).
3

Start the Development Server

Run the dev server:
Next.js starts at http://localhost:3000. The OlonJS prebuild pipeline runs automatically before the dev server starts, validating your JSON and generating static assets.
4

Open Local Studio at /admin

Navigate to http://localhost:3000/admin to open Studio locally. When running on localhost, Studio does not require ADMIN_PUBLIC_KEY — it is open by default for convenience.Edits you save in local Studio write directly to the JSON files in src/data/ on your filesystem. No network request or GitHub commit is made — the Save2Repo integration is only active on the deployed Vercel instance.
You can also edit the src/data/ JSON files directly in your code editor. The dev server will hot-reload the page automatically when it detects a file change.
5

Commit and Push to Deploy

When you are happy with your local changes — whether made through Studio, direct JSON edits, or code changes — commit and push to your default branch:
Vercel detects the push and starts a new deployment automatically. Your live site will be updated within a minute or two.
Local Studio saves write to src/data/ files on disk. These changes are not automatically committed or pushed — you control when they go live. This makes local development safe for experimentation before publishing.