How a Website Actually Works — The Garden’s Journey

Ever type a URL and wonder what really happens? Let’s follow your browser’s journey when you visit https://garden.christianjeremia.com — explained like you’re five. 🧒

The Big Picture

You type: garden.christianjeremia.com

    ①  Phone Book (DNS)
    ②  Security Check (SSL)
    ③  The Doorman (Caddy)
    ④  The Server (Nginx)
    ⑤  The House (VPS)

You see: A beautiful garden page 🌻

Each step has a job. Let’s dive into each one.

① DNS — The Phone Book of the Internet ☎️

What is it?

DNS stands for Domain Name System. Think of it as the phone book of the internet.

Real world	Internet world
You want to call “Pizza Hut”	You want to visit “garden.christianjeremia.com”
You look up their number	Your computer looks up their IP address
You dial the number	Your browser connects to the IP address
”Hello, Pizza Hut!"	"Hello, server!”

Every computer on the internet has a number (IP address) like 43.133.130.60. But humans are bad at remembering numbers — we’re good at remembering names like garden.christianjeremia.com. DNS is the system that translates names to numbers.

How it happens (simplified)

Your browser: "Where is garden.christianjeremia.com?"
     ↓
Your phone/ISP: "Let me ask the internet phone book..."
     ↓
Cloudflare (our DNS provider): "It's at 43.133.130.60"
     ↓
Your browser: "Got it! Now I'll visit 43.133.130.60"

Who pays for this?

Nobody! DNS is free. You pay for the domain name (christianjeremia.com) — about $7.85/year to Cloudflare — and they give you free DNS management.

Why Cloudflare DNS?

Cloudflare is our phone book operator. When you bought christianjeremia.com, Cloudflare said “great, you can manage all the subdomains here”:

Subdomain	What it points to
`garden.christianjeremia.com`	→ Your VPS (IP: 43.133.130.60)
`christianjeremia.com`	→ Vercel (portfolio)

② SSL — The Security Guard 🔒

What is it?

SSL stands for Secure Sockets Layer (okay, actually it’s TLS now, but everyone says SSL). It’s the padlock 🔒 you see in your browser bar.

What does it do?

Two things:

Encryption — Scrambles the data so no one can read it
Identity proof — Proves the website is who it says it is

Without SSL

You: "Hi, I want to read the garden!"
     ↓
Hacker: "I'm the garden, trust me! Here's a fake page."
     ↓
You: "Looks real enough..." 😱 (hacker steals your data)

With SSL

You: "Hi, I want to read the garden!"
     ↓
Garden: "Here's my ID card signed by Cloudflare. 
         You can trust me. Let's speak in secret code."
     ↓
You & Garden: Chat in encrypted language that only you two understand 🤝

How Cloudflare handles it for us

In our setup, Cloudflare does the SSL work. The conversation goes:

You ──HTTPS (encrypted)──→ Cloudflare ──HTTP (plain)──→ Your VPS

Your browser talks to Cloudflare securely. Cloudflare talks to your VPS in plain HTTP. This is called SSL Termination — Cloudflare handles the hard crypto work so your VPS doesn’t have to.

We set Cloudflare to Flexible mode, which means:

✅ You get the green padlock
✅ Your VPS doesn’t need to handle SSL
⚠️ The last mile (Cloudflare → VPS) is unencrypted (but it’s fine for a static garden with no passwords!)

③ Caddy — The Doorman 🚪

What is it?

Caddy is a reverse proxy. Fancy term. But really, it’s a doorman for your server.

Analogy: An Apartment Building

Imagine your VPS is an apartment building at 43.133.130.60:

43.133.130.60 (Apartment Building)
├── 🚪 Door 8080 → 🏗️ Nginx lives here (the gardener)
└── 🚪 Door 80   → 🚪 Caddy lives here (the doorman)

Without Caddy, visitors would have to know the specific door number: http://43.133.130.60:8080. Ugly, right?

Caddy stands at Door 80 (the main entrance) and says:

Visitor at Door 80: "I'm here for the garden!"
Caddy: "Ah, garden.christianjeremia.com! Let me send you to 
        Room 8080 where Nginx is."

Visitor at Door 80: "I'm here for /"
Caddy: "The garden's entrance is at /notes/index. Follow me!"
Caddy sends them to: /notes/index (clean, no port number!)

What Caddy solves

Before Caddy	After Caddy
`http://43.133.130.60:8080`	`https://garden.christianjeremia.com`
Port `:8080` visible in URL	No port visible
Ugly redirect: `http://...:8080/notes/index`	Clean redirect: `/notes/index`
Direct IP access	Domain-based routing

