🧑‍💻 Как я собрал сайт с помощью Codex

Как я собрал сайт с помощью Codex

Продолжаю делиться новостями, как проходит моё обучение нейросетям.

На прошлой неделе я вплотную занялся вайбкодингом. Для практики выбрал реальную задачу — создать лендинг для своих консалтинговых услуг.

Раньше у меня была страница на Taplink, но меня не устраивали дизайн, функциональность и ежемесячная плата. Поэтому решил сделать собственный сайт с помощью Codex от OpenAI.

Почему Codex? По моим ощущениям, для таких задач он почти не уступает Claude, но обходится дешевле $20 в месяц.

Пошаговый процесс для новичков

1️⃣ Нашёл сайты, которые понравились мне по структуре и дизайну.

2️⃣ Подготовил тексты, фотографии и ссылки. Передал всё Codex вместе с референсами.

3️⃣ Примерно через 15 минут получил первую версию сайта, которую уже можно было публиковать.

4️⃣ Затем доработал её через чат: изменил тексты и заголовки, удалил лишние блоки, скорректировал дизайн.

5️⃣ Попросил адаптировать вёрстку под компьютеры, планшеты и смартфоны.

6️⃣ Создал репозиторий на GitHub и загрузил туда проект. После авторизации Codex может делать это самостоятельно.

7️⃣ Зарегистрировался на Vercel, подключил GitHub и импортировал проект. Теперь после каждого изменения кода сайт автоматически обновляется.

8️⃣ Купил домен на Beget. В моём случае он стоил дешевле, чем на Рег.ру.

9️⃣ Подключил домен к Vercel и настроил DNS-записи, которые связывают домен с хостингом. Через некоторое время сайт стал доступен в интернете. Перед публикацией также стоит проверить: — мобильную версию; — кнопки и ссылки; — формы обратной связи; — корректность текстов; — работу HTTPS.

Продвинутый уровень

🔟 Проверил сайт через Page Speed Insight и получил отчёт о скорости загрузки.

1️⃣1️⃣ Передал рекомендации Codex. Он оптимизировал код, изображения и загрузку страницы. После этого сайт стал заметно быстрее открываться на старых телефонах.

1️⃣2️⃣ Попросил провести базовую SEO-оптимизацию: — настроить заголовки и описания страниц; — улучшить структуру текстов; — добавить описания изображений; — создать robots.txt; — создать карту сайта.

Дополнительно стоит подключить аналитику, Google Search Console и отправить карту сайта на индексацию.

В первый раз весь путь занял у меня около 8 часов. Любые изменения на готовом сайте занимают 1–5 минут. Даже если я решу полностью изменить дизайн, достаточно описать задачу в чате. Codex обновит код, а Vercel автоматически опубликует новую версию.

Результат можно посмотреть на картинках выше Шрифт и иконки Codex подбирал сам.

Хотите повторить этот путь — рекомендую курс по вайбкодингу. Там всё то же самое, но с подробными видеоинструкциями: [ссылка на курс]

🎁 Скидка 10% по промокоду: ИРЕШЕВ