Vercel veya Netlify'a Dağıtma
Yapay zekanın yardımıyla tek tıklamayla barındırma.
Vercel veya Netlify'a Dağıtma, CoddyKit'te ücretsiz bir Vibe Coding dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vibe Coding öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vibe Coding kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Time to Go Live
You understand what deploying means. Now let's actually do it. By the end of this lesson, your app could have a real public link.
We'll use Vercel and Netlify — two of the friendliest hosts for beginners. Both can take your project and give you a live URL in minutes, often with a single click.
And the best part: AI can walk you through every step in plain English.
Two Ways to Deploy
There are two common paths to get your app onto a host:
- From Git: you connect your code repository (on GitHub), and the host auto-deploys every time you push. This is the modern, recommended way.
- Drag and drop: for simple static sites, Netlify lets you literally drag your project folder into the browser.
Git-based is the standard because it gives you automatic updates. Don't worry if Git feels new — AI can set it up for you.
Step 1: Get Your Code on GitHub
Hosts deploy from GitHub, a place that stores your code online. If your project isn't there yet, ask AI to help.
In Cursor or Claude Code, your AI assistant can run the commands for you. Just describe what you want.
My project is a folder on my laptop called "my-portfolio". It's not on GitHub yet.
Walk me through getting it onto GitHub:
1. The exact commands to create a Git repo and push it.
2. How to make a new GitHub repository.
3. Explain each command in one short sentence.
I'm a beginner — assume I've never used Git.Step 2: Connect to Vercel
Once your code is on GitHub, deploying to Vercel is almost too easy:
- Sign in to Vercel with your GitHub account.
- Click Add New Project and pick your repository.
- Vercel auto-detects your framework and settings.
- Click Deploy.
In about a minute, you get a live URL like my-portfolio.vercel.app. That's it — your app is on the internet.
Step 2 (Alt): Connect to Netlify
Prefer Netlify? The flow is nearly identical:
- Sign in to Netlify with GitHub.
- Click Add new site → Import an existing project.
- Choose your repo.
- Confirm the build settings and click Deploy.
For a plain static site (just HTML/CSS/JS), you can even skip GitHub and drag your folder onto Netlify's dashboard. Both routes end the same way: a live link.
Build Settings, Explained
During setup you may see fields like Build Command and Output Directory. These tell the host how to prepare your app.
- Build Command: what to run, often
npm run build. - Output Directory: where the finished files land, often
distorbuild.
For popular frameworks, the host fills these in automatically. If you're unsure, leave the defaults — or ask AI what your project needs.
Let AI Diagnose Build Settings
If the host can't auto-detect your project, paste your setup to AI and let it tell you exactly what to enter. This saves a lot of guessing.
Vercel is asking me for a Build Command and Output Directory, but I don't know what to put.
Here's my project:
- It's a Vite + React app
- My package.json has a "build" script
- There's a "dist" folder after building
Tell me exactly what to type in each field, and explain why.Your First Successful Deploy
When the build finishes, you'll see a green success message and a clickable link. Open it — and there's your app, live for the world.
Share that link with a friend on their phone. Seeing your project work on someone else's device is a milestone worth celebrating.
Here's a fun snippet: a tiny banner you might add to remind visitors your app just shipped.
function shipBanner(appName, liveUrl) {
return "\uD83D\uDE80 " + appName + " is now live at " + liveUrl + "!";
}
console.log(shipBanner("My Portfolio", "my-portfolio.vercel.app"));When a Deploy Fails
Sometimes a deploy fails — that's normal, not a disaster. The host shows a build log: a long message explaining what went wrong.
You don't need to read it line by line. Copy the error and hand it to AI. Debugging deploys is one of the things AI is best at.
- Find the red error in the build log.
- Copy it.
- Ask AI to explain and fix it.
Paste the Build Error to AI
Here's how to turn a scary build failure into a quick fix. Give AI the error and context about your project for the best result.
My Vercel deploy failed. Here's the error from the build log:
Error: Cannot find module 'react'
npm ERR! code ELIFECYCLE
Context:
- It's a React app that runs fine on my laptop
- I pushed it to GitHub and connected Vercel
Explain in plain English what's wrong and give me the exact steps to fix it so the deploy succeeds.Automatic Updates
Here's the magic of Git-based hosting: once connected, you never repeat this setup. Every time you push new code to GitHub, the host automatically rebuilds and redeploys.
Make a change, save it to Git, push — and seconds later your live app updates. This is continuous deployment, and it's why builders love Vercel and Netlify.
We'll explore safe updates in a later lesson. For now: deploy once, update forever.
Quick Check
You've shipped your first app. Let's lock in how it works.
Recap: You're Live
You just learned how to actually ship an app:
- Get your code on GitHub (AI can do the Git steps).
- Connect the repo to Vercel or Netlify and click Deploy.
- Build settings are usually auto-detected — ask AI if unsure.
- A failed deploy is fixable: paste the build error to AI.
- After setup, every push triggers an automatic redeploy.
Next: making your app feel professional with a custom domain and safe environment settings.
Sıkça Sorulan Sorular
“Vercel veya Netlify'a Dağıtma” dersi ücretsiz mi?
Evet — “Vercel veya Netlify'a Dağıtma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vibe Coding kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vibe Coding kursu toplamda 4 dersten oluşur.
“Vercel veya Netlify'a Dağıtma” dersinde ne öğreneceğim?
Yapay zekanın yardımıyla tek tıklamayla barındırma. Vibe Coding ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Vibe Coding öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Vibe Coding, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“Vercel veya Netlify'a Dağıtma” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Vibe Coding dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Vibe Coding dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Dağıtımın Anlamı
- Vercel veya Netlify'a Dağıtma
- Özel Alan Adları ve Ortamlar
- Canlı Uygulamayı Güncelleme