Создание сайта своими руками с нуля

Вариантов создания сайтов очень много – от написания кода в блокноте или IDE-системе до установки CMS (движка) или CMF (фреймворка с готовой админ-панелью). Но самый удобный и простой вариант для новичков и бизнеса – использование онлайн-конструкторов. Так как сайты могут быть разного типа и масштаба, рассмотрим два наиболее вероятных подхода: малостраничные сайты (лендинги, визитки, портфолио и т.п.) и многостраничные (блоги, комплексные онлайн-магазины, каталоги, доски объявлений, форумы и пр.).

Вариант 1: Лендинги и визитки для малого бизнеса в uKit

Малостраничные сайты создаются один раз и затем практически не изменяются. При этом владельцу важно знать, что сайт будет доступен круглосуточно. Только так он сможет выполнять свои основные функции: показывать контактные данные, примеры работ, место расположения офиса, пересылать заявки из форм обратной связи и т.п. На первое место выходит функционал для удобной сборки и публикации страниц.

Если у владельца нет опыта написания и редактирования HTML-кода, то оптимальным будет подход с блочными сервисами. Как раз к таким и относится конструктор сайтов uKit. Это российская платформа с безлимитным хостингом, которая позволяет собирать сайты и страницы на основе готовых виджетов и секций. Для быстрого запуска есть свыше 350 профессиональных шаблонов, а также ряд встроенных инструментов для комплексного обслуживания сайтов: бесплатные SSL-сертификаты, SEO-мастер, безлимитные уведомления, интеграции для онлайн-продаж.

Шаг 1. Регистрация аккаунта в uKit

Перейдите на ukit.com/ru и нажмите большую кнопку «Создать сайт».

Зарегистрируйтесь удобным способом: через ВКонтакте / Google / Яндекс или другие социальные сети. Если аккаунта в соцсети нет, то используйте стандартную связку: email + пароль. Электронную почту нужно будет подтвердить переходом по ссылке из письма.

Шаг 2. Выберите шаблон

Если у вас есть существующая страница во ВКонтакте, то можно воспользоваться специальным мастером. Он запускается после клика на специальной кнопке.

Если вам больше нравятся профессиональные шаблоны, то выберите макет из каталога. Тут несколько сотен вариантов. Для удобства можно воспользоваться поиском или фильтрами по категориям.

Например, мы ввели слово «Клининг».

Изучите как будет выглядеть шаблон на разных типах устройств, для этого воспользуйтесь режимом предпросмотра.

Если вас всё устраивает, нажимайте кнопку «Выбрать шаблон».

Если шаблон многостраничный — не страшно, потом просто удалите ненужные страницы и перенастроите ссылки в меню, заменив их на якорные (те, что ведут к конкретному блоку лендинга).

Шаг 3. Укажите технический домен

Платформа предлагает сразу несколько поддоменов. Вы можете ввести читаемое имя, а можете просто нажать кнопку «Продолжить», и система сгенерирует адрес автоматически. Мы рекомендуем подключать или покупать запоминающиеся домены второго уровня, поэтому техническим доменом можно пренебречь.

Шаг 4. Изменение структуры страниц

Перейдите в раздел «Страницы сайта» и удалите ненужные вам страницы. Или, наоборот, создайте новые.

В нашем шаблоне оказалась только главная страница, страница ошибки (для кода 404), политика конфиденциальности и типовое пользовательское соглашение. Для лендинга это оптимальный набор.

Сразу задайте SEO-теги для страницы.

Шаг 5. Настройка блоков и виджетов страницы

В режиме конструктора есть две вкладки: «Виджеты» и «Блоки». Первая нужна для управления набором мелких элементов: текст, картинки, слайдеры, формы, кнопки, меню и т.п. Вторая – для работы с комплексными секциями, они в свою очередь строятся из виджетов.
Так как набор блоков нас полностью устроил, остаётся поменять содержимое. Для этого воспользуемся режимом «Виджеты».

Закрепим меню сайта так, чтобы оно не двигалось при прокрутке.

Дополнительно можно сделать секцию сквозной, чтобы она отображалась на всех страницах сайта, например, если у вас онлайн-визитка из 3-4 страниц.

Поправим цены на актуальные. Для этого просто кликаем на нужном нам тексте и меняем на свой.

