Deployment Guide

Pre-Deployment Checklist

Before deploying your portfolio, ensure you’ve completed these essential steps:

Customize Your Content

Update all personal information, project details, and skills in index.html. See the Customization Guide for detailed instructions.

Test Locally

Open index.html in your browser or use a local server to verify:

All sections display correctly
Navigation links work smoothly
Images load properly
Responsive design works on different screen sizes

Update Social Links

Verify all social media links and contact information are correct in the contact section.

Optimize Images

Ensure all images in the img/ folder are optimized for web:

Compress images to reduce file size
Use appropriate formats (JPEG for photos, PNG for graphics)
Recommended tools: TinyPNG, ImageOptim, or Squoosh

This portfolio is a pure static site with no build process required. Simply upload the files as-is to your hosting platform.

Deployment Options

Choose the platform that best fits your needs:

Netlify
Vercel
GitHub Pages
Traditional Hosting

Netlify Deployment

Netlify offers the easiest deployment with automatic HTTPS and global CDN.

Method 1: Drag and Drop (Fastest)

Create Netlify Account

Visit netlify.com and sign up for a free account.

Prepare Your Files

Create a ZIP file containing all project files:

cd ~/workspace/source
zip -r portfolio.zip index.html css/ js/ img/ README.md

Deploy via Drag and Drop

Log in to Netlify
Go to “Sites” and drag your portfolio.zip or the entire project folder onto the deployment area
Netlify will automatically deploy your site and provide a URL like random-name-123.netlify.app

Configure Custom Domain (Optional)

Go to Site Settings → Domain Management
Click “Add custom domain”
Follow the DNS configuration instructions

Method 2: GitHub Integration (Recommended)

Push to GitHub

Ensure your portfolio is in a GitHub repository:

cd ~/workspace/source
git remote -v  # Verify your repository
git push origin main

Connect Repository

In Netlify, click “Add new site” → “Import an existing project”
Select “GitHub” and authorize Netlify
Choose your portfolio repository

Configure Build Settings

Since there’s no build process, use these settings:

Build command: (leave empty)
Publish directory: / or .
Click “Deploy site”

Enable Auto-Deploy

Any push to your main branch will automatically trigger a new deployment.

Netlify provides free SSL certificates, automatic CDN distribution, and unlimited bandwidth for personal projects.

Vercel Deployment

Vercel offers excellent performance with automatic HTTPS and edge network deployment.

Create Vercel Account

Visit vercel.com and sign up (GitHub login recommended).

Import Your Project

Click “Add New…” → “Project”
Select “Import Git Repository”
Choose your portfolio repository from GitHub

Configure Project

Set up deployment configuration:

Framework Preset: Other
Root Directory: ./ (or leave default)
Build Command: (leave empty)
Output Directory: (leave empty)

# No build configuration needed for this static site

Deploy

Click “Deploy” and Vercel will:

Deploy your site to a .vercel.app domain
Provide preview deployments for every push
Enable automatic production deployments

Add Custom Domain

Go to Project Settings → Domains
Add your custom domain
Update your DNS records as instructed

Make sure your repository is public or you have the appropriate Vercel plan for private repositories.

GitHub Pages Deployment

Free hosting directly from your GitHub repository.

Prepare Repository

Ensure your code is pushed to GitHub:

cd ~/workspace/source
git add .
git commit -m "Prepare for deployment"
git push origin main

Enable GitHub Pages

Go to your repository on GitHub
Navigate to Settings → Pages
Under “Source”, select the main branch
Select the root folder (/)
Click “Save”

Wait for Deployment

GitHub will build and deploy your site. This typically takes 1-2 minutes. Your site will be available at: https://username.github.io/repository-name/

Configure Custom Domain (Optional)

Add a CNAME file to your repository root with your domain:

echo "yourdomain.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push origin main

Update your DNS provider with a CNAME record pointing to username.github.io

Alternative: Using GitHub Actions

For more control, create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      
      - name: Setup Pages
        uses: actions/configure-pages@v4
      
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

GitHub Pages is completely free for public repositories and includes automatic SSL certificates.

Traditional Hosting (cPanel / FTP)

Deploy to any traditional web host with FTP access.

Gather FTP Credentials

Obtain from your hosting provider:

FTP host/server address
FTP username
FTP password
FTP port (usually 21)

Connect via FTP Client

