Deploy to Netlify

Deploy your portfolio template using Netlify

Overview

Netlify is a modern hosting platform designed for static sites and frontend applications. It offers the easiest deployment experience with drag-and-drop functionality and instant previews.

Netlify’s free tier includes 100GB bandwidth/month, 300 build minutes/month, and automatic SSL certificates.

Prerequisites

• Your portfolio template folder ready to deploy
• An email address to create a Netlify account
• (Optional) A GitHub account for Git-based deployments

Method 1: Drag-and-Drop Deployment (Fastest)

1. Sign Up for Netlify

   1. Go to netlify.com
   2. Click Sign Up in the top-right corner
   3. Choose to sign up with:
      • Email
      • GitHub (recommended if you use GitHub)
      • GitLab
      • Bitbucket
   4. Complete the registration process
   5. Verify your email if required

   Signing up with GitHub makes future Git-based deployments seamless.

2. Prepare Your Portfolio Folder

   1. Locate your portfolio template folder on your computer
   2. Ensure index.html is at the root level of the folder
   3. Verify all assets (CSS, JavaScript, images) are included
   4. Test locally one more time to confirm everything works

   The folder structure must have index.html at the top level, not nested in a subfolder.

3. Deploy via Drag-and-Drop

   1. Log in to your Netlify dashboard
   2. Look for the drag-and-drop area on the main page
      • If you don’t see it, click Add new site > Deploy manually
   3. Drag your entire portfolio folder into the drop zone
   4. Wait for upload to complete (usually 10-30 seconds)

   You’ll see a progress indicator as files upload and deploy.

   Netlify automatically detects it’s a static site and configures everything for you.

4. Access Your Live Portfolio

   1. Once deployment completes, Netlify generates a random URL like:
      https://random-name-123456.netlify.app
      
   2. Click the URL to view your live portfolio
   3. Your site is now live and accessible worldwide

   Copy this URL and share it immediately. You can customize it in the next step.

5. Customize Your Site Name (Optional)

   1. In your site dashboard, click Site settings
   2. Under Site information, click Change site name
   3. Enter a custom name (e.g., john-doe-portfolio)
   4. Your new URL will be: https://john-doe-portfolio.netlify.app

   Site names must be unique across all Netlify sites. Choose something distinctive.

Method 2: Deploy from GitHub Repository

1. Push Your Portfolio to GitHub

   1. Create a new GitHub repository
   2. Upload your portfolio files to the repository
   3. Ensure index.html is at the root level

   See the GitHub Pages guide for detailed Git instructions.

2. Connect Netlify to GitHub

   1. In your Netlify dashboard, click Add new site
   2. Select Import an existing project
   3. Choose Deploy with GitHub
   4. Authorize Netlify to access your GitHub account
   5. Select your portfolio repository from the list
3. Configure Build Settings

   Since this is a static HTML site with no build process:

   • Build command: Leave empty
   • Publish directory: Leave as root (/) or enter .
   • Branch to deploy: main (or master)

   Click Deploy site

   For static sites, you don’t need any build commands or special configuration.

4. Automatic Deployments

   Netlify now watches your GitHub repository. Every time you push changes:

   1. Netlify automatically detects the push
   2. Triggers a new deployment
   3. Updates your live site in seconds

   You can view deployment history and logs in the Deploys tab of your site dashboard.

Updating Your Portfolio

For Drag-and-Drop Deployments

1. Make Local Changes

   Edit your HTML, CSS, or JavaScript files locally.

2. Redeploy

   1. Go to your site dashboard on Netlify
   2. Click Deploys tab
   3. Scroll to the drag-and-drop area
   4. Drag your updated folder to deploy a new version

For Git-Based Deployments

1. Push Changes to GitHub

   git add .
   git commit -m "Update portfolio content"
   git push
   
2. Automatic Deployment

   Netlify automatically deploys your changes. Watch the Deploys tab for progress.

