Learn to build and deploy real websites using free AI tools. No coding knowledge needed. Start earning from day one.
Workshop by FirmandanaLook around you. Every warung, laundry shop, bakery, photo studio, and local business needs an online presence. Most of them don't have one — because they think it's expensive and complicated.
Here's the truth: it's neither.
That's what you can charge for a single landing page website.
You don't need an IT degree. You don't need to know how to code. AI writes the code — you direct it. You tell the AI what you want, it builds it, and you deploy it to the internet.
This guide will teach you exactly how — from absolute zero.
A website is just files. That's it. Like Word documents or photos on your laptop — but these files are written in a language called HTML and CSS that browsers (Chrome, Firefox) can read and display.
Here's how it works:
You create the files. You put them on a server (a computer that's on 24/7). Anyone in the world can then visit your website from their phone or laptop.
What you'll build today: those files. The AI will write them for you based on your instructions.
You'll work in two completely separate "worlds." Master them one at a time.
This is where you design and create your website. You use Antigravity (your code editor) and Gemini CLI (your AI assistant). Everything happens on your own laptop. No internet needed for creation. No server needed. Pure creativity.
This is where you'll spend most of your time.
When your website looks good, you send the files to a server so anyone on the internet can see it. You use Tailscale (secure network) and SSH (remote control) to connect.
Here's every tool you'll use. Each one has a specific job — like members of a team.
| Tool | Think of it as... | What it does |
|---|---|---|
| Antigravity | Your workshop / home base | Code editor, terminal, and browser preview — all in one window. This is where all your work happens. |
| Gemini CLI | A free personal programmer | You describe what you want in plain language, it writes the code. Speaks Indonesian. |
| Terminal | Text chat with your computer | Like WhatsApp, but with a machine. How you talk to servers (they have no screen or mouse). |
| SSH | Remote control via text | Log into the server from your laptop, from anywhere in the world. |
| nginx | A restaurant waiter | When a visitor arrives, nginx serves your website to them. Runs on the server. |
| Tailscale | A secret tunnel to the server | Connects your laptop to the server securely, from home, a cafe, or anywhere. |
| Node.js | Fuel for Gemini CLI | Gemini CLI needs Node.js to run — like a car needs gasoline. Not optional. |
| Server (VM) | A computer that never sleeps | Your website lives here so it's accessible 24/7, even when your laptop is off. |
Don't worry about memorizing all of this. You'll get to know each tool one by one as you use them.
Your server runs Linux — an operating system, like Windows on your laptop, but designed for servers.
Linux comes in many "flavors" called distributions (distros). Think of Android: Samsung, Xiaomi, and Oppo all run Android but look different. Linux has Debian, Ubuntu, Fedora — all Linux, different features.
Debian is one of the oldest and most stable Linux distros. It rarely breaks, runs on small servers, and is free forever. That's exactly what we need.
| Distro | Strengths | Why not? |
|---|---|---|
| Debian ✓ | Most stable, lightweight, free | This is our choice |
| Ubuntu | Popular, many tutorials | Heavier, unnecessary extras |
| Alpine | Extremely lightweight | Too minimal, hard to troubleshoot |
| CentOS/Rocky | Enterprise standard | Overkill for a single website |
You don't need to become a Linux expert. Just know: server = Linux = totally normal.
Antigravity is your home base — the place where all your work begins. It's a free, professional code editor made by Google with built-in AI capabilities.
You'll see a window with three main areas:
Gemini CLI is your AI coding assistant. But first, it needs Node.js to run — like a car needs fuel.
node --versionIf you see a version number (like v20.x.x), it's working.
npm install -g @google/gemini-cligeminiTailscale creates a secure tunnel between your laptop and the server — so you can connect from anywhere.
Once installed, your laptop can "see" the server from anywhere — home, school, a cafe. The connection is encrypted and secure.
Now you'll connect to the server for the first time using SSH — remote control via text.
Open the terminal in Antigravity and type:
ssh [your-username]@[server-address][your-username] and [server-address] with the values your teacher provides.yes and press Enter. This only happens once.
If successful, you'll see the server's command prompt. Congratulations — you're inside the server!
Type exit to disconnect and return to your laptop's terminal.
You now have a "friend" who knows everything about coding — and never gets annoyed, never gets tired, and is always happy to help.
Open the terminal in Antigravity (make sure you're on your laptop, not the server) and type:
geminiGemini is now active! Try saying hello:
Tell me a joke about computersTry a few more things:
This isn't Google Search — this is a conversation. It remembers what you said earlier and you can ask follow-up questions.
To exit Gemini: type /quit or press Ctrl+C
Gemini CLI isn't just a chatbot — it can create and edit files directly on your laptop.
When you ask Gemini to create something, it shows you a preview and asks for permission:
📝 WriteFile: ~/website/index.html
┌─────────────────────────────
│ + <!DOCTYPE html>
│ + <html lang="id">
│ + <head>
│ + <title>My Website</title>
│ + ...
└─────────────────────────────
Allow? [y/N] y
✓ File written.See the [y/N]? That's Gemini asking your permission. Press y then Enter to approve.
y to approve — you don't need to understand the code, just approve it/quit to exit — or Ctrl+C! prefix — for direct commands to your computer (e.g., !ls to list files)Now the fun part. Before you tell the AI to build anything, you need to decide: what should this website feel like?
AI can write the code. But only YOU know what mood fits your client's business. That's your human value — creative direction.
Choose one of these four themes:
Brown and cream tones. Like a cozy village shop. Feels familiar and trustworthy.
Blue and white tones. Neat, professional, and reliable.
Bright, cheerful colors. Eye-catching and energetic.
Green, earthy tones. Calm, natural, and refreshing.
Remember your choice — you'll use it in the next step.
Open Gemini CLI in Antigravity's terminal (type gemini if it's not running). Then copy the prompt below, replace the parts in [brackets] with your choice, and paste it:
I want to create a landing page with a [warm and traditional / modern and clean / fun and colorful / fresh and natural] feel. Main colors: [brown cream / blue white / bright yellow / natural green]. Use emoji and CSS for decoration — no image files. Everything in a single HTML file with inline CSS, responsive for mobile.
Example (if you picked "Modern & Clean"):
I want to create a landing page with a modern and clean feel. Main colors: blue and white. Use emoji and CSS for decoration — no image files. Everything in a single HTML file with inline CSS, responsive for mobile.Press Enter. Gemini will start creating your website's design foundation. When you see [y/N], press y to approve.
Don't close anything yet — the next step adds the actual business details.
Now give Gemini the actual information for the website. Copy this, fill in the details, and send it:
Now build the landing page as index.html: - Business name: [name, e.g., Kue Mama Ria] - Type: [bakery / laundry / photo studio / food stall / etc.] - Short description: [one sentence about the business] - WhatsApp: [number, e.g., 08123456789] - Address: [full address] - Open hours: [e.g., Monday-Saturday, 08:00-17:00]
Example (filled in):
Now build the landing page as index.html:
- Business name: Kue Mama Ria
- Type: bakery
- Short description: Homemade cakes and cookies, fresh daily since 2015
- WhatsApp: 081234567890
- Address: Jl. Merdeka No. 42, Bandung
- Open hours: Monday-Saturday, 08:00-17:00Gemini creates your index.html file. Press y to approve. The file now exists on your laptop!
Look at Antigravity's file explorer on the left. You should see a new file: index.html
index.html in the file explorerAI wrote the code, but the idea, the direction, the business details — that was all you.
It might not be perfect yet. That's fine — the next step is making it exactly what you want.
Your website is built, but you want changes? Just ask. Tell Gemini what you want changed, one thing at a time.
Try any of these (copy and paste):
Change the background color to light blueAdd a testimonials section with 3 customer reviewsMake the title text biggerAdd a WhatsApp button that opens a chat when clickedMake the theme more elegant and professionalAdd an opening hours sectionAsk for a change → Approve it → Preview → Like it? Move on. Not quite? Ask again.
Repeat as many times as you want. There's no limit. Gemini doesn't get bored.
Open a new terminal tab in Antigravity (don't close Gemini — you might need it later). Then copy your website file to the server:
scp index.html [your-username]@[server-address]:~/website/What just happened? The scp command (Secure Copy) sent your index.html file from your laptop to the server's ~/website/ folder. Like sending a file via email — but directly to the computer.
If it asks for a password, type it (remember: the password is invisible — that's normal).
Your file is on the server. Now activate it.
ssh [your-username]@[server-address]bash ~/deploy.shThis script copies your website files to nginx's serving directory — and it goes live instantly.
Open your browser and visit the server's public URL (your teacher will share this).
Anyone in the world can visit it right now. This is real.
You have a real skill now. Time to use it.
Look around your neighborhood. Local businesses that don't have a website yet:
| Service | Price Range | Notes |
|---|---|---|
| Single-page landing page | Rp 200,000 – 500,000 | What you learned today |
| Revisions / updates | Rp 50,000 – 100,000 | Quick changes via Gemini |
Even Rp 200,000 is a fair price — your client gets a professional, mobile-friendly website that's live on the internet with a short link they can print on their business card.
Open Gemini CLI, describe what they want, approve the changes, re-upload. Done. Revisions are fast because the AI does the coding.
Today you're at Level 1. That's already enough to earn money. But here's what's ahead if you keep learning:
Single-page websites for local businesses. Tools: Gemini CLI + HTML/CSS
Rp 200k – 500k per project
Multiple pages + contact forms + photo galleries. Tools: HTML/CSS/JavaScript
Rp 500k – 1 million per project
Clients can edit their own content. Tools: WordPress or similar. Recurring maintenance income.
Rp 1 – 3 million + monthly maintenance
Login systems, databases, custom features. Tools: React, Next.js, databases
Rp 3 – 10+ million per project
Full professional developer. Modern frameworks + cloud deployment. Career-level skill.
Salary Rp 5 – 15+ million/month
You don't have to reach Level 5. Level 1 alone is already a real, usable skill that earns real money. But the path is there if you want it.
Here's what stays with you after today:
You don't need anyone's permission to build your next website. Open your laptop, open Antigravity, start Gemini, and create.
You did that today. That's not small. Keep going.
AI Website Spawn — Workshop by Firmandana