Deployment & Hosting

Overview

The DNI Cita Previa project is a static website that can be hosted on any platform that supports HTML, CSS, and JavaScript files. This guide covers the most popular and recommended deployment options.

GitHub Pages

GitHub Pages is a free hosting service perfect for static websites.

Prerequisites

GitHub account
Git installed locally
Repository containing your project

Deployment Steps

Step 1: Push Code to GitHub

# Initialize git repository (if not already done)
git init

# Add all files
git add .

# Commit files
git commit -m "Initial commit: DNI Cita Previa redesign"

# Add remote repository
git remote add origin https://github.com/yourusername/dni-cita-previa.git

# Push to GitHub
git push -u origin main

Step 2: Enable GitHub Pages

Go to your repository on GitHub
Click Settings tab
Scroll down to Pages section
Under “Source”, select Deploy from a branch
Choose branch: main and folder: / (root)
Click Save

Step 3: Access Your Site

Your site will be available at:

https://yourusername.github.io/dni-cita-previa/

Deployment typically takes 1-2 minutes.

Custom Domain (Optional)

# Add a CNAME file to your repository
echo "www.example.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push

Then configure your DNS provider:

Type	Name	Value
CNAME	www	yourusername.github.io
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153

GitHub Pages supports HTTPS automatically for both *.github.io domains and custom domains.

Netlify

Netlify offers continuous deployment with advanced features like form handling and serverless functions.

Method 1: Drag & Drop

Visit netlify.com
Sign up or log in
Drag your project folder to the Netlify dashboard
Your site is live instantly!

Method 2: Git Integration

Step 1: Connect Repository

Log in to Netlify
Click Add new site → Import an existing project
Choose GitHub (or GitLab/Bitbucket)
Authorize Netlify to access your repositories
Select your DNI Cita Previa repository

Step 2: Configure Build Settings

Since this is a static site with no build process:

Build command: Leave empty
Publish directory: ./ (or leave empty)
Production branch: main

Click Deploy site

Step 3: Custom Domain

Go to Site settings → Domain management
Click Add custom domain
Enter your domain name
Follow DNS configuration instructions

Netlify automatically provisions SSL certificates.

Netlify Configuration File

Create netlify.toml in your project root for advanced settings:

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

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

# Cache static assets
[[headers]]
  for = "/css/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/js/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

[[headers]]
  for = "/images/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Vercel

Vercel provides fast global deployment with edge network optimization.

Deploy with Vercel CLI

# Install Vercel CLI
npm i -g vercel

Deploy via Git

Push code to GitHub/GitLab/Bitbucket
Visit vercel.com
Click Add New → Project
Import your repository
Click Deploy

Vercel Configuration

Create vercel.json in your project root:

{
  "version": 2,
  "public": true,
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "X-Content-Type-Options",
          "value": "nosniff"
        },
        {
          "key": "X-Frame-Options",
          "value": "DENY"
        },
        {
          "key": "X-XSS-Protection",
          "value": "1; mode=block"
        }
      ]
    },
    {
      "source": "/css/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/js/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    },
    {
      "source": "/images/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

Traditional Hosting (cPanel, FTP)

For traditional web hosting providers:

Via FTP

Step 1: Prepare Files

Ensure your project structure is ready:

├── index.html
├── iniciar-solicitud.html
├── seleccionar-cita.html
├── resumen.html
├── css/
├── js/
└── images/

Step 2: Connect via FTP

Use an FTP client like FileZilla:

Host: ftp.yourdomain.com
Username: Your FTP username
Password: Your FTP password
Port: 21 (or 22 for SFTP)

Step 3: Upload Files

Navigate to public_html or www directory
Upload all project files
Maintain the same folder structure
Ensure permissions are set correctly (755 for directories, 644 for files)

Via cPanel File Manager

Log in to cPanel
Open File Manager
Navigate to public_html
Click Upload
Upload a ZIP file of your project
Extract the ZIP file
Move files from subfolder to public_html if needed

Always test your site after uploading by visiting your domain. Check for:

All pages load correctly
Images display properly
Links work
Forms function as expected

Apache Configuration

If using Apache server, create .htaccess file in root directory:

# Enable mod_rewrite
RewriteEngine On

# Force HTTPS
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

# Remove .html extension
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^([^.]+)$ $1.html [NC,L]

# Compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript
</IfModule>

# Browser Caching
<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
  ExpiresByType application/javascript "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
</IfModule>

# Security Headers
<IfModule mod_headers.c>
  Header set X-Content-Type-Options "nosniff"
  Header set X-Frame-Options "DENY"
  Header set X-XSS-Protection "1; mode=block"
  Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Performance Optimization

Image Optimization

Before deployment, optimize images:

# Using ImageMagick
for img in images/*.png; do
  convert "$img" -quality 85 "${img%.png}.webp"
done

# Using squoosh-cli
npx @squoosh/cli --webp auto images/*.png

Minification

Minify CSS and JavaScript:

# Using clean-css-cli
npx clean-css-cli -o css/style.min.css css/style.css

Update HTML to reference minified files:

<link rel="stylesheet" href="./css/style.min.css">
<script src="./js/index.min.js"></script>

Monitoring & Analytics

Google Analytics

Add tracking code to all pages (before </head>):

<!-- Google Analytics -->
<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>

Uptime Monitoring

Recommended tools:

UptimeRobot - Free uptime monitoring
Pingdom - Performance monitoring
StatusCake - Uptime and performance

Comparison Table

Feature	GitHub Pages	Netlify	Vercel	Traditional Hosting
Free Tier	Yes	Yes (100GB/mo)	Yes (100GB/mo)	Varies
Custom Domain	Yes	Yes	Yes	Yes
SSL Certificate	Automatic	Automatic	Automatic	Manual/Paid
Deployment	Git push	Git/Drag & Drop	Git/CLI	FTP/cPanel
Build Time	~1-2 min	Instant	Instant	Manual
CDN	Yes	Yes	Yes	Usually No
Redirects	Limited	Yes	Yes	Via .htaccess
Forms	No	Yes	No	Server-side needed
Best For	Simple projects	Full-featured sites	Next-gen performance	Full control

Troubleshooting

404 Errors After Deployment

Problem: Pages return 404 errors. Solution:

Check file paths are lowercase and match exactly
Verify .html extensions are included in links
Add redirect rules (see platform-specific config above)

Images Not Loading

Problem: Images don’t display after deployment. Solution:

Use relative paths: ./images/logo.png instead of /images/logo.png
Verify image files were uploaded
Check file permissions (644 for files)

CSS Not Applying

Problem: Styles don’t appear on live site. Solution:

Clear browser cache
Check CSS file paths in HTML
Verify CSS files were uploaded
Check for MIME type issues (should be text/css)

Next Steps

After successful deployment:

Test Thoroughly - Verify all functionality works in production
Set Up Analytics - Monitor traffic and user behavior
Configure Monitoring - Set up uptime alerts
Optimize Performance - Run Lighthouse audits and improve scores
Document Changes - Keep deployment notes for future updates

For government or official deployments, ensure compliance with security policies and accessibility standards (WCAG 2.1 Level AA).

Overview

Design System

Pages

Development

Deployment

Overview

GitHub Pages

Prerequisites

Deployment Steps

Custom Domain (Optional)

Netlify

Method 1: Drag & Drop

Method 2: Git Integration

Netlify Configuration File

Vercel

Deploy with Vercel CLI

Deploy via Git

Vercel Configuration

Traditional Hosting (cPanel, FTP)

Via FTP

Via cPanel File Manager

Apache Configuration

Performance Optimization

Image Optimization

Minification

Monitoring & Analytics

Google Analytics

Uptime Monitoring

Comparison Table

Troubleshooting

404 Errors After Deployment

Images Not Loading

CSS Not Applying

Next Steps

Build docs developers (and LLMs) love

Overview

Design System

Pages

Development

Deployment

​Overview

​GitHub Pages

​Prerequisites

​Deployment Steps

​Custom Domain (Optional)

​Netlify

​Method 1: Drag & Drop

​Method 2: Git Integration

​Netlify Configuration File

​Vercel

​Deploy with Vercel CLI

​Deploy via Git

​Vercel Configuration

​Traditional Hosting (cPanel, FTP)

​Via FTP

​Via cPanel File Manager

​Apache Configuration

​Performance Optimization

​Image Optimization

​Minification

​Monitoring & Analytics

​Google Analytics

​Uptime Monitoring

​Comparison Table

​Troubleshooting

​404 Errors After Deployment

​Images Not Loading

​CSS Not Applying

​Next Steps

Build docs developers (and LLMs) love

Overview

GitHub Pages

Prerequisites

Deployment Steps

Custom Domain (Optional)

Netlify

Method 1: Drag & Drop

Method 2: Git Integration

Netlify Configuration File

Vercel

Deploy with Vercel CLI

Deploy via Git

Vercel Configuration

Traditional Hosting (cPanel, FTP)

Via FTP

Via cPanel File Manager

Apache Configuration

Performance Optimization

Image Optimization

Minification

Monitoring & Analytics

Google Analytics

Uptime Monitoring

Comparison Table

Troubleshooting

404 Errors After Deployment

Images Not Loading

CSS Not Applying

Next Steps