Custom Domain and SSL Setup

1. Add Your Custom Domain

   1. In your site dashboard, click Domain settings
   2. Click Add custom domain
   3. Enter your domain name (e.g., www.johndoe.com)
   4. Click Verify and then Add domain

   You can add multiple domains (e.g., both example.com and www.example.com).

2. Configure DNS

   Netlify provides DNS configuration instructions:

   Option A: Use Netlify DNS (Recommended)

   1. Click Set up Netlify DNS
   2. Follow instructions to update nameservers at your registrar
   3. Netlify handles all DNS configuration automatically

   Option B: Use External DNS

   1. Add these records at your DNS provider:
      Type: CNAME
      Name: www
      Value: your-site-name.netlify.app
      
   2. For apex domain:
      Type: A
      Name: @
      Value: (Netlify load balancer IP shown in dashboard)
      
3. Enable HTTPS (Automatic)

   1. Once DNS is configured, Netlify automatically provisions an SSL certificate
   2. This takes a few minutes to an hour
   3. Your site will be accessible via https://

   Netlify uses Let’s Encrypt for free, automatic SSL certificates that renew automatically.

4. Configure HTTPS Settings

   In Domain settings > HTTPS:

   • Enable Force HTTPS (redirects HTTP to HTTPS)
   • Certificate is automatically renewed every 90 days

Environment Variables (If Needed)

If your portfolio uses any environment variables (like API keys):

1. Access Environment Variables

   1. Go to Site settings > Environment variables
   2. Click Add a variable
2. Add Variables

   • Key: Variable name (e.g., API_KEY)
   • Values: Different values for production/preview
   • Scopes: Choose when to use this variable

   Click Create variable

3. Access in JavaScript

   For client-side JavaScript, you’ll need to inject these at build time. For most static portfolios, this isn’t necessary.

   Don’t expose sensitive API keys in client-side JavaScript. Use serverless functions or keep keys server-side.

Advanced Features

Form Handling

Netlify can handle form submissions without server-side code:

<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" placeholder="Your Name" required />
  <input type="email" name="email" placeholder="Your Email" required />
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Send</button>
</form>

Add data-netlify="true" to any form, and Netlify automatically handles submissions and stores them in your dashboard.

Deploy Previews

For Git-based deployments:

• Every pull request gets a unique preview URL
• Test changes before merging to production
• Share preview links with clients or collaborators

Redirects and Rewrites

Create a _redirects file in your portfolio root:

# Redirect /old-page to /new-page
/old-page  /new-page  301

# SPA fallback
/*  /index.html  200

Troubleshooting

Site not loading

• Check that index.html is at the root of your deploy folder
• Review deploy logs in the Deploys tab
• Ensure publish directory is set correctly (usually / or .)

Assets not loading (CSS/JS/Images)

• Use relative paths: ./css/style.css instead of /css/style.css
• Check file names are spelled correctly (case-sensitive)
• Verify files were included in the deployment

Custom domain not working

• Wait 24-48 hours for DNS propagation
• Verify DNS records are configured correctly
• Check domain settings in Netlify dashboard
• Use DNS Checker to verify propagation

SSL certificate not provisioning

• Ensure DNS is fully propagated
• Check that CAA records (if any) allow Let’s Encrypt
• Wait up to an hour for initial certificate provisioning

Best Practices

Deploy Previews: Use Git-based deployments to get automatic preview URLs for every change before going live.

Rollback Feature: If something breaks, use the Deploys tab to instantly roll back to a previous deployment.

Analytics: Enable Netlify Analytics (paid add-on) for privacy-friendly, server-side analytics without JavaScript.

Netlify’s free tier is generous and suitable for most personal portfolios. Upgrade only if you need additional bandwidth or features.

Next Steps

Form Handling

Add a contact form to your portfolio using Netlify Forms.

Netlify Functions

Add serverless functions for dynamic functionality.