Deploy to the World — Turn a Prototype Into a Real Service in 30 Minutes

OUTCOME — What you'll have afterward

Following this tutorial leaves you with three things.

What gets built

• One real URL reachable from anywhere on the internet (e.g., my-first-app.vercel.app)
• Your actual service running at that URL — sign-up, sign-in, saved data included
• One completed redeploy loop for when you inevitably want to change something

📖 Term: What does "deploy" mean? "Deploy" comes from the military — sending troops into the field. In software, it means pushing something off your local machine onto the public internet so anyone can reach it. If you imagine the service you just built as a restaurant you finished decorating, deploying is the moment you hang the sign and flip it to "OPEN." Without that step, no customer can walk in, no matter how beautiful the interior.

Tutorial metadata

Item	Value
Time	30 min (fast: 15, unhurried: 45)
Level	Beginner
Tools	Web browser + Google or GitHub account
Coding knowledge	None required
Terminal	None (everything in the browser)
Payment	None — free hosting covers it

Why this matters — an unshipped service doesn't exist

No matter how wonderful your service looks inside the app builder, if you don't deploy it, the world has no way to know it exists. Only you can use it. To show a friend, you have to record your screen. You can't gather feedback. You can't see how real users behave. Thirty minutes of deployment turns you from "someone with an idea" into "someone running a service." That shift matters enormously when you later talk to investors, partners, or customers. The label you wear in those conversations changes.

Where you are now: you've confirmed what this tutorial produces. Next we check the prerequisites.

---

PREREQUISITES — What you need

Just three things.

Required

• One service to deploy: a prototype built in an app builder (Lovable / Bolt / v0.dev / Replit) or an HTML file pulled out of Claude Artifacts. If you have neither, use Plan B below
• A web browser: Chrome, Safari, Firefox, or Edge — any current version
• A Google or GitHub account: Vercel, Netlify, and Cloudflare Pages all let you sign up with either, in about a minute

Not required

• Credit card (free hosting covers everything)
• Buying a domain (start with a free .vercel.app subdomain)
• Coding skill, terminal usage, Git commands

📖 Term: What is hosting? Hosting is renting the "computer" that runs your service. Years ago you had to buy a server, put it in your house, and keep it on 24/7. Today companies like Vercel and Netlify run those computers for you, and you just upload files. Think of it as renting a studio apartment instead of building your own house — except the rent is zero. A personal project with modest traffic stays free forever.

Plan B — if you don't yet have something to deploy

You can build a simple landing page in Claude Artifacts in two minutes. Open Claude.ai and send this prompt:

Make a single-page personal landing site as one HTML file.
Include my name, a one-line bio, three projects I'm working on, and a contact email.
Design should be minimal and clean, in dark mode.

When the result comes back, copy the code into a file named index.html. That's what you'll deploy in this tutorial.

Environment check (1 min)

Type these two addresses into your browser in turn and make sure both load:

• vercel.com
• netlify.com

If both load normally, you're ready.

Where you are now: you have a file (or app-builder project), a browser, and a sign-in account. Next a short WHY section frames why "deploy before it's perfect" is the correct move.

---

WHY — Why deploy right now

This sounds counterintuitive. "Is it okay to release something half-finished?" The question is natural. The answer is yes, and you should do it now. Three reasons.

Reason 1 — An unshipped service can't get feedback.

You can't polish to perfection alone. There are always blind spots you can't see and usage patterns you can't imagine. When I shipped my memo app and sent a friend the link, he used it in a way I hadn't anticipated — not short one-liners, but long journal-style entries. That's the moment I discovered the "memo doesn't fit on one screen" problem. I couldn't have seen it by myself, because alone I only wrote short things. Feedback exists only after you release.

Reason 2 — "Deploy when it's perfect" never comes.

I've watched this pattern play out countless times with students. "The design isn't quite right yet." "One more bug to fix first." "After I add one more feature." After those sentences, the project usually never ships. Because the standard called "perfect" moves. Fix one issue and two new ones become visible. Fix two and four appear. The illusion of perfection only survives while you don't ship. Once you ship, the bar drops to reality — either "okay this is enough for now" or "I see exactly what to fix next."

An unshipped service doesn't exist. Deployment is the start of existence, not its reward.

Reason 3 — Deployment itself is the training.

At first deployment looks huge. You worry one wrong button will break everything. Unfamiliar terms — domain, DNS, SSL — make you shrink. The first deploy is the scariest. But once you've done it once, every subsequent deploy is a five-minute routine. The hidden goal of this tutorial is to change your perception from "deployment is hard" to "deployment is a five-minute routine." That shift is worth more than any specific service you ship today.

Where you are now: you understand why "deploy now" beats "deploy when perfect." Next we actually do it, in three steps, 20–30 minutes total.

---

STEPS — Three-stage deployment

Step 1. Pick a deployment platform (3 min)

There are five main free hosting platforms. They differ in minor ways. If you have no preference, start with Vercel. It's the most popular, the UI is the most intuitive, and tutorials (in English and Korean) are most abundant.

Platform	Strength	Recommended primary use
Vercel	Most popular, intuitive UI, fast	First deploy, Next.js apps, landing pages
Netlify	Strongest drag-and-drop flow	Dropping a single HTML file in
Cloudflare Pages	Largest free tier limits	High-traffic projects
GitHub Pages	Integrated with GitHub	If you already use GitHub daily
Deno Deploy	Serverless edge, instant sign-up deploy	Deno / TypeScript backends

These five share three things. All start free, sign-up takes one click (Google or GitHub), and after deploy you get a unique URL. Their differences only start mattering at pro scale, which isn't this tutorial.

📖 2026 update — one-click deploy from AI builders AI app builders now connect directly to hosting platforms. UIs built in v0.dev deploy to Vercel in one click — no GitHub required. Apps built in bolt.new deploy to Netlify in one click. In these cases you don't need Step 2 Path A separately; the "Deploy" button inside the builder handles everything end to end.

📖 Term: Subdomain vs custom domain After deploying, you'll get an address like my-first-app.vercel.app. The vercel.app part is Vercel's own domain, and the my-first-app part in front is your subdomain. It's like living in "Apt 101" of a building Vercel owns. Later if you buy a custom domain like myapp.com, you own the whole building. Buying a domain costs about $10–15 per year, but a free subdomain is plenty for this tutorial. Worry about custom domains only once you have real users.

The choice isn't permanent. In two weeks if another platform tempts you, upload the same files there too. For now, pick one.

Step 2. Deploy — two paths

Which path you take depends on what you're deploying. Pick one.

Path A — Deploying an app-builder project (Lovable / Bolt / v0.dev / Replit)

Most app builders already have "Publish" or "Deploy" built in. Using the builder's own deploy means no external hosting setup — it handles everything and hands you a subdomain under its brand. Notably, v0.dev connects to Vercel and bolt.new connects to Netlify with a single click, skipping the manual steps below entirely.

1. Look at the top-right of your app builder. You'll see a "Publish," "Deploy," or "Share" button
2. Click it. A few seconds to a few minutes of build work runs
3. When done, a URL appears (example: my-memo-app.lovable.app)
4. Copy that URL, paste it into a fresh browser tab, confirm it loads

The advantage of the builder's built-in deploy is that the backend comes along automatically. Database, authentication, file uploads — all ship connected and working. The tradeoff: the URL includes the builder's brand domain (lovable.app, netlify.app, etc.).

Path B — Deploying a single HTML file (Artifacts / static site)

HTML made in Artifacts, or a web page you wrote by hand, deploys to a static host via drag-and-drop.

1. Go to netlify.com → sign up with Google or GitHub (1 minute)
2. On the dashboard, click "Add new site" → "Deploy manually"
3. A dashed-line drop area appears in the middle of the screen
4. Drag the entire folder containing your index.html into it (dragging just the file alone works too)
5. Upload finishes; within 30 seconds to a minute a URL is issued (example: wonderful-newton-abc123.netlify.app)
6. Click the URL. Your page is live on the public internet

📖 Term: Static site vs dynamic site A static site serves the same HTML, CSS, and images to every visitor. Company pages, blogs, landing pages — all static. A dynamic site changes by user (logged-in views, personal memo lists) or over time. In this tutorial, Path B covers static sites, Path A (app builders) covers dynamic sites. It's normal to start with static and graduate to dynamic when you actually need sign-ins and stored data.

Tip — rename the subdomain

The URL you first get is something random like wonderful-newton-abc123.netlify.app. Vercel and Netlify both let you rename that freely.

• Netlify: Site settings → Domain management → Options → Edit site name
• Vercel: Project settings → Domains → Edit

Renaming to your name or project name makes the URL much cleaner (e.g., dykwon-memo.netlify.app).

Step 3. Edit, then redeploy (5 min)

Once the first deploy succeeds, you need to feel the "edit and redeploy" loop once. In practice, deploys don't end with the first one. You'll update your service many times.

For app-builder projects (Path A)

1. Go back to your app builder. Ask the AI for a change (e.g., "make the background a lighter grey")
2. Once the edit lands, click "Publish" again
3. The same URL gets the updated version (the URL itself doesn't change)

For static files (Path B)

1. Edit your local index.html (or grab a fresh HTML from Artifacts and overwrite)
2. In the Netlify dashboard, open the site → Deploys tab
3. At the bottom you'll see "Need to update your site? Drag and drop..."
4. Drag the updated folder into that area
5. Thirty seconds later the update is live at the same URL

Where you are now: you've actually deployed, and you've completed one edit-and-redeploy cycle. Next we confirm it truly worked.

---

VERIFICATION — What "done" looks like

All four should be "yes" before you call it complete.

1. [ ] Your service URL exists. Did you copy it somewhere (notes app)? Example: my-app.netlify.app or my-app.vercel.app
2. [ ] It loads on a different device. Open your phone, visit the same URL. Does it show the same thing your laptop showed?
3. [ ] A friend can actually reach it. Send the link to one real person. If they reply "yeah, I got in," you pass
4. [ ] You redeployed once. A small tweak (color change, single line of text) deployed successfully — yes?

If any is "no," figure out which step stalled. The most common Path A failure is "there's no Publish button" — usually the app-builder free trial has ended; switch builders or drop to Path B. The most common Path B failure is "I dragged a file but it won't show" — usually the file isn't named index.html. Rename it exactly index.html (case-insensitive).

---

VARIATIONS — When the situation differs

Variation 1 — Connecting a custom domain

If you want myapp.com instead of my-app.netlify.app, it's two steps: buy the domain, connect it. Buy at Cloudflare, Namecheap, or any registrar — typically $10–15 per year. After buying, click "Add custom domain" in Netlify or Vercel's settings and follow the DNS instructions. It propagates in 10–30 minutes. Your first service is fine on the free subdomain; think about custom domains once you pass ~100 users.

Variation 2 — Locking the site behind a password

If it's too early for the public but you want to share with a select few, use Netlify's "Password protection" (available on the free tier). Site settings → Visitor access → set a password. Visitors see a password prompt before the site. Useful for investor meetings or a small testing group.

Variation 3 — Connecting automatic deploys

Manual drag-and-drop gets old. Connect a GitHub repo instead. Put your files in a GitHub repo, click "Connect to GitHub" in Vercel or Netlify, and from that moment on every push to GitHub triggers an automatic redeploy. This takes more setup the first time but saves enormous effort afterward. It's the natural next step after this tutorial.

Variation 4 — Managing multiple projects under one account

Vercel and Netlify both let a single account host many free projects. One landing page, one memo app, one gift site for a friend — all under the same dashboard. Once the project list grows, the dashboard itself becomes your living portfolio. Each project is evidence you build and ship.

---

TROUBLE — Common stuck points

❓ My dragged file doesn't show Usually the filename isn't index.html. It must be exactly index.html — no caps, no spaces, no Korean characters. Anything else (like profile.html) isn't recognized as the main page. Rename the file or save the file as index.html.

❓ "Your site is still deploying" stays for over 5 minutes Usually a momentary server queue. Refresh in ten minutes and it's often done. If it's still stuck after 30 minutes, the folder you uploaded probably contains something oversized (multi-gigabyte videos are the usual culprit). Free tiers at Netlify and Vercel cap total site size around 100MB–1GB. Trim what you upload.

❓ Visiting the URL shows "This site can't be reached" Deploy succeeded but DNS hasn't propagated yet. Wait 5–30 minutes, try again. Could also be a cache issue — try in an incognito window, or switch to mobile LTE to test.

❓ App builder "Publish" button does nothing Most likely browser popup-blocker. Check the address bar for a popup icon and allow it. Alternatively, the app-builder free trial might have ended — check your plan status.

❓ HTTPS certificate warning appears Netlify and Vercel both auto-issue HTTPS certificates. For the first 5–10 minutes after deploy, the certificate might still be provisioning and warnings can appear. Wait — it resolves itself.

❓ Mobile layout is broken App-builder projects come responsive-ready. If you uploaded raw HTML, it needs <meta name="viewport" content="width=device-width, initial-scale=1"> inside <head>. Missing that tag causes desktop-sized layout on phones. Ask AI: "update this HTML to be mobile-responsive," then redeploy.

---

NEXT — What comes next

Thirty minutes ago you had a prototype that only lived inside the app builder. Now you're running a service reachable by anyone with the URL. That's not just a technical change. It's a status change — from "someone with an idea" to "someone running a service."

Two things to do right now.

1. Share your URL with at least one person. Family, friend, coworker — anyone. One sentence ("I built this, try it") plus the link. The first user's first reaction decides your next priority
2. Put the URL into your default introduction. Social bio, email signature, business card. When "I'm a person who..." becomes "I built this service...," how others react to you shifts completely

This tutorial is the last chapter of SPIN Part 2 — Produce. The path continues:

1. Shape — ideas, picking tools, writing prompts
2. Produce — prototyping, design, app builders, deployment ✓ (done)
3. Iterate — automation, customer response, content generation
4. Network — marketing, collaboration, monetization

The next tutorial covers automating the repetitive work that shows up once your service is running — so it keeps working while you sleep.

The first deploy is scary. Every one after takes five minutes. That's the hidden gift of this tutorial. On your next project, skip the hesitation and jump straight to Step 2. You're a person who ships now.

한 페이지짜리 개인 소개 랜딩 페이지를 HTML 한 파일로 만들어줘.
이름, 한 줄 자기소개, 하고 있는 프로젝트 3개, 연락처 이메일이 들어가게 해줘.
디자인은 깔끔한 미니멀 스타일로, 다크 모드로.