Use an FTP client like FileZilla, Cyberduck, or WinSCP:

# Or use command-line FTP (if available)
ftp your-host.com
# Enter username and password when prompted

Upload Files

Upload all project files to your web root directory (usually public_html, www, or htdocs):

index.html (must be in root)
css/ folder
js/ folder
img/ folder
README.md (optional)

The structure should look like:

public_html/
├── index.html
├── css/
│   └── estilos.css
├── js/
│   ├── main.js
│   └── fondo.js
└── img/
    ├── home.jpeg
    ├── redes.jpg
    ├── flores.jpg
    ├── arbol.jpg
    ├── corazon.jpg
    └── cicsa.jpg

Configure .htaccess (Optional)

For better security and performance, create a .htaccess file:

# Enable HTTPS redirect (if SSL is available)
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Enable compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript application/json
</IfModule>

# Enable browser caching
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

# Security headers
<IfModule mod_headers.c>
  Header set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "SAMEORIGIN"
  Header set X-XSS-Protection "1; mode=block"
</IfModule>

Verify Deployment

Visit your domain (e.g., https://yourdomain.com) and test all functionality.

Ensure your hosting provider supports static HTML sites and that the web root directory permissions are correctly set (typically 755 for directories, 644 for files).

Post-Deployment

After deploying your portfolio, complete these important tasks:

Testing Checklist

Cross-Browser Testing

Test your deployed site on:

Chrome/Edge (Chromium)
Firefox
Safari (if available)
Mobile browsers (iOS Safari, Chrome Mobile)

Responsive Design Testing

Verify the layout works on different screen sizes:

Desktop (1920px+)
Laptop (1366px, 1440px)
Tablet (768px, 1024px)
Mobile (375px, 414px)

Use browser DevTools or online tools like Responsively.

Functionality Testing

Check that all features work:

Navigation menu and smooth scrolling
Social media links open correctly
Contact form (if implemented)
Interactive elements and animations

Performance Testing

Use tools to measure performance:

Aim for scores above 90 on all metrics.

Performance Optimization

<!-- Add loading="lazy" to images in index.html -->
<img src="img/home.jpeg" alt="Home" loading="lazy">
<img src="img/flores.jpg" alt="Flores Project" loading="lazy">

SEO Considerations

Enhance your portfolio’s search engine visibility:

Add Meta Tags

Ensure index.html includes proper meta tags:

<meta name="description" content="NILVER T.I - Portfolio showcasing web development projects and skills">
<meta name="keywords" content="portfolio, web developer, NILVER T.I, HTML, CSS, JavaScript">
<meta name="author" content="NILVER T.I">

Create robots.txt

Add a robots.txt file to your root directory:

User-agent: *
Allow: /

Sitemap: https://yourdomain.com/sitemap.xml

Submit to Search Engines

Google Search Console
Bing Webmaster Tools
Submit your sitemap for faster indexing

Add Open Graph Tags

Improve social media sharing:

<meta property="og:title" content="NILVER T.I - Portfolio">
<meta property="og:description" content="Web development portfolio">
<meta property="og:image" content="https://yourdomain.com/img/home.jpeg">
<meta property="og:url" content="https://yourdomain.com">

Analytics Setup

Track your portfolio’s performance:

Google Analytics
Plausible Analytics
Cloudflare Analytics

Create GA4 Property

Add Tracking Code

Add the tracking script to the <head> of index.html:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Verify Installation

Use the Google Analytics Debugger extension or check real-time reports.

A privacy-friendly alternative to Google Analytics:

<!-- Add to <head> in index.html -->
<script defer data-domain="yourdomain.com" src="https://plausible.io/js/script.js"></script>

Plausible is lightweight (< 1KB), doesn’t use cookies, and is GDPR compliant.

If using Cloudflare for DNS/CDN:

Enable Web Analytics

Go to Cloudflare Dashboard → Analytics → Web Analytics

Add Tracking Script

Copy the provided script and add it to your index.html

View Reports

Access analytics directly from your Cloudflare dashboard

Continuous Deployment

Set up automatic deployments for a streamlined workflow:

With GitHub integration on Netlify, Vercel, or GitHub Pages, every push to your main branch automatically triggers a new deployment.

Workflow Example

# Make changes to your portfolio
cd ~/workspace/source
# Edit files...

# Test locally
open index.html  # or use a local server

# Commit and push
git add .
git commit -m "Update project section with new portfolio item"
git push origin main

# Your site automatically deploys! ✨

Deployment Notifications

Set up notifications for deployment status:

Netlify: Go to Site Settings → Build & Deploy → Deploy notifications
Vercel: Configure in Project Settings → Git → Deploy Hooks
GitHub Pages: Use GitHub Actions to send notifications via email or Slack

Troubleshooting

Common deployment issues and solutions:

Images not loading after deployment

Problem: Images display locally but not on the deployed site.Solution:

Check file paths are relative (e.g., img/home.jpeg not /img/home.jpeg)
Verify image files were uploaded correctly
Check file name case sensitivity (Linux servers are case-sensitive)
Ensure images exist in the img/ folder

CSS styles not applying

Problem: Site looks unstyled or broken.Solution:

Verify css/estilos.css path in index.html
Check that Tailwind CDN link is correct and accessible
Clear browser cache and CDN cache
Inspect browser console for 404 errors

Custom domain not working

Problem: Domain doesn’t point to your site.Solution:

Wait for DNS propagation (can take 24-48 hours)
Verify DNS records are correct (A record or CNAME)
Check SSL certificate is provisioned
Use DNS Checker to verify propagation

Site loads slowly

Problem: Poor performance scores or slow loading times.Solution:

Compress images using tools like TinyPNG
Enable CDN on your hosting platform
Add lazy loading to images
Minify CSS and JavaScript files
Enable caching headers (.htaccess for Apache)

404 errors on page refresh

Problem: Single-page apps show 404 on refresh (not applicable to this project).Solution:

This portfolio uses anchor links (#home, #skills, etc.) which don’t require server configuration
If implementing routing, configure server redirects or use hash-based routing

Best Practices

Follow these best practices for a professional deployment:

Use version control: Always commit changes before deploying
Test before deploying: Verify changes work locally first
Keep backups: Maintain copies of your site before major updates
Monitor analytics: Track visitor behavior and site performance
Update regularly: Keep content fresh and relevant
Secure your site: Use HTTPS (free with Netlify, Vercel, GitHub Pages)
Optimize for mobile: Ensure responsive design works perfectly
Check accessibility: Use tools like WAVE to ensure your site is accessible

Next Steps

After deploying your portfolio:

Set up a custom domain (follow your hosting provider’s domain configuration guide)
Configure analytics (see the Analytics Setup section above)
Optimize images and assets for better performance
Improve SEO by adding proper meta tags and descriptions
Share your portfolio on social media and with potential employers!

Congratulations on deploying your portfolio! Remember to keep it updated with your latest projects and skills.

Get Started

Components

Customization

Deployment

Pre-Deployment Checklist

Deployment Options

Netlify Deployment

Method 1: Drag and Drop (Fastest)

Method 2: GitHub Integration (Recommended)

Vercel Deployment

GitHub Pages Deployment

Alternative: Using GitHub Actions

Traditional Hosting (cPanel / FTP)

Post-Deployment

Testing Checklist

Performance Optimization

SEO Considerations

Analytics Setup

Continuous Deployment

Workflow Example

Deployment Notifications

Troubleshooting

Best Practices

Next Steps

Build docs developers (and LLMs) love

Get Started

Components

Customization

Deployment

​Pre-Deployment Checklist

​Deployment Options

​Netlify Deployment

​Method 1: Drag and Drop (Fastest)

​Method 2: GitHub Integration (Recommended)

​Vercel Deployment

​GitHub Pages Deployment

​Alternative: Using GitHub Actions

​Traditional Hosting (cPanel / FTP)

​Post-Deployment

​Testing Checklist

​Performance Optimization

​SEO Considerations

​Analytics Setup

​Continuous Deployment

​Workflow Example

​Deployment Notifications

​Troubleshooting

​Best Practices

​Next Steps

Build docs developers (and LLMs) love

Pre-Deployment Checklist

Deployment Options

Netlify Deployment

Method 1: Drag and Drop (Fastest)

Method 2: GitHub Integration (Recommended)

Vercel Deployment

GitHub Pages Deployment

Alternative: Using GitHub Actions

Traditional Hosting (cPanel / FTP)

Post-Deployment

Testing Checklist

Performance Optimization

SEO Considerations

Analytics Setup

Continuous Deployment

Workflow Example

Deployment Notifications

Troubleshooting

Best Practices

Next Steps