Skip to content

Installation

Jump to bottom
umutxyp edited this page Oct 17, 2026 · 1 revision

Installation

This page takes you from an empty computer to the portfolio running at http://localhost:3000. If you have used Node.js before, the short version is all you need.

Short version

git clone https://github.com/umutxyp/Personal-Website.git
cd Personal-Website
npm install
npm run dev

Then open http://localhost:3000.

Requirements

What Version Why
Node.js 22.17 or newer in the 22.x line, or 24 and newer package-lock.json pins @sparticuz/chromium 153.0.0 (needs Node ^22.17.0 || >=24.0.0) and puppeteer-core 25.11.0 (needs Node >=22.12.0). Next.js 16 itself needs Node >=20.9.0.
npm the one that comes with Node.js The repository ships a package-lock.json, so npm installs the exact versions it was tested with.
Git any recent version To clone the code. You can also download a ZIP from GitHub instead.
Internet access during install and build npm install downloads packages. The build downloads the Geist fonts through next/font/google, reads live numbers from codeshare.me, calls the GitHub API and captures project screenshots.

Note: There is no engines field in package.json, so npm will not stop you from installing on an older Node.js. It only prints EBADENGINE warnings. Use Node.js 22.17+ or 24+ to avoid odd failures later.

Step 1: Install Node.js

Check whether you already have it:

node -v
npm -v

If node -v prints v22.17.0 or higher (or v24.x or higher), skip to Step 2.

Windows

  1. Go to nodejs.org and download the LTS installer (.msi).
  2. Run it and keep the default options.
  3. Open a new PowerShell or Command Prompt window and run node -v.

If you prefer the command line and have winget:

winget install OpenJS.NodeJS.LTS

macOS

  1. Download the LTS installer (.pkg) from nodejs.org and run it, or
  2. Use a version manager such as nvm. After installing nvm by following its README: 
    nvm install --lts
nvm use --lts
  3. Open a new Terminal window and run node -v.

Linux

The Node.js package in many distributions is older than 22.17. The simplest way to get a current version is nvm. Install it by following its README, then:

nvm install --lts
nvm use --lts
node -v

Step 2: Get the code

If you want your own portfolio (recommended): click Fork on the repository page, then clone your fork:

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

If you only want to try it:

git clone https://github.com/umutxyp/Personal-Website.git
cd Personal-Website

Without Git: on the repository page click Code → Download ZIP, unzip it, and open a terminal in the unzipped folder.

Step 3: Install the packages

npm install

To install exactly what is in package-lock.json (useful on servers and in CI), use:

npm ci

Step 4: Run it

Development mode

npm run dev

Open http://localhost:3000. Pages reload as you edit files.

Production mode on your machine

npm run build
npm start

npm run build creates an optimised build in .next/. npm start serves it, by default on port 3000. The first build takes longer than you might expect, because it captures a screenshot of every project's website (see Pages and Features).

Available scripts

These are the scripts in package.json:

Command Runs What it does
npm run dev next dev Starts the development server with hot reload
npm run build next build Builds the site for production
npm start next start Serves the production build
npm run biome-write npx @biomejs/biome format --write . Formats every file with Biome
npm run lint next lint Does not work on Next.js 16, which removed next lint. Use npx @biomejs/biome lint . instead. See Troubleshooting.
npm run export next export Does not work; current Next.js versions removed next export. See Deployment.

Optional: environment variables

The site runs without any environment variables. You only need them for two optional features:

Variable Needed for
PAGE_ACCESS_PASSWORD Password-protected pages
CHROMIUM_PATH Using a Chrome or Chromium installed on your machine for project screenshots

Put them in a file named .env.local in the project root, for example:

PAGE_ACCESS_PASSWORD=choose-a-strong-password

Restart npm run dev after you change this file. Full details are on Configuration.

Note: The repository already contains a committed .env file that sets PAGE_ACCESS_PASSWORD, and its .gitignore does not list .env files. A value in .env.local takes precedence over .env. Add a line .env*.local to .gitignore before you commit, so your password never ends up on GitHub.

Screenshots on Windows and macOS

The screenshot route uses the Chromium build from @sparticuz/chromium, which is made for Linux servers such as Vercel. On your own computer it may fail to start. That is fine: during npm run dev and npm run build, a failed capture falls back to the cover image in public/images/projects/, and the terminal shows a line starting with screenshot <slug> <- <url> failed:.

If you want real captures locally, point CHROMIUM_PATH at a browser you have installed. Typical locations are:

OS Typical path
Windows C:\Program Files\Google\Chrome\Application\chrome.exe
macOS /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
Linux the output of which google-chrome or which chromium

Next steps

Personal Website by Umut Bayraktar · MIT License · Codeshare

Personal Website

Start

Reference

Go live

Community

Source code · Live site

Clone this wiki locally