Cloud & Hosting - Complete Guide

📚

What You'll Learn

Domains & URLs

Servers & Hosting

Databases

Web Tiers Architecture

Static vs Dynamic Sites

Free Hosting Platforms

Paid & VPS Hosting

Deploy Static Sites

Deploy Backend Apps

Custom Domain Setup

Cloudflare Tunnel

Ngrok for Testing

Understanding the Web

Domains & URLs

A domain is your website's address on the internet. It's like your home address but for websites. When someone types www.omkumarpandey.com.np in their browser, DNS (Domain Name System) translates it to an IP address where your website lives.

URL Structure: https://www.omkumarpandey.com.np/blog/post-1 │ │ │ │ │ │ │ │ │ └── Path │ │ │ └── TLD (Top Level Domain) │ │ └── Domain Name │ └── Subdomain (www) └── Protocol (HTTPS) Domain Types: • .com, .org, .net → Generic TLDs • .com.np, .co.uk → Country-code TLDs • .dev, .app, .io → New gTLDs Where to Buy Domains: • Namecheap → Affordable, good UI • Cloudflare → At-cost pricing • GoDaddy → Popular but pricey • Google Domains → Simple, transparent • Local (.np) → Register.com.np

💡 Pro Tip

Buy domains from Cloudflare - they sell at wholesale price with no markup! For .np domains, you'll need to register through Nepal's domain registrar.

Servers & Hosting

A server is a computer that stores your website files and serves them to visitors. When someone visits your site, their browser sends a request to the server, which responds with the HTML, CSS, JavaScript, and other files needed to display your page.

How Web Hosting Works: ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ Browser │ ──────▶ │ DNS │ ──────▶ │ Server │ │ (Client) │ │ (Lookup) │ │ (Host) │ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │◀──────────── Website Files ───────────────────│ Types of Hosting: ┌─────────────────────────────────────────────────────────┐ │ Shared Hosting → Multiple sites on one server │ │ → Cheap ($3-10/mo), Limited control │ ├─────────────────────────────────────────────────────────┤ │ VPS Hosting → Virtual private server │ │ → More control, scalable ($5-50/mo) │ ├─────────────────────────────────────────────────────────┤ │ Dedicated Server → Entire server for you │ │ → Full control, expensive ($80+/mo) │ ├─────────────────────────────────────────────────────────┤ │ Cloud Hosting → Pay for what you use │ │ → AWS, GCP, Azure (Variable pricing) │ ├─────────────────────────────────────────────────────────┤ │ Static Hosting → For HTML/CSS/JS only │ │ → FREE! (Netlify, Vercel, GitHub) │ └─────────────────────────────────────────────────────────┘

Databases

Databases store and organize your application's data - user accounts, blog posts, products, etc. Static sites don't need databases, but dynamic applications do.

Database Types: SQL (Relational) NoSQL (Non-relational) ┌──────────────────────┐ ┌──────────────────────┐ │ • PostgreSQL │ │ • MongoDB │ │ • MySQL │ │ • Redis │ │ • SQLite │ │ • Firebase │ │ • MariaDB │ │ • DynamoDB │ └──────────────────────┘ └──────────────────────┘ Tables with rows/columns Documents/Key-value pairs Structured data Flexible schema ACID compliant Highly scalable Free Database Options: • Supabase → PostgreSQL (Free tier: 500MB) • PlanetScale → MySQL (Free tier: 5GB) • MongoDB Atlas → MongoDB (Free tier: 512MB) • Firebase → NoSQL (Generous free tier) • Neon → PostgreSQL (Free tier available)

Web Tiers Architecture

Modern web applications are built in layers (tiers). Understanding this architecture helps you know what you need for your project and where to host each component.

3-Tier Architecture: ┌─────────────────────────────────────────────────────────────┐ │ FRONTEND (Presentation) │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ HTML │ CSS │ JavaScript │ React/Vue/Angular │ │ │ └───────────────────────────────────────────────────────┘ │ │ What users see and interact with in browser │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ BACKEND (Application) │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ Django │ Node.js │ FastAPI │ Flask │ Express │ │ │ └───────────────────────────────────────────────────────┘ │ │ Business logic, API endpoints, authentication │ └─────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────┐ │ DATABASE (Data) │ │ ┌───────────────────────────────────────────────────────┐ │ │ │ PostgreSQL │ MySQL │ MongoDB │ Redis │ SQLite│ │ │ └───────────────────────────────────────────────────────┘ │ │ Stores and retrieves application data │ └─────────────────────────────────────────────────────────────┘

