Vibe Coding · Урок

Развёртывание в Vercel или Netlify

Развертывание на хостинге одним нажатием с помощью искусственного интеллекта.

«Развёртывание в Vercel или Netlify» — бесплатный урок Vibe Coding на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vibe Coding, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vibe Coding содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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 dist or build.

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.

Часто задаваемые вопросы

Урок «Развёртывание в Vercel или Netlify» бесплатный?

Да — полный текст урока «Развёртывание в Vercel или Netlify» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vibe Coding, подпишись на CoddyKit PRO. Курс Vibe Coding содержит 4 уроков всего.

Чему я научусь в уроке «Развёртывание в Vercel или Netlify»?

Развертывание на хостинге одним нажатием с помощью искусственного интеллекта. Ты практикуешь Vibe Coding с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Vibe Coding?

Предыдущий опыт не требуется. Vibe Coding на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Развёртывание в Vercel или Netlify»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Vibe Coding?

Да. Каждый урок Vibe Coding включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Vibe Coding