Caddy’s actual config

http://garden.christianjeremia.com {
    redir / /notes/index 301
    reverse_proxy localhost:8080
}

Translation:

“When someone visits garden.christianjeremia.com/, tell them to go to /notes/index instead”
“For everything else, hand it off to the program at localhost:8080 (which is Nginx)“

④ Nginx — The Server 🏗️

What is it?

Nginx (pronounced “Engine-X”) is a web server. It’s the actual librarian that finds the right book (file) and hands it to the visitor.

Analogy: A Library

Visitor: "I want to read /notes/what-is-nginx"
     ↓
Caddy (doorman): "Go to room 8080, Nginx will help you"
     ↓
Nginx (librarian): "Let me find that book..."

Nginx looks:
  1. Is there a file called `/notes/what-is-nginx`? ❌
  2. Is there a file called `/notes/what-is-nginx.html`? ✅ Found it!
  
Nginx: "Here you go!" 📖

Why Nginx and not just Caddy?

Caddy is great at being a doorman (routing, redirects, SSL). But Nginx is lightning fast at serving static files. The split is:

Caddy	Nginx
Routes visitors to the right place	Serves the actual files
Handles redirects	Serves HTML, CSS, JS, images
Talks to the outside world	Stays in the back, only talks to Caddy
1 job: welcome + redirect	1 job: serve files fast

The try_files trick — Clean URLs

This is where the magic of clean URLs happens:

try_files $uri $uri.html $uri/ =404;

When you visit /notes/what-is-nginx, Nginx:

