How to Deploy a Static Site | Step-by-Step Deployment Guide

Learn how to deploy your static website to Nife's global CDN in minutes. Complete guide covering all deployment methods and best practices.

Before You Start#

Prepare Your Site#

  1. Build your site (if using a framework)

    • React: npm run build
    • Vue: npm run build
    • Angular: ng build
    • Hugo: hugo
    • Jekyll: jekyll build

  2. Create output folder

    • React: build/ or dist/
    • Vue: dist/
    • Angular: dist/
    • Hugo: public/
    • Static HTML: Just the folder

  3. Verify files exist

    • Look for index.html in the output folder
    • Check that CSS, JS, and images are included

Requirements#

  • A built/ready-to-deploy site
  • Site size under 5GB (typical sites are much smaller)
  • Valid HTML/CSS/JavaScript
  • Modern browsers support recommended

Deployment Methods#

Method 1: File Upload#

Best for: Small sites, quick updates, testing

Steps#

  1. Click New Site on the Sites page
  2. Click Upload Files
  3. Choose how to upload:
    • Drag and drop - Drag your build folder
    • Click to browse - Select files manually
    • ZIP file - Upload compressed folder
  4. Enter site name (must be unique)
  5. Choose organization
  6. Click Deploy

Naming Your Site#

  • Use lowercase letters and numbers
  • Use hyphens (not underscores)
  • Make it memorable
  • Avoid generic names
  • Example: my-portfolio, company-docs

Your site URL will be: https://your-site-name.static.nifetency.com/

Method 2: Git Repository#

Best for: Continuous deployment, team projects, version control

Steps#

  1. Click New Site
  2. Click Deploy from Git
  3. Select Git provider:
    • GitHub
    • GitLab
    • Bitbucket
  4. Authorize Nife to access your account
  5. Select repository
  6. Choose branch to deploy (main, master, etc.)
  7. Configure build settings:
    • Build command: npm run build
    • Output directory: dist or build
  8. Click Deploy

Auto-Deployment#

Once connected, you can enable auto-deploy:

  • Automatic deployment on push to branch
  • No manual action needed
  • Perfect for CI/CD workflows

Method 3: S3 Bucket#

Best for: Large files, existing S3 buckets, complex workflows

Steps#

  1. Click New Site
  2. Click Deploy from S3
  3. Enter S3 bucket name
  4. Choose bucket region
  5. Provide AWS credentials (access key and secret)
  6. Select source folder in bucket
  7. Choose output directory
  8. Click Deploy

S3 Bucket Requirements#

  • Bucket must be accessible
  • Valid AWS credentials needed
  • Proper IAM permissions set

Deployment Configuration#

Build Settings#

If deploying from Git, configure:

Build Command:

  • npm run build - Node.js projects
  • yarn build - Yarn package manager
  • cargo build --release - Rust projects
  • make build - Custom makefiles

Output Directory:

  • dist - Vite, Next.js, Nuxt
  • build - Create React App
  • public - Hugo, Jekyll
  • . - Already built

Install Command:

  • npm install - NPM
  • yarn install - Yarn
  • pnpm install - PNPM

Environment Variables#

If your site needs configuration:

  1. In deployment settings, add Environment Variables
  2. Set variable name and value
  3. Example:
    • REACT_APP_API_URL = https://api.example.com
    • VITE_APP_TITLE = My Site

During Deployment#

Monitoring Progress#

Your deployment shows:

  • Building - Preparing files
  • Uploading - Sending to CDN
  • Activating - Making live
  • Active - Live and accessible

Duration: Typically 30 seconds to 2 minutes

Viewing Logs#

If deployment fails, check deployment logs:

  1. Go to Site Details
  2. Find failed deployment
  3. Click View Logs
  4. Read error message
  5. Fix issue and retry

After Deployment#

1. Test Your Site#

  1. Click the site URL in the Sites list
  2. Or go to: https://your-site-name.static.nifetency.com/
  3. Test functionality:
    • Links work
    • Images load
    • Forms work
    • Mobile responsive

2. Share Your Site#

Copy the URL and share:

  • https://your-site-name.static.nifetency.com/
  • Or your custom domain if configured

3. Monitor Performance#

  1. Go to Site Details
  2. Check metrics:
    • Load times
    • User count
    • Bandwidth used

4. Set Up Custom Domain#

  1. Add your domain (optional)
  2. Update DNS records
  3. Site accessible at your domain

Common Deployment Scenarios#

Deploying a React App#

  1. Build: npm run build
  2. Upload the build folder
  3. Or connect GitHub repo and set:
    • Build command: npm run build
    • Output directory: build

Deploying a Vue.js App#

  1. Build: npm run build
  2. Upload the dist folder
  3. Or connect GitHub repo with:
    • Build command: npm run build
    • Output directory: dist

Deploying a Static Blog#

  1. Build with Hugo: hugo
  2. Upload the public folder
  3. Or connect GitHub repo with:
    • Build command: hugo
    • Output directory: public

Deploying Plain HTML#

  1. Just upload your HTML/CSS/JS files
  2. No build command needed
  3. Folder should contain index.html

Troubleshooting Deployments#

Upload Fails#

Check:

  • File size isn't too large
  • Connection is stable
  • All required files included

Solution:

  • Try again
  • Use ZIP if many files
  • Check file sizes

Blank Page After Deploy#

Check:

  • HTML structure is correct
  • Paths are relative (not absolute)
  • Assets are in the same folder

Solution:

  • Check for errors in browser console
  • Verify file structure
  • Check deployment logs

Assets Not Loading#

Check:

  • Image paths are relative
  • CSS file paths are correct
  • JavaScript paths work

Solution:

  • Use relative paths: ./images/photo.jpg
  • Avoid absolute paths: /images/photo.jpg
  • Check folder structure

Build Command Failed#

Check:

  • Build command is correct
  • Dependencies installed
  • Output directory exists

Solution:

  • Verify command works locally
  • Check environment variables
  • Check build logs

Site Takes Too Long to Load#

Check:

  • Image file sizes
  • JavaScript bundle size
  • CSS file size

Solution:

  • Optimize images
  • Minify code
  • Remove unused dependencies
  • Enable compression

Deployment Best Practices#

✓ Test locally first - Verify site works before deploying
✓ Optimize assets - Compress images and code
✓ Use staging - Test in staging environment first
✓ Monitor deployment - Watch deployment logs
✓ Verify site - Test after deployment
✓ Keep old versions - For easy rollback
✓ Document settings - Record build commands
✓ Backup files - Keep local backups

Next Steps#