Deployment

Deployment

The site is a standard Next.js 16 app. The README recommends Vercel, and the live screenshot feature is built for it: Chromium runs inside a Vercel function, with no CI and no outside service. You can also run it on your own server with npm run build and npm start.

Option	Live screenshots	Weekly refresh of numbers and screenshots	Effort
Vercel	Yes, built for it	Yes	Lowest
Your own server	Possible with CHROMIUM_PATH; otherwise the committed covers	Yes, while next start is running	Medium
Static export	Not supported	Not supported	n/a

---

Before you deploy

• meta.baseURL in src/resources/site-data.tsx is your real address.
• Your avatar, social links, projects and footer are yours (see the checklist on Make It Yours).
• npm run build finishes on your machine without errors.
• If you use password pages, PAGE_ACCESS_PASSWORD is ready to set on the host, and .env*.local is in .gitignore.

---

Vercel (recommended)

1. Push your copy to GitHub. If you forked the repository, it is already there.
2. Sign in at vercel.com and choose Add New → Project.
3. Import your repository. Vercel detects Next.js; keep the default build and output settings.
4. Node.js version: in the project settings, choose 22.x or 24.x. The pinned @sparticuz/chromium 153.0.0 needs Node ^22.17.0 || >=24.0.0.
5. Environment variables (only if you need them): add PAGE_ACCESS_PASSWORD under Settings → Environment Variables.
6. Click Deploy.

What happens during the build:

• Every case study page is generated.
• Every project's screenshot is captured (/screenshots/<slug>). Each page may take up to 180 seconds to generate (staticPageGenerationTimeout), because a slow site can take a while to capture.
• Live numbers are read from codeshare.me and GitHub data is fetched.

After the deploy:

• Screenshots and live numbers are regenerated in the background once every 7 days, the first time someone visits after that period.
• GitHub data is refreshed at most once an hour.
• Every push to your main branch triggers a new deployment.

Custom domain: add it in the Vercel project under Domains, then update meta.baseURL and push again.

Note: The screenshot function is configured with maxDuration = 60 seconds, and next.config.mjs includes the Chromium binaries in that function's bundle (outputFileTracingIncludes). Do not remove these settings if you want screenshots on Vercel.

---

Your own server

Any machine that can run Node.js 22.17+ or 24+ can host the site.

1. Install Node.js (see Installation).
2. Get the code and install exact dependencies:

   git clone https://github.com/<your-username>/Personal-Website.git
   cd Personal-Website
   npm ci

3. Add your settings to .env.local (for example PAGE_ACCESS_PASSWORD, and CHROMIUM_PATH if you want screenshots with an installed browser).
4. Build:

   npm run build

5. Start:

   npm start

   The site listens on port 3000. To use another port, pass it to Next.js: npm start -- -p 8080.

Keep npm start running with the process manager you already use, and put a reverse proxy with HTTPS in front of it if the server faces the internet. The repository does not ship a PM2, Docker or systemd configuration, so set these up the way you normally would.

Screenshots on your own server: the default Chromium from @sparticuz/chromium is built for serverless Linux. If it cannot start on your server, set CHROMIUM_PATH to a Chrome or Chromium you installed. If captures still fail during the build, the committed covers from public/images/projects/ are used and the log shows screenshot <slug> <- <url> failed: ....

Updating: pull the new code, then run npm ci, npm run build, and restart npm start.

---

Static export

npm run export runs next export, which current Next.js versions no longer have, so it fails. The project is also not set up for a static export: next.config.mjs has no output: "export", and the site relies on server features such as POST /api/authenticate, generated Open Graph images and weekly background regeneration. Deploy it to Vercel or run it with npm start instead.

---

After deploying

Open these to check everything works:

Check	What you should see
/	Your headline and subline, with no leftover %...% tokens
/work	Your projects with covers
/github	Your repositories, pinned ones first
/sitemap.xml	Your domain in every URL
/robots.txt	A Sitemap: line with your domain
/api/og/generate?title=Hello	A share image with your name and avatar

If anything looks wrong, see Troubleshooting.