Tries /notes/what-is-nginx → not a file
Tries /notes/what-is-nginx.html → found it! ✅
(Would try /notes/what-is-nginx/ directory if #2 failed)
(Would show “404 Not Found” if all failed)

This is why you can type garden.christianjeremia.com/notes/what-is-nginx without the .html — Nginx figures it out for you.

⑤ VPS — The House 🏠

What is it?

VPS stands for Virtual Private Server. It’s a computer in a data center that’s always on, always connected to the internet.

Analogy: Renting a Room

Your laptop                        VPS
┌──────────┐                  ┌──────────────┐
│ You write │                  │ Always-on    │
│ notes here│                  │ computer in  │
│ (Obsidian)│                  │ Singapore    │
└──────────┘                  └──────────────┘
     │                              │
     │ Git push/pull                 │ Serves files
     ▼                              ▼
GitHub ─────── sync ──────→ VPS

Your laptop is like a phone — you turn it on/off, carry it around. The VPS is like a house — it’s always there, always ready.

What’s inside our VPS?

VPS (Tencent Cloud, Singapore, 2GB RAM)
├── 📁 /home/ubuntu/obsidian-vault/   → Raw notes (markdown files)
├── 📁 /home/ubuntu/quartz-site/      → Quartz builder
├── 📁 /home/ubuntu/quartz-site/public/ → Built website (HTML files)
├── 🚪 Caddy (port 80)                → Doorman
├── 🏗️ Nginx (port 8080)             → Librarian
├── 🤖 Hermes Agent (Jeri)            → AI assistant
└── 🗄️ Git                            → Sync with GitHub

How data flows from VPS to you

                  Internet
VPS ─────────────────────────────────────→ Your Browser
 │                                            │
 │ Built HTML files                           │ Shows the page
 │ (inside /public/)                          │ Renders CSS
 │                                            │ Runs JavaScript
 │                                            │ Displays images

The VPS doesn’t “send” data actively — it waits for someone to ask. When your browser asks “give me /notes/index”, the VPS says “here you go!” and sends the file.

The Full Journey — From Start to Finish 🎬

Let’s trace every step when you visit https://garden.christianjeremia.com:

Step 0: You type "garden.christianjeremia.com" in your browser
         and press Enter.
         
Step 1: 📖 DNS Lookup
         Your browser: "Who is garden.christianjeremia.com?"
         Cloudflare: "It's at IP 43.133.130.60"

Step 2: 🔒 SSL Handshake
         Your browser: "Hello, I'd like a secure connection"
         Cloudflare: "Here's my certificate. We're safe now."
         (Your browser & Cloudflare create an encrypted tunnel)

Step 3: 🌩️ Cloudflare processing
         Cloudflare receives your HTTPS request.
         Cloudflare: "Hmm, this is for the garden. 
                      Let me forward it to the VPS."
         Cloudflare decrypts your request, then sends it
         as plain HTTP to your VPS on port 80.

Step 4: 🚪 Caddy (The Doorman)
         Caddy on port 80 receives: "GET /"
         Caddy: "Root request? Let me redirect you to /notes/index"
         Caddy sends back: "Go to /notes/index instead"
         (This redirect is RELATIVE — no port number!)

Step 5: 🔄 Browser follows redirect
         Your browser: "OK, I'll go to /notes/index instead"
         Same DNS → Same SSL → Same Cloudflare → Same Caddy

Step 6: 🚪 Caddy (Again)
         Caddy on port 80 receives: "GET /notes/index"
         Caddy: "Not a root request. I'll pass this to Nginx."
         Caddy forwards to localhost:8080

Step 7: 🏗️ Nginx (The Librarian)
         Nginx on port 8080 receives: "GET /notes/index"
         Nginx: "Let me find that file..."
                  1. /notes/index → not a file
                  2. /notes/index.html → FOUND! ✅
         Nginx reads the file and sends it back.

Step 8: 📤 Response goes back
         Nginx → Caddy → Cloudflare → Your Browser

Step 9: 🎉 Your browser renders the page
         The HTML tells your browser:
         - "Load these CSS files" → makes it pretty
         - "Load this JavaScript" → makes it interactive
         - "Show this text" → the actual content
         - "Load these images" → pictures and icons

Step 10: You see:
         🧠 Second Brain — Digital Garden
         "Welcome to the digital garden..."
         
         ✨ Done in about 0.3-1 second!

Summary Table

Layer	Name	Job	Analogy
①	DNS (Cloudflare)	Translates domain → IP	Phone book 📖
②	SSL (Cloudflare)	Encrypts your connection	Security guard 🔒
③	Reverse Proxy (Caddy)	Routes visitors, handles redirects	Doorman 🚪
④	Web Server (Nginx)	Finds and serves files	Librarian 🏗️
⑤	VPS (Tencent)	The actual computer that runs everything	The house 🏠

Why So Many Layers?

Good question! Why not just use one program for everything?

One giant program	Multiple small programs
Does everything, but nothing great	Each does one job perfectly
If it breaks, EVERYTHING breaks	If one breaks, others still work
Hard to upgrade	Can upgrade individually
In our case: hard to get clean URLs	Caddy cleans URLs, Nginx serves fast

It’s like having separate tools in a toolbox:

A hammer for nails 🔨
A screwdriver for screws 🪛
A saw for wood 🪚

You could hammer a screw, but it’s better to use the right tool for each job.

What is Nginx — More detail about our web server
Garden Domain & HTTPS Setup — How the domain was configured
How Hermes Agent Works — The Engine Behind Jeri — The AI helping run all this

📁 Back to Notes

Made with 🧒 explanations — questions? Ask Jeri!

🧠 Second Brain — Digital Garden

Explorer

How a Website Actually Works — The Garden’s Journey

The Big Picture

① DNS — The Phone Book of the Internet ☎️

What is it?

How it happens (simplified)

Who pays for this?

Why Cloudflare DNS?

② SSL — The Security Guard 🔒

What is it?

What does it do?

Without SSL

With SSL

How Cloudflare handles it for us

③ Caddy — The Doorman 🚪

What is it?

Analogy: An Apartment Building

What Caddy solves

Caddy’s actual config

④ Nginx — The Server 🏗️

What is it?

Analogy: A Library

Why Nginx and not just Caddy?

The try_files trick — Clean URLs

⑤ VPS — The House 🏠

What is it?

Analogy: Renting a Room

What’s inside our VPS?

How data flows from VPS to you

The Full Journey — From Start to Finish 🎬

Summary Table

Why So Many Layers?

Graph View

Table of Contents

🧠 Second Brain — Digital Garden

Explorer

How a Website Actually Works — The Garden’s Journey

The Big Picture

① DNS — The Phone Book of the Internet ☎️

What is it?

How it happens (simplified)

Who pays for this?

Why Cloudflare DNS?

② SSL — The Security Guard 🔒

What is it?

What does it do?

Without SSL

With SSL

How Cloudflare handles it for us

③ Caddy — The Doorman 🚪

What is it?

Analogy: An Apartment Building

What Caddy solves

Caddy’s actual config

④ Nginx — The Server 🏗️

What is it?

Analogy: A Library

Why Nginx and not just Caddy?

The try_files trick — Clean URLs

⑤ VPS — The House 🏠

What is it?

Analogy: Renting a Room

What’s inside our VPS?

How data flows from VPS to you

The Full Journey — From Start to Finish 🎬

Summary Table

Why So Many Layers?

Related

Graph View

Table of Contents