🎯 Key Insight

Static sites only need the Frontend tier → FREE hosting available!
Dynamic sites need all 3 tiers → Requires paid hosting or clever free solutions.

Static vs Dynamic Sites

Understanding the difference is crucial for choosing the right hosting solution.

Feature	Static Sites	Dynamic Sites
Content	Fixed HTML/CSS/JS files	Generated on each request
Backend	✗ Not needed	✓ Required
Database	✗ Not needed	✓ Usually needed
User Accounts	✗ Not possible	✓ Supported
Speed	⚡ Very fast (CDN)	🔄 Depends on server
Security	🛡️ Very secure	⚠️ More attack vectors
Cost	💚 FREE	💰 $5-100+/month
Examples	Portfolio, Blog, Docs	E-commerce, Social Media

Host Static Sites for FREE

If your website is just HTML, CSS, and JavaScript (no backend, no database), you can host it completely FREE on these amazing platforms. Perfect for portfolios, landing pages, and documentation!

GitHub Pages

Host directly from your GitHub repository

FREE

Netlify

Auto-deploy from Git with custom domains

FREE

Vercel

Best for Next.js, great for any static site

FREE

Cloudflare Pages

Fast CDN, unlimited bandwidth

FREE

Firebase Hosting

Google's hosting with free SSL

FREE

Surge.sh

Simple CLI-based deployment

FREE

Deploy with GitHub Pages

GitHub Pages is the easiest way to host a static site. It's free, supports custom domains, and automatically deploys when you push to your repository.

Create a GitHub Repository Push your website files to GitHub

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/your-repo.git
git push -u origin main

Files uploaded to GitHub

Enable GitHub Pages Settings → Pages → Select branch

1. Go to your repository on GitHub
2. Click Settings → Pages
3. Under "Source", select main branch
4. Click Save

Site live at: https://yourusername.github.io/your-repo/

Add Custom Domain (Optional) Use your own domain like www.omkumarpandey.com.np

1. In GitHub Pages settings, enter your custom domain
2. Create a CNAME file in your repo with your domain
3. Add DNS records at your domain registrar:

# Add these DNS records:

Type: CNAME
Name: www
Value: yourusername.github.io

# Or for apex domain (A records):
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Site live at: www.omkumarpandey.com.np

Deploy with Netlify

Netlify offers automatic deployments from Git, serverless functions, form handling, and more. It's perfect for modern static sites and JAMstack applications.

Connect Repository Link your GitHub/GitLab repo to Netlify

1. Go to netlify.com and sign up
2. Click "Add new site" → "Import an existing project"
3. Connect your GitHub account
4. Select your repository

Repository connected

Configure Build Settings Set build command and publish directory

# For plain HTML/CSS/JS:
Build command: (leave empty)
Publish directory: / or ./public

# For React/Vue/Angular:
Build command: npm run build
Publish directory: dist or build

Site deployed at: random-name.netlify.app

Add Custom Domain Configure your own domain

1. Go to Site settings → Domain management
2. Click "Add custom domain"
3. Enter your domain: www.omkumarpandey.com.np
4. Add the DNS records Netlify provides

# DNS Records to add:

Type: CNAME
Name: www
Value: your-site.netlify.app

# Enable HTTPS (automatic with Netlify)

Site live with SSL at your custom domain!

✨ Netlify Bonus Features

• Auto-deploy on every git push • Free SSL certificates • Form submissions • Serverless functions • Split testing • Deploy previews for pull requests

Deploy with Cloudflare Pages

Cloudflare Pages offers unlimited bandwidth, automatic deployments, and blazing-fast performance through Cloudflare's global CDN network.

                                
                                
                                
                            
Cloudflare Pages Setup

# Step 1: Go to Cloudflare Dashboard
→ https://dash.cloudflare.com
→ Click "Pages" in sidebar
→ Click "Create a project"

# Step 2: Connect Git Repository
→ Connect to GitHub/GitLab
→ Select your repository
→ Configure build settings:
   • Build command: (empty for static, or npm run build)
   • Output directory: / or dist or build

# Step 3: Deploy
→ Click "Save and Deploy"
→ Wait for build to complete
→ Site live at: your-project.pages.dev

# Step 4: Custom Domain
→ Go to your project → Custom domains
→ Add: www.omkumarpandey.com.np
→ Cloudflare auto-configures DNS if domain is on Cloudflare!
                    

🚀 Why Cloudflare Pages?

Unlimited bandwidth (even on free tier), 300+ edge locations worldwide, and if your domain is already on Cloudflare, custom domain setup is instant!

Hosting Platforms Overview

Different projects need different hosting solutions. Here's a comprehensive overview of all major hosting options, from free to enterprise-grade.

Free Hosting Platforms

Platform	Best For	Features	Limitations
GitHub Pages	Static sites	Custom domain, SSL	1GB storage, no backend
Netlify	JAMstack, Static	Functions, Forms, CDN	100GB bandwidth/mo
Vercel	Next.js, Frontend	Edge functions, Fast	100GB bandwidth/mo
Cloudflare Pages	Static + Workers	Unlimited bandwidth!	500 builds/mo
Railway	Full-stack apps	Database, Backend	$5 free credit/mo
Render	Web services	Static + Backend	Sleeps after 15min
Fly.io	Docker apps	Global deployment	3 shared VMs free

Paid & VPS Hosting

AWS

Industry standard, highly scalable

From $5/mo

Google Cloud

Great for ML and big data

From $5/mo

Microsoft Azure

Enterprise-grade cloud

From $5/mo

DigitalOcean

Developer-friendly VPS

From $4/mo

Linode

Simple, reliable VPS

From $5/mo

Vultr

High-performance cloud

From $2.50/mo

Heroku

Easy PaaS deployment

From $5/mo

cPanel Hosting

Traditional shared hosting

From $3/mo

⚠️ Important Note

Heroku removed their free tier in 2022. For free backend hosting alternatives, check out Railway, Render, or Fly.io. For testing, use Ngrok or Cloudflare Tunnel!

Deploy Backend Applications

Backend applications (Django, Node.js, FastAPI, Flask) require a server that can run your code. Here are your options from free testing to production deployment.

Backend Frameworks & Deployment

Popular Backend Frameworks: Python JavaScript Other ├── Django ├── Node.js + Express ├── Ruby on Rails ├── FastAPI ├── Next.js (API) ├── PHP Laravel ├── Flask ├── Nest.js ├── Go Gin └── Pyramid └── Fastify └── Rust Actix Deployment Options: ┌─────────────────────────────────────────────────────────────┐ │ For Testing (FREE) │ ├─────────────────────────────────────────────────────────────┤ │ • Ngrok → Expose localhost to internet │ │ • Cloudflare Tunnel → Permanent tunnels, custom domains │ │ • LocalTunnel → Simple temporary URLs │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ For Production (FREE/Cheap) │ ├─────────────────────────────────────────────────────────────┤ │ • Railway → $5 free credit, easy deployment │ │ • Render → Free tier (sleeps after 15min) │ │ • Fly.io → 3 free shared VMs │ │ • Vercel → Serverless functions │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ For Production (PAID) │ ├─────────────────────────────────────────────────────────────┤ │ • VPS (DigitalOcean, Linode, Vultr) → Full control │ │ • AWS EC2 / Lightsail → Scalable │ │ • Heroku → Easy PaaS │ │ • cPanel → Traditional │ └─────────────────────────────────────────────────────────────┘

Testing with Ngrok

Ngrok creates a secure tunnel from a public URL to your local machine. Perfect for testing webhooks, sharing work with clients, or mobile app development.

terminal

# Install Ngrok
# Download from https://ngrok.com/download

# Or with npm
npm install -g ngrok

# Or with snap (Linux)
sudo snap install ngrok

# Authenticate (get token from ngrok.com)
ngrok config add-authtoken YOUR_AUTH_TOKEN

# Start your local server first
python manage.py runserver 8000    # Django
npm run dev -- --port 3000          # Node.js

# Expose local server to internet
ngrok http 8000

# Output:
Forwarding: https://abc123.ngrok.io → http://localhost:8000

💡 Ngrok Limitations

Free tier: Random URLs that change each session, 40 connections/minute. For permanent URLs, use Cloudflare Tunnel (free) or upgrade Ngrok ($8/mo).

VPS Deployment (Production)

For production Django, Node.js, or FastAPI apps, a VPS gives you full control. Here's a quick overview of deploying a Django app.

VPS Setup - Ubuntu

# 1. SSH into your VPS
ssh root@your-server-ip

# 2. Update system
sudo apt update && sudo apt upgrade -y

# 3. Install required packages
sudo apt install python3-pip python3-venv nginx -y

# 4. Clone your project
git clone https://github.com/yourname/project.git
cd project

# 5. Create virtual environment
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt

# 6. Install Gunicorn (WSGI server for Django)
pip install gunicorn

# 7. Test Gunicorn
gunicorn --bind 0.0.0.0:8000 yourproject.wsgi

# 8. Configure Nginx as reverse proxy
sudo nano /etc/nginx/sites-available/yourproject

# 9. Enable site and restart Nginx
sudo ln -s /etc/nginx/sites-available/yourproject /etc/nginx/sites-enabled
sudo systemctl restart nginx

# 10. Set up SSL with Certbot (Let's Encrypt)
sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com

Cloudflare Tunnel (Detailed Guide)

Cloudflare Tunnel lets you expose your local server to the internet with a custom domain, SSL, and DDoS protection - all for FREE! Perfect for hosting Django, Node.js, or any backend app from your own computer or a local server.

🎯 What You'll Achieve

By the end of this guide, your local Django/Node.js app running on localhost:8000 will be accessible at https://enyx.omkumarpandey.com.np with full SSL!

Install cloudflared on Linux Required for Cloudflare Tunnel

sudo apt update
sudo apt install cloudflared

For other systems:

# macOS
brew install cloudflare/cloudflare/cloudflared

# Windows - Download from:
# https://developers.cloudflare.com/cloudflare-one/connections/connect-apps/install-and-setup/installation

cloudflared command available

cloudflared tunnel login

This opens a browser window. Select the domain you want to use (e.g., omkumarpandey.com.np). Your domain must be added to Cloudflare first!

cert.pem created in ~/.cloudflared/

Verify Certificate File Make sure authentication succeeded

ls ~/.cloudflared

Expected Output

cert.pem

cert.pem visible - ready to create tunnel

Create Tunnel Permanent named tunnel for your project

cloudflared tunnel create enyx-tunnel

Replace enyx-tunnel with any name you want for your tunnel.

Expected Output

Tunnel credentials written to /home/user/.cloudflared/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json Created tunnel enyx-tunnel with id xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

Tunnel ID + JSON credentials file created

List Tunnels Confirm tunnel was created successfully

cloudflared tunnel list

Expected Output

ID NAME CREATED xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx enyx-tunnel 2024-01-15T10:30:00Z

enyx-tunnel listed

Route DNS to Tunnel Connect your subdomain to the tunnel

cloudflared tunnel route dns enyx-tunnel enyx.omkumarpandey.com.np

This automatically creates a CNAME record in your Cloudflare DNS pointing to your tunnel.

CNAME record auto-created in Cloudflare DNS

Create Configuration File Define hostname routing rules

nano ~/.cloudflared/config.yml

Add the following configuration:

~/.cloudflared/config.yml

tunnel: enyx-tunnel credentials-file: /home/YOUR_USERNAME/.cloudflared/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.json ingress: - hostname: enyx.omkumarpandey.com.np service: http://localhost:8000 - service: http_status:404

⚠️ Important

Replace YOUR_USERNAME with your actual Linux username, and use the actual tunnel ID from step 4 for the credentials file path!

Config file saved

Run Your Application Server Your app must be running locally first

# For Django
python manage.py runserver 0.0.0.0:8000

# For Node.js/Express
node app.js  # or npm start

# For FastAPI
uvicorn main:app --host 0.0.0.0 --port 8000

Application running on localhost:8000

Start Cloudflare Tunnel Expose your local app to the internet

Open a new terminal window (keep your app running) and start the tunnel:

cloudflared tunnel run enyx-tunnel

Expected Output

2024-01-15T10:45:00Z INF Starting tunnel tunnelID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx 2024-01-15T10:45:00Z INF Connection established connIndex=0 2024-01-15T10:45:00Z INF Connection established connIndex=1 2024-01-15T10:45:01Z INF Connection established connIndex=2 2024-01-15T10:45:01Z INF Connection established connIndex=3

Tunnel connected! 4 connections established.

Configure Django Settings Prevent 400 Bad Request errors

Add your tunnel domain to Django's allowed hosts:

settings.py

# Add your tunnel domain to allowed hosts ALLOWED_HOSTS = [ 'localhost', '127.0.0.1', 'enyx.omkumarpandey.com.np', ] # For forms and CSRF protection CSRF_TRUSTED_ORIGINS = [ 'https://enyx.omkumarpandey.com.np', ]

For Node.js/Express: No special configuration needed!
For FastAPI: Configure CORS if needed.

Django configured for tunnel domain

Final Test Open your site in the browser

https://enyx.omkumarpandey.com.np

🎉 Congratulations!

Your local application is now live on the internet with:
✅ Custom domain
✅ Free SSL certificate
✅ DDoS protection
✅ Cloudflare CDN

Run Tunnel as a Service (Bonus)

To keep the tunnel running even after you close the terminal or reboot, install it as a system service:

terminal

# Install cloudflared as a service
sudo cloudflared service install

# Start the service
sudo systemctl start cloudflared

# Enable on boot
sudo systemctl enable cloudflared

# Check status
sudo systemctl status cloudflared

# View logs
sudo journalctl -u cloudflared -f

💡 Multiple Subdomains

You can route multiple services through one tunnel! Just add more hostnames to your config.yml ingress rules, each pointing to different local ports.

Quick Reference

Hosting Decision Flowchart

What type of site do you have? ┌─────────────────┐ │ Your Website │ └────────┬────────┘ │ ┌──────────────┴──────────────┐ │ │ ▼ ▼ ┌───────────────┐ ┌───────────────┐ │ Static Site │ │ Dynamic Site │ │ HTML/CSS/JS │ │ Backend + DB │ └───────┬───────┘ └───────┬───────┘ │ │ ▼ ▼ ┌───────────────┐ ┌───────────────┐ │ FREE Hosting! │ │ Need Server │ │ • GitHub Pages│ └───────┬───────┘ │ • Netlify │ │ │ • Vercel │ ┌──────────┴──────────┐ │ • Cloudflare │ │ │ └───────────────┘ ▼ ▼ ┌───────────────┐ ┌───────────────┐ │ Testing Only │ │ Production │ │ • Ngrok │ │ • VPS ($4+/mo)│ │ • CF Tunnel │ │ • Railway │ │ • LocalTunnel │ │ • Render │ └───────────────┘ │ • Fly.io │ │ • Heroku │ └───────────────┘

Common Commands Cheatsheet

cheatsheet.sh

# ===== CLOUDFLARE TUNNEL =====
cloudflared tunnel login                    # Authenticate
cloudflared tunnel create NAME              # Create tunnel
cloudflared tunnel list                     # List tunnels
cloudflared tunnel route dns NAME SUBDOMAIN # Add DNS
cloudflared tunnel run NAME                 # Start tunnel
cloudflared tunnel delete NAME              # Delete tunnel

# ===== NGROK =====
ngrok http 8000                             # Expose port 8000
ngrok http 3000 --subdomain=myapp           # Custom subdomain (paid)

# ===== NETLIFY CLI =====
npm install -g netlify-cli                  # Install
netlify login                               # Authenticate
netlify deploy                              # Deploy draft
netlify deploy --prod                       # Deploy production

# ===== VERCEL CLI =====
npm install -g vercel                       # Install
vercel login                                # Authenticate
vercel                                      # Deploy
vercel --prod                               # Deploy production

# ===== GIT COMMANDS =====
git add .                                   # Stage all files
git commit -m "message"                     # Commit
git push origin main                        # Push to GitHub

🚀 Ready to Deploy?

You now have all the knowledge to host any website - from simple portfolios to complex web applications!

Learn Django Development