По аналогии меняются любые другие надписи и заголовки, картинки, пробелы/отступы и прочее.

Шаг 6. Актуализация контактов

В нашем шаблоне блок с контактами был собран из текста и иконок. Можно оставить такой подход и просто отредактировать содержимое (адреса, номера телефонов, email и пр.), а можно воспользоваться комплексным виджетом «Контакты». Его достаточно перетащить с помощью мышки из панели с виджетами на страницу.

Этот виджет проще настроить, а ещё его легко редактировать централизованно – сразу на всех страницах.

Ненужные поля просто отключаются флажками. Дополнительные создаются в один клик.

По аналогии можно добавить виджет заказа обратного звонка и онлайн-чата.

Шаг 7. Настройка формы заявки / обратной связи

Находим соответствующий виджет и перетаскиваем на страницу.

Кликаем на виджете и настраиваем его: меняем формат отображения, а также отключаем ненужные поля и включаем согласие с политикой обработки персональных данных.

При желании можно изменить наименование (заголовок) формы, а также надписи внутри элементов ввода.
По умолчанию uKit отправляет заявки на email владельца сайта. Но вы можете указать отдельный email-адрес для уведомлений.
Формы интегрируются с CRM-системами и аналитикой.

Шаг 8. Публикуем сайт

Когда всё готово, нажимаем кнопку публикации.

uKit опубликует ваш сайт на техническом домене, который вы указали на шаге №3, а также предложит зарегистрировать и купить подходящий домен второго уровня.

Примерные цены в рублях. Со временем могут измениться:

Привязка и настройка NS-записей при покупке через uKit будет выполнена автоматически.
SSL-сертификаты тоже генерируются и настраиваются без участия пользователя.

Шаг 9. Отключение копирайта и выбор тарифа

Триал для тестирования возможностей платформы – по 14 дней для каждого нового сайта.

Подписки для доступа к полному функционалу – от 495 руб. в месяц.

Готово! Сайт работает и собирает заявки из форм.

При желании вы можете перейти в панель управления сайтом и настроить дополнительные параметры, а также воспользоваться специальными инструментами для автоматизации рекламы и продвижения.

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

Вариант 2: Многостраничные блоги и магазины в uCoz

Работа с многостраничными сайтами обычно выстроена сложнее. Чтобы обеспечить удобство публикации типовых материалов, в конструкторе должен быть механизм шаблонов, связанных с разными типами страниц, например, с записями в блоге, со страницами товаров, категорий, корзины и т.п. Блочный редактор здесь только добавит путаницы, а время работы с одной публикацией вырастет кратно.

uCoz – это одна из самых крупных и надёжных платформ для создания сайтов в Рунете. Единственная, которая умеет эффективно работать с многостраничными проектами. Конструктор имеет модульную структуру и позволяет создавать: блоги, форумы, каталоги, доски объявлений и другие типы сайтов. Особое внимание уделено онлайн-торговле и монетизации контента.

Шаг 1. Регистрируем аккаунт

Переходим на сайт ucoz.ru и нажимаем кнопку «Создать сайт».

Если у вас уже есть учётная запись, то просто авторизуйтесь. Если нет, то создайте её. Для ускорения процесса можно воспользоваться аккаунтами социальных сетей.

Шаг 2. Выбор адреса сайта

На этом шаге речь пока только о техническом поддомене. Уже после создания и настройки сайта вы сможете прикрепить свой домен второго уровня, даже если сайт будет работать на бесплатном тарифе.

Шаг 3. Выбор типа сайта

Так как uCoz позволяет работать с разными типами сайтов, вам нужно либо выбрать типовую конфигурацию, либо сразу все доступные модули, либо вручную настроить набор необходимых модулей.

Мы выбрали конфигурацию «Интернет-магазин».

Шаг 4. Ввод названия сайта

Название сайта не имеет отношения к домену. Здесь должен быть короткий осмысленный текст.

Если вы передумали, то название можно будет изменить в любой момент в настройках сайта.

Обратите внимание, оно может участвовать в формировании SEO-тегов title, поэтому делайте его коротким.

Шаг 5. Настройка сайта

Панель управления uCoz во многом напоминает дашборды CMS-систем.

Здесь есть всё для:

• Управления пользователями сайта – их группами, ролями и правами доступа. В наличии скрипты автоматизации для переноса юзеров между разными группами, а также система рейтинга. Пользователи могут иметь локальные или глобальные аккаунты (актуальные для всех сайтов в экосистеме uCoz).
• Поиска по сайту. Причём параметры поиска и индексации можно настроить под свои требования.
• Качественного SEO. В SEO-модуле есть инструменты автоматизации продвижения и рекламы, для мониторинга позиций, а также для генерации мета-тегов. Сервисы Яндекс.Метрика и Яндекс.Вебмастер подключаются в пару кликов.
• Ведения блога, каталога, доски объявлений, форума, автопостинга в соцсети и пр. Есть даже модули онлайн-чата, тестирований и опросов.
• Генерации контента с помощью нейросети (ИИ) – изображений, текста, элементов дизайна, SEO-тегов.
• Монетизации континента, продажи подписок и тарифов, а также для сбора донатов.

В общем, настройки uCoz описать в подробностях будет сложно. Поэтому пройдёмся по стандартным шагам запуска магазина.

Шаг 6. Установка шаблона

В наличии каталог бесплатных и премиум-шаблонов, инструменты для создания шаблонов с нуля, система бэкапов и загрузки внешних дизайнов. Если нет ни времени, ни желания разбираться, можно заказать профессиональную установку макета.

Для интернет-магазинов мы рекомендуем потратиться на покупку премиум-темы, это небольшое разовое вложение.

Для подбора можно воспользоваться фильтрами по типу сайта и по тематике.

Дефолтный шаблон предоставляется бесплатно, легко кастомизируется, поддерживает систему глобальных блоков и имеет адаптивную вёрстку. Всегда можно оставить и настроить его.

Для изменения шаблонов предоставляются:

• визуальный редактор,
• редактор кода
• и искусственный интеллект (AI Code).

Редактировать можно в том числе купленные премиум-шаблоны. Только перед внесением изменений не забудьте сделать бэкап.

Шаг 7. Настройка модуля магазина

Перейдите в модуль и настройте необходимые параметры.

Ключевые настройки:

• Название магазина (если он работает в дополнение к основному сайту).
• Логика формирования тайтлов – на основе переменных.
• Мета-теги для главной страницы магазина.
• Сортировка в категориях и на главной странице.
• Параметры пользовательских фильтров.
• Интеграции – синхронизация с 1С и МойСклад.
• Включение специальных индексов для поисковиков – с электронной коммерцией.
• Настройка способов оплаты и валют.
• Настройка сервисов доставки.
• Создание и настройка Telegram-бота для онлайн-продаж. Он будет работать как мини-приложение и сможет принимать оплату непосредственно в мессенджере.

Шаг 8. Создание товаров

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

Само добавление товара может быть ручным или на основе импорта: в табличном формате или через внешние сервисы.

Ручное создание:

Вариант с импортом:

Шаг 9. Прикрепить домен

К сайту можно прикрепить уже имеющееся доменное имя или зарегистрировать новое.

Покупка доменов возможна прямо в админ-панели uCoz.

Шаг 10. Публикация сайта

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

Шаг 11. Выбор и оплата тарифа

Вообще uCoz можно использовать полностью бесплатно, даже со своим доменом. Но так как мы выбрали конфигурацию с интернет-магазином, нам предоставили триал на 14 полных дней.

Для сохранения доступа к модулю нужно оплатить тариф не ниже плана «Магазин» – от 770 руб. в месяц.

Базовый тариф, без автоматического удаления сайта при отсутствии посещений – от 462 руб. в месяц.

Обратите внимание! Для отслеживания продаж есть встроенная CRM-система, а также система готовых отчётов.

Итак, мы рассмотрели пошаговый алгоритм создания двух типов сайтов: лендингов и интернет-магазинов. Действия по запуску других типов проектов будут во многом аналогичны:

• для сайтов с небольшим количеством страниц идеальным решением станет конструктор uKit, так как он позволяет собирать страницы из блоков и виджетов без погружения в код;
• а для многостраничных сайтов лучше использовать uCoz. Только в этой платформе есть возможность быстрой публикации типовых материалов. Модульная структура делает uCoz похожим на классические CMS-системы.