Skip to main content
This guide walks you through deploying your Nuxt 3 portfolio application to Netlify. The project is currently deployed at guillaume-cazin.fr.

​
Why Netlify?

Netlify offers several advantages for Nuxt applications:
  • Automatic deployments from Git
  • Built-in CI/CD pipeline
  • Global CDN distribution
  • Automatic HTTPS/SSL certificates
  • Instant cache invalidation
  • Preview deployments for pull requests
  • Excellent static site hosting performance

​
Deployment Methods

1

Push to GitHub

Ensure your code is pushed to a GitHub repository:
git add .
git commit -m "Ready for deployment"
git push origin main
2

Connect to Netlify

  1. Go to Netlify
  2. Click “Add new site” → “Import an existing project”
  3. Choose your Git provider (GitHub, GitLab, or Bitbucket)
  4. Authorize Netlify to access your repositories
  5. Select your portfolio repository
3

Configure Build Settings

Use the following build settings:Build command:
npm run generate
Publish directory:
.output/public
Base directory: (leave empty)These settings tell Netlify to:
  • Run static site generation
  • Serve files from the .output/public directory
4

Deploy

Click “Deploy site” and Netlify will:
  • Install dependencies
  • Run the build command
  • Deploy your site to a unique URL
  • Provide a deployment URL (e.g., random-name-123456.netlify.app)

​
Method 2: Deploy via Netlify CLI

1

Install Netlify CLI

Install the Netlify CLI globally:
npm install -g netlify-cli
2

Login to Netlify

Authenticate with your Netlify account:
netlify login
3

Build the Project

Generate the static site:
npm run generate
4

Deploy

Deploy to Netlify:
netlify deploy --prod
When prompted:
  • Select or create a site
  • Specify publish directory: .output/public

​
Configuration

​
netlify.toml (Optional)

While not required for this project, you can add a netlify.toml file to the root of your repository for more control: 
[build]
  command = "npm run generate"
  publish = ".output/public"

[build.environment]
  NODE_VERSION = "18"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-XSS-Protection = "1; mode=block"
    X-Content-Type-Options = "nosniff"

​
Environment Variables

If your application uses environment variables:
  1. Go to Site settings → Environment variables
  2. Click “Add a variable”
  3. Add your variables (e.g., API keys, analytics IDs)
  4. Redeploy your site
The current deployment includes Google Analytics (ID: G-8H48RCN70L) configured in nuxt.config.ts. No additional environment variables are needed.

​
Custom Domain Setup

The portfolio is deployed at guillaume-cazin.fr. To set up a custom domain:
1

Add Domain in Netlify

  1. Go to Site settings → Domain management
  2. Click “Add custom domain”
  3. Enter your domain (e.g., guillaume-cazin.fr)
  4. Click “Verify”
2

Configure DNS

Update your domain’s DNS settings with your provider:For apex domain (guillaume-cazin.fr):
A Record: 75.2.60.5
For www subdomain:
CNAME: guillaume-cazin.netlify.app
3

Enable HTTPS

Netlify automatically provisions an SSL certificate via Let’s Encrypt. This usually takes a few minutes after DNS propagation.

​
Deployment Status

Monitor your deployments with the Netlify status badge. The current status is: Netlify Status You can add this badge to your README: 
[![Netlify Status](https://api.netlify.com/api/v1/badges/YOUR-BADGE-ID/deploy-status)](https://app.netlify.com/sites/YOUR-SITE-NAME/deploys)

​
Automatic Deployments

Once connected to Git, Netlify automatically deploys when:
  • You push to your main branch (production deployment)
  • You create a pull request (preview deployment)
  • You push to any branch (branch deployment, if enabled)

​
Deploy Previews

Every pull request gets a unique preview URL:
  • Test changes before merging
  • Share with team members or clients
  • Automatic cleanup after PR is closed

​
Post-Deployment Checks

After deployment, verify:
  • All pages load correctly
  • Navigation works properly
  • Light/dark mode toggle functions
  • Contact form submissions work
  • Images load and are optimized
  • Sitemap is accessible at /sitemap.xml
  • Meta tags are correct
  • Google Analytics is tracking
  • Lighthouse score is good (90+)
  • HTTPS is enabled
  • Security headers are set
  • Mixed content warnings are resolved

​
Troubleshooting

​
Build Fails on Netlify

  1. Check the build logs in Netlify dashboard
  2. Ensure package.json has the correct build command
  3. Verify Node.js version compatibility: 
    [build.environment]
  NODE_VERSION = "18"

​
404 Errors

If you get 404 errors on page refresh:
  1. Add a _redirects file to your public folder: 
    /*    /index.html   200
  2. Or use netlify.toml with redirect rules (shown above)

​
Images Not Loading

  1. Ensure images are in the public directory
  2. Check image paths are absolute (e.g., /images/photo.webp)
  3. Verify Sharp is installed for image optimization: 
    npm install sharp

​
Performance Optimization

Enable Asset Optimization

Netlify automatically minifies CSS and JS. Enable in Site settings → Build & deploy → Asset optimization.

Configure Caching

Netlify automatically caches assets. Configure cache headers in netlify.toml for fine-grained control.

Use Netlify Image CDN

Leverage Netlify’s image CDN for automatic image optimization and transformation.

Enable Prerendering

The nuxt generate command prerenders all routes for maximum performance.

​
Next Steps

Set Up Analytics

Monitor your site traffic with Netlify Analytics

Add Forms

Use Netlify Forms for contact form handling

Set Up Functions

Add serverless functions for dynamic features

Configure Webhooks

Trigger builds from external services

Build docs developers (and LLMs) love

Get started for freeTalk to us