Skip to main content

​
Overview

Proyecto Neptuno is already deployed and live at:
Live Site: https://melerodaw.github.io/CSS-responsive-project/
Since this is a static HTML/CSS website with no build process, deployment is straightforward. This guide covers multiple deployment options.

​
GitHub Pages Deployment

GitHub Pages is the easiest way to deploy static sites directly from a repository.
1

Fork the repository

Visit the original repository and click the “Fork” button:
https://github.com/melerodaw/CSS-responsive-project
This creates a copy under your GitHub account.
2

Enable GitHub Pages

In your forked repository:
  1. Go to Settings > Pages
  2. Under “Source”, select the branch to deploy (usually main or master)
  3. Select / (root) as the folder
  4. Click Save
GitHub will build and deploy your site automatically.
3

Wait for deployment

GitHub Pages typically takes 1-3 minutes to deploy. You’ll see a green checkmark and your site URL:
https://YOUR-USERNAME.github.io/CSS-responsive-project/
If you renamed the repository, the URL will reflect the new name.
4

Verify deployment

Click the generated URL or visit it in your browser. You should see the home page of Proyecto Neptuno.Test all navigation links to ensure they work correctly.

​
Repository Naming

GitHub Pages URLs depend on your repository name:
  • Repository: CSS-responsive-project → URL: username.github.io/CSS-responsive-project
  • Repository: neptuno → URL: username.github.io/neptuno
  • Repository: username.github.io → URL: username.github.io (user site)
For a cleaner URL, rename your repository to username.github.io (replacing username with your GitHub username). This will deploy to the root domain.

​
Custom Domain Setup

You can use your own domain with GitHub Pages:
1

Configure DNS records

In your domain registrar (Namecheap, GoDaddy, etc.), add these DNS records:For apex domain (example.com):
Type: A
Name: @
Value: 185.199.108.153

Type: A
Name: @
Value: 185.199.109.153

Type: A
Name: @
Value: 185.199.110.153

Type: A
Name: @
Value: 185.199.111.153
For subdomain (www.example.com or neptuno.example.com):
Type: CNAME
Name: www (or neptuno)
Value: YOUR-USERNAME.github.io
2

Add custom domain in GitHub

  1. Go to Settings > Pages
  2. Under “Custom domain”, enter your domain: example.com
  3. Click Save
  4. Wait for DNS check to complete (can take up to 24 hours)
3

Enable HTTPS

After DNS propagates:
  1. Return to Settings > Pages
  2. Check Enforce HTTPS
  3. GitHub will automatically provision an SSL certificate
HTTPS enforcement may take a few minutes to become available after DNS verification.

​
Alternative Deployment Options

​
Netlify

Deploy with drag-and-drop or continuous deployment:
1

Sign up for Netlify

Visit netlify.com and create a free account.
2

Deploy from GitHub

  1. Click Add new site > Import an existing project
  2. Connect your GitHub account
  3. Select your repository
  4. Build settings:
    • Build command: (leave empty)
    • Publish directory: /
  5. Click Deploy site
3

Get your URL

Netlify provides a random URL like random-name-123.netlify.appYou can customize this in Site settings > Domain management

​
Vercel

Similar process to Netlify: 
# Install Vercel CLI (optional)
npm i -g vercel

# Deploy from your local repository
vercel
Or import directly from GitHub at vercel.com.

​
Traditional Web Hosting

For traditional hosting (Bluehost, HostGator, etc.):
1

Download project files

git clone https://github.com/YOUR-USERNAME/CSS-responsive-project.git
cd CSS-responsive-project
2

Upload via FTP/SFTP

Using FileZilla, Cyberduck, or your hosting control panel:
  1. Connect to your hosting account
  2. Navigate to public_html or www directory
  3. Upload all files:
    • index.html
    • ocio.html
    • gastro.html
    • proyecto.html
    • contact.html
    • style.css
    • img/ folder (entire directory)
3

Test your deployment

Visit your domain (e.g., http://yourdomain.com)Verify all pages load and images display correctly.

​
Post-Deployment Checklist

After deploying, verify these items:
  • All 5 pages load correctly (index, ocio, gastro, proyecto, contact)
  • Navigation links work between pages
  • Images load properly (check img/ directory uploaded)
  • Fonts display correctly (Google Fonts CDN accessible)
  • Responsive design works on mobile (test with device toolbar)
  • Hamburger menu functions on mobile viewports
  • Footer navigation links work
  • Contact form displays (even if not functional without backend)

​
Updating Your Deployment

​
GitHub Pages

Changes are automatically deployed when you push to the configured branch: 
# Make changes to your files
edit index.html

# Commit and push
git add .
git commit -m "Update hero text"
git push origin main
GitHub Pages will rebuild automatically within 1-3 minutes.

​
Netlify/Vercel

Both platforms auto-deploy on git push if connected to your repository. Otherwise: 
# Netlify CLI
netlify deploy --prod

# Vercel CLI
vercel --prod

​
FTP/SFTP

Re-upload modified files using your FTP client. Only upload changed files to save time.

​
Performance Optimization

​
Image Optimization

The project already uses WebP images for better compression. To further optimize: 
# Install image optimization tools
npm install -g imagemin-cli imagemin-webp

# Convert and optimize images
imagemin img/*.jpg --plugin=webp > img/output/

​
CSS Minification

For production, minify style.css: 
# Using CSS minifier
npx csso style.css -o style.min.css
Then update HTML to reference style.min.css: 
<link rel="stylesheet" href="style.min.css">

​
Caching Headers

If using traditional hosting, add to .htaccess: 
# Cache static assets for 1 year
<FilesMatch "\.(jpg|jpeg|png|gif|webp|css|js)$">
    Header set Cache-Control "max-age=31536000, public"
</FilesMatch>

​
Troubleshooting

Ensure all links are relative (starting with ./ or /): 
<!-- Correct -->
<a href="./index.html">Home</a>
<img src="./img/logo.png" alt="Logo">

<!-- Avoid absolute paths -->
<a href="/index.html">Home</a>

​
Images not loading?

Check:
  1. img/ folder uploaded completely
  2. File names match exactly (case-sensitive on Linux servers)
  3. Image paths in HTML are correct

​
Fonts not displaying?

Verify the Google Fonts import in style.css:6 is intact: 
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

​
404 errors on GitHub Pages?

Ensure:
  1. Repository is public (or you have GitHub Pro for private repos)
  2. Branch selected in Settings > Pages matches your code branch
  3. Files are in the repository root, not a subdirectory

​
Monitoring and Analytics

Add Google Analytics to track visitors: 
<!-- Add before </head> in all HTML files -->
<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>
Replace G-XXXXXXXXXX with your Google Analytics tracking ID.

​
Next Steps

View Live Demo

See the original deployed version

Introduction

Learn more about the project architecture

Build docs developers (and LLMs) love

Get started for freeTalk to us