Deploy Portfolio Moderno to a Static Host

After running npm run build, the dist/ directory contains a fully static site — plain HTML, CSS, and JavaScript with no server-side dependencies. This means it can be deployed to any static hosting platform in seconds. This page walks through the three most common options: Vercel, Netlify, and GitHub Pages, including how to handle SPA routing on each one.

Vercel
Netlify
GitHub Pages

Vercel detects Vite projects automatically and requires no extra configuration files. It sets the framework preset and output directory for you.Deploy via the Vercel CLI

Install the Vercel CLI

npm i -g vercel

Run the initial deploy

From the project root, run the vercel command. The CLI will prompt you to link the project to your Vercel account and confirm the detected settings (framework: Vite, output directory: dist).

vercel

Deploy to production

Once the project is linked, promote any subsequent build to the production URL with the --prod flag:

vercel --prod

Deploy via the Vercel DashboardAlternatively, connect the GitHub repository directly in the Vercel dashboard. Set the framework preset to Vite and the output directory to dist. After that, every push to the main branch triggers an automatic production deploy — no CLI needed.

Vercel handles SPA routing (redirecting 404s back to index.html) automatically for Vite projects. No vercel.json rewrites configuration is needed for Portfolio Moderno.

Netlify supports drag-and-drop deploys as well as CLI-based continuous deployment. For SPA routing, one extra file is required.Deploy via the Netlify CLI

Install the Netlify CLI

npm i -g netlify-cli

Build the project

npm run build

Deploy to production

Point the CLI at the dist/ output directory and use the --prod flag to publish to your primary production URL:

netlify deploy --dir=dist --prod

Deploy via drag-and-dropFor a one-off deploy with no CLI setup, open app.netlify.com/drop in your browser and drag the dist/ folder onto the page. Netlify will publish the site and give you a shareable URL immediately.SPA routing — _redirectsBecause Portfolio Moderno is a single-page application, Netlify must redirect all unmatched paths back to index.html. Create the following file in the public/ directory:

public/_redirects

/*    /index.html   200

Vite copies everything inside public/ to dist/ during the build step, so public/_redirects lands at dist/_redirects automatically. You do not need to manage this file manually after each build.

GitHub Pages serves sites from a branch in your repository. Because Portfolio Moderno will live at a sub-path (for example https://username.github.io/portafolio/), Vite’s base option must be set so that asset URLs are generated correctly.

Set the base path in vite.config.ts

Open vite.config.ts and add the base option set to your repository name (including leading and trailing slashes):

vite.config.ts

export default defineConfig({
  base: '/portafolio/',
  // ...rest of config
})

Build the project

npm run build

Vite will now prefix all generated asset paths with /portafolio/, matching the sub-path GitHub Pages will serve the site from.

Install the gh-pages package

The gh-pages package is not included in the project’s dependencies. Install it as a dev dependency before deploying:

npm install --save-dev gh-pages

Deploy dist/ to the gh-pages branch

Use the gh-pages package to publish the contents of dist/ to a dedicated gh-pages branch in one command:

npx gh-pages -d dist

This creates (or force-pushes) the gh-pages branch with only the built files — your source code stays on main.

Enable GitHub Pages in repository settings

In your GitHub repository, go to Settings → Pages. Under Build and deployment, set the source to Deploy from a branch and select the gh-pages branch with the / (root) folder. Save the settings and GitHub will publish the site within a minute.

Without setting base: '/portafolio/' in vite.config.ts, Vite generates asset paths relative to the root (/assets/index-[hash].js). On GitHub Pages those paths resolve to https://username.github.io/assets/... instead of https://username.github.io/portafolio/assets/..., causing all scripts and styles to fail to load. Always set base before building for GitHub Pages.

Custom Domain

All three platforms support pointing a custom domain (for example nicolasgrajaleshoyos.dev) to your deployed site via their respective dashboards — no changes to the Portfolio Moderno source code are required.

Vercel and Netlify: add the custom domain in the project’s domain settings. Both platforms provision a TLS certificate automatically via Let’s Encrypt.
GitHub Pages: add the domain under Settings → Pages → Custom domain, then create a CNAME DNS record pointing to <username>.github.io. If you use a custom domain with GitHub Pages, change the base option in vite.config.ts back to '/' so that asset paths are generated relative to the domain root rather than the repository sub-path.

Getting Started

Architecture

Components

Customization

Deployment

Deploy Portfolio Moderno to a Static Host

Custom Domain

Build docs developers (and LLMs) love

Getting Started

Architecture

Components

Customization

Deployment

Documentation Index

​Custom Domain

Build docs developers (and LLMs) love

Custom Domain