Запускаем сайт за 5 минут

Зачем: В этом гайде ты подготовишь основу для работы над своим первым сайтом и научишься открывать его в браузере. Не волнуйся, Claude тебе в этом сильно поможет!

Требуется: Пройти гайды — установка VPN, установка Claude Code (macOS, Windows), установка Warp Terminal.

0. Установи Node.js

Node.js — это программа, которая позволяет запускать сайты на твоём компьютере. Без неё проект не заработает.

Шаг 1. Открой в браузере nodejs.org/en/download

Шаг 2. На macOS нажми на кнопку macOS Installer (.pkg)

На Windows выбери Windows Installer (.msi)

Шаг 3. Открой скачанный файл и пройди установщик:

• macOS: Нажимай Продолжить → Продолжить → Принять → Установить → введи пароль → Готово
• Windows: Нажимай Next → галочка I accept → Next → Next → Next → Install → Finish

Готово! Теперь можно создавать проект.

1. Создай папку для проекта

Твой проект должен где-то храниться. На Рабочем столе создай новую папку — кликни правой кнопкой мыши → Новая папка (на Windows: Создать → Папку).

Назови её, например: my-site

2. Открой терминал

В гайде мы будем пользоваться терминалом Warp.

• macOS: Нажми Cmd + Пробел, напиши Warp, нажми Enter
• Windows: Нажми Win, напиши Warp, нажми Enter

Откроется окно терминала.

3. Открой папку проекта

Нажми на Open repository. Найди свою папку на рабочем столе и выбери ее.

В верхнем углу поля ввода ты увидишь название своего проекта. Теперь ты готов приступать к работе с Claude.

4. Запусти Claude

Напиши:

claude

При первом использовании Claude в новой папке он спросит разрешение на работу внутри нее. Нажми Enter.

Claude запустится и поздоровается с тобой. Теперь можно давать ему задания!

5. Создай проект

Для создания сайтов мы будем использовать популярный инструмент Next.js. Тебе не нужно в нём разбираться — Claude отлично знает Next.js и сделает всю техническую работу за тебя.

Напиши Claude:

Создай проект Next.js в текущей папке. Автоматически выбери все настройки.

Claude спросит разрешение на выполнение команды. Нажми Enter.

Claude выполнит команду и создаст проект. Подожди пару минут — установятся все нужные файлы.

После установки Claude сообщит, что проект успешно инициализирован.

Отлично! Ты только что настроил свой первый проект!

6. Запусти сайт

Мы занимались настройкой проекта — но на самом деле у нас уже есть готовый сайт! Чтобы его увидеть, нужно запустить локальный сервер (его ещё называют dev-сервер) — он откроет сайт в браузере.

Напиши Claude:

Запусти сайт

Снова нажми Enter, когда Claude спросит разрешение на запуск команды. После этого Claude сообщит, по какой ссылке доступен сайт.

Зажми Cmd (на Windows: Ctrl) и кликни по ссылке, или скопируй её и вставь в адресную строку браузера. Откроется стартовая страница Next.js — шаблон, который ты будешь менять под себя.

Это твоя личная песочница: локальный сервер превращает папку с кодом в работающий сайт прямо у тебя на компьютере. Если меняется код — страница сама обновляется! Сайт виден только тебе — чтобы другие люди его увидели, нужно будет задеплоить (опубликовать) его в интернет.

Готово!

Поздравляю, ты успешно создал свой первый проект и открыл сайт в браузере! Это отличная отправная точка.