Как самостоятельно создать сайт

Сайтостроение, которое еще 10-15 лет назад считалось почти сакральным умением, сейчас стало общедоступным. Чтобы создать сайт, уже не нужно быть «посвященным» — программистом или разработчиком. Собрать на конструкторе лаконичный веб-проект может даже школьник. И все-таки создание сайта не такой элементарный процесс, как кажется

Идея и структура

Сначала сформулируйте идею — для кого и для чего создается сайт. От этого зависит тип, структура, разделы, страницы, функции, дизайн

Например, сайт дизайн-студии создается для продажи услуг. Потенциальная аудитория — те, кто планируют ремонт, ищут идеи и хорошего дизайнера интерьеров. Значит, на сайте должны быть разделы с услугами, ценами, гарантиями, контактами, формой обратной связи, отзывами. Нужна страница с рассказом о дизайнерах — сотрудниках компании, об их образовании, опыте, достижениях. Обязательно — портфолио с проектами. Дизайнеров выбирают «глазами», по их работам

Раздел со статьями о трендах, направлениях, стилях воспринимается как свидетельство экспертности и увлеченности сотрудников агентства

Можно добавить калькулятор, который рассчитает стоимость дизайн-проекта. Или полусерьезный-полушуточный тест «Какой стиль интерьера вам подходит?»

Каждая запись, статья, раздел, функция работают на главную цель — привлечение клиентов

Прототип основных страниц

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

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

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

Выбираем тип сайта

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

Коммерческие проекты создаются для продажи товаров и услуг. Основные типы

• интернет-магазины
• агрегаторы
• сайты услуг (например, клиники, турагентства, клининговые компании)
• корпоративные порталы (Газпром, Сбер, Мосгортранс)
• визитки (одностраничные или малостраничные сайты с контактами, перечнем продуктов и услуг)
• лендинги (посадочные продающие страницы)
• промо (виртуальные рекламные «плакаты» товара или услуги)

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

• порталы
• СМИ
• статейники
• блоги
• справочники

Веб-сервисы упрощают или обогащают жизнь пользователя, это

• почтовые сервисы
• онлайн-инструменты
• стриминговые сервисы (например, онлайн-кинотеатры)

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

• соцсети
• форумы
• сайты знакомств
• видеохостинги

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

Сайт — это система папок и файлов. Так выглядит корневая директория сайта

Например, в папке wp-content хранятся шаблоны (коды, которые задают внешний вид), плагины (программные модули, расширяющие возможности основной программы), изображения, тексты, видео

Файлы связываются с доменом (адресом, именем сайта) и размещаются на сервере хостинга (мощном компьютере)

Создать сайт можно тремя способами

• в конструкторе
• через систему управления контентом — CMS
• вручную через код HTML

Конструкторы сайтов

Конструктор — онлайн-сервис, где есть все сразу — домен, хостинг, инструменты для разработки. Популярные в России сервисы: Craftum, uCoz, Nethouse, Creatium, Mottor, Flexbe. Fo. Часть из них работают только с интернет-магазинами

Плюсы конструкторов

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

Минусы

• Ваша площадка вам не принадлежит. У вас нет доступа к файлам, и вы не сможете перенести их на другой хостинг, если вас перестал устраивать уровень сервиса или технические детали
• Ежемесячная плата. Она не очень высокая, но если планируется поддерживать сайт несколько лет, то за него придется отдать приличную сумму. Стоит на берегу подсчитать, что выгоднее: каждый месяц платить за конструктор или разово отдать деньги разработчику и сделать проект на CMS
• Некоторые конструкторы размещают проекты на доменах третьего уровня, и тогда URL выглядит, например, так: mycompany.wix.com. Такие сайты продвигать сложнее, чем на доменах второго уровня (mycompany.com)
• Ограниченный функционал. Вы сможете пользоваться только теми опциями, которые заложены в конструкторе. А, например, при индивидуальной разработке можно реализовать любой каприз
• SEO-продвижение (то есть продвижение в топ выдачи поисковых систем) затруднено из-за ограничений системы. Считается, что сделанные на конструкторе проекты при прочих равных ранжируются ниже, чем на CMS

Простой пример создания сайта на конструкторе

Для примера возьмем сервис Craftum. Во время 10-дневного тестового периода им можно пользоваться бесплатно. Сначала надо зарегистрироваться, открыть админ-панель, выбрать тип проекта

Мы выбрали второй тип — персональный сайт. Предлагается несколько шаблонов — универсальных и специализированных (например, для психологов, педагогов, IT)

Мы выбрали тип «Универсальная визитка». Заголовки, фон меняются в визуальном редакторе

Можно настроить дизайн: цвета, фон, размер шрифта, выравнивание текста

Затем добавляем блоки, настраиваем их

В конструкторе доступны SEO-настройки

Публикуем страницу, привязываем домен по инструкции хостинга. Визитка готова

CMS-системы

Система управления контентом (движок) — набор инструментов для создания сайта. С CMS могут работать не только программисты или верстальщики. Большая часть интернет-проектов в России и мире сделана на CMS

Сначала нужно арендовать домен и зарегистрироваться на хостинге, затем выбрать движок

Плюсы CMS-систем

• Относительная простота и доступность. Технически это несколько сложнее, чем конструктор, но намного проще, чем самописная разработка
• Легко вносить изменения в контент и дизайн
• У владельца есть доступ к папкам и файлам. Их можно перенести на новый хостинг, если старый перестал устраивать
• Функционал. Дополнительные функции можно добавлять через код, с помощью расширений или плагинов
• Если вы интересуетесь, как создать сайт бесплатно, обратите внимание на WordPress и другие популярные бесплатные CMS. За домен и хостинг заплатить все-таки придется, но это недорого
• CMS оптимизированы для Google и Яндекса. Считается, что существуют более и менее SEO-дружелюбные платформы
• Сайты автоматически адаптируются для мобильных
• Постоянные обновления, улучшения движков

Минусы

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

Топ бесплатных CMS-систем

• WordPress — самая популярная в мире платформа. Создавалась для личных блогов. Сейчас это дружественная к SEO, универсальная CMS с широкими возможностями: можно делать интернет-магазины, лендинги, форумы, порталы
• Joomla — второй по популярности движок, которым можно пользоваться бесплатно. Подходит для любых проектов — от лендингов до агрегаторов
• Drupal — конструктор для опытных разработчиков, сложный, но очень гибкий. На нем можно создать все, что угодно — от СМИ до банковского сервиса
• Magento — CMS для интернет-магазина. Версия, которой можно пользоваться бесплатно, подходит для малого и микробизнеса. Для серьезного бизнеса нужна довольно дорогая коммерческая версия — Adobe Commerce
• OpenCart — простая CMS для создания магазина. По статистике, на OpenCart работает примерно каждый третий российский интернет-магазин

Топ платных CMS-систем

• 1С-Битрикс: Управление сайтом — самая популярная коммерческая платформа в России. Она универсальна: подходит для интернет-магазинов, порталов, сайтов услуг, лендингов. Легко интегрируется с 1С
• CMS.S3 — коммерческий движок от российской веб-студии с удобным пользовательским интерфейсом. Можно делать лендинги, новостные порталы, интернет-магазины
• Tilda — простая система, которая позволяет быстро собирать веб-проект из блоков и готовых шаблонов. Можно создавать промо, лендинги, спецпроекты, сайты услуг, магазины, корпоративные порталы
• DataLife Engine (DLE) — российская профессиональная система управления магазином с богатым функционалом. Много дополнительных модулей, часть из них платная
• Shop-Script — понятный и мощный движок для интернет-магазинов. Интегрируется со сторонними сервисами — платежными системами, службами доставки, бухгалтерскими программами

Как создать сайт самостоятельно

Самописный сайт создается с нуля, на базе связки HTML (язык гипертекстовой разметки), CSS (код стилей) и скриптов (JavaScript, PHP). Это сложный способ, поэтому им пользуются нечасто — большая часть сайтов в Рунете сделаны на основе конструктора или CMS

Плюсы самописных сайтов

• Адаптация под нестандартные требования и задачи. Можно разработать сложный функционал, любой дизайн
• Быстро грузится: здесь нет «лишних» неиспользуемых модулей
• Хорошая защита от взлома. Здесь нет стандартных, известных хакерам лазеек

Минусы

• Высокая цена
• Сложно, долго
• Возможны ошибки, баги, если разработчик недостаточно профессионален
• Владелец сайта становится зависимым от разработчика: только он сможет развивать самодельный движок, обновлять, исправлять баги. Другим исполнителям сложно работать с чужим кодом
• Нет официальных автоматических обновлений. Сайт может морально устареть, если разработчик не будет регулярно его обновлять

Создание HTML-сайта

HTML (HyperText Markup Language) — язык разметки гипертекста. Он состоит из текста и тегов, которые описывают каждый элемент страницы

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

Так выглядит HTML-код страницы

А так эта же страница выглядит в браузере

К документам HTML прикрепляется стиль (например, шрифты и цвета) с помощью CSS — языка таблицы стилей. Стилевые описания выносятся в отдельный файл

Например, так может выглядеть файл со стилями шрифтов

Ключевые этапы создания самописного сайта

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

Если решено не пользоваться конструктором или CMS, то веб-разработка сводится к трем этапам: создание макета, верстка, внедрение PHP

Создание макета и верстка

Макет — картинка, визуальное представление всех страниц будущего сайта. Создается в Adobe Photoshop или других графических программах. Макет должен включать все блоки и элементы сайта, например, фон, шапку, логотип, меню, подвал, корзину. Готовый макет сохраняется в формате PSD

Сайт верстается (то есть «переводится» на язык, понятный интернет-браузерам) на основе готового макета с помощью HTML и CSS

Внедрение PHP

PHP — скриптовый язык. Технология PHP тесно связана с HTML. Архитектура большей части интернет-проектов строится на связке PHP и HTML

HTML — статический язык, который интерпретируется браузерами на стороне клиента. PHP — программный язык, который обрабатывается на сервере. Он привносит в статический код динамические элементы — те, которые могут меняться

Связка скриптов и HTML используется практически везде: в конструкторах, CMS-платформах, при индивидуальной разработке

Разработка самописного сайта с нуля на PHP требует времени, знаний, покупки специализированных программ

Полезные программы для начинающих разработчиков

Adobe Photoshop, CorelDRAW — графические программы для создания макета, логотипа, иллюстраций сайта

Блокнот, Notepad++ — текстовые редакторы, в которых пишется исходный HTML-код

Adobe Dreamweaver — платформа для создания веб-дизайна и верстки. Включает редактор кода с проверкой синтаксиса

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

Если нужно сделать сайт самостоятельно, а опыта в веб-разработке нет, то конструктор — единственный доступный способ, который можно быстро освоить

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

Не забывайте про третий способ, которые многие считают «золотой серединой». Это создание сайта на CMS-платформах. У них много функций, они позволяют гибко настраивать проект, с ними несложно взаимодействовать. Существуют мощные бесплатные движки, а индивидуальные доработки дешевле, чем полный цикл разработки

Публикация созданного сайта

Чтобы веб-проект появился в интернете, нужно арендовать домен, привязать его к хостингу, разместить на хостинге папки и файлы

Что такое домен и как его выбрать

У каждого сайта в интернете есть IP-адрес — уникальный номер, он представляет собой цифровой код, например, 87.236.16.85. Так как его сложно запомнить, сайту присваивается еще и доменное имя, например, yandex.ru, samsung.com, mts.ru. Домен состоит из двух частей — названия и доменной зоны, например, ru.com,.online,.info

При выборе доменной зоны нужно ориентироваться на тематику, географию проекта. Если он рассчитан на российскую аудиторию, подойдет зона ru. Зона.com — международная. Существуют геодомены с названием города, например,.MSK.RU для Москвы,.SPB.RU для Петербурга

Существуют тематические зоны, например,.net подходит для сетевых услуг,.shop — для магазинов,.sale — для каталогов распродаж

Как подобрать домен

• По общему правилу, домен пишется латиницей. Существует национальная доменная зона.рф, в которой имя можно писать кириллицей, но такие сайты сложнее продвигать. После копирования и вставки такие адреса выглядят как непонятный набор символов, например, https://www.xn--f1alv.xn--p1ai/
• Можно использовать цифры и дефис. Цифры должны иметь смысл, например, в адресе lucky-dog74.ru 74 — номер региона, в котором продвигается магазин
• Если у вас уже есть бренд, используйте его в домене (megafon.ru, slavyanka.com)
• Название должно хорошо запоминаться — быть звучным, максимально простым и коротким (life.ru, pikabu.ru, snob.ru)
• Хорошо продвигаются веб-проекты с тематичными URL (bookmate.ru, car.ru, dietolog.ru)
• Проверьте историю домена по сервису whois и вебархиву. Если домен уже был зарегистрирован и на нем размещался сайт, это может как помочь продвижению в поиске, так и помешать ему. Нужно разобраться, не было ли на нем фильтров от поисковиков, нелегального контента, блокировок РКН, не ссылались ли на него сомнительные доноры и т.п. Если такая проверка представляется вам слишком сложной, вам нужен новорег — URL-адрес без истории

Где купить домен

Принято говорить, что домены покупают, но это не совсем правильно. Домен невозможно купить, то есть стать его безраздельным собственником. Домены арендуются у регистраторов на физическое или юридическое лицо. Самый крупный российский регистратор reg.ru оформляет аренду в зоне.ru на один год, в международных зонах — на срок до 10 лет. По окончании срока аренды ее можно продлить

Домены, аренду которых не продлили, возвращаются к регистратору, и их могут арендовать другие клиенты

Что такое хостинг и как его выбрать

Папки и файлы хранятся на сервере — мощном компьютере, который работает круглосуточно, никогда не выключаясь. Услуга по предоставлению места на сервере называется хостинг, ее оказывают хостинг-провайдеры. В рунете сотни таких компаний

На что надо обращать внимание при выборе хостинг-провайдера

• Многолетняя история и хорошая репутация. Проверьте адрес хостинга по сервису whois. Изучите отзывы
• Круглосуточная техподдержка. В идеале — несколько каналов для связи: многоканальный телефон, почта, Telegram-чат
• Расположение серверов. Если они находятся на другом континенте, страницы будут загружаться медленней, чем если бы серверы располагались в том же городе, где продвигается проект
• Технические характеристики и возможности. Если вы предполагаете, что на сайт будет заходить несколько сотен человек в день, то такую нагрузку потянет любой хостинг. Если планируется серьезный технически сложный интернет-магазин с многотысячной аудиторией, лучше арендовать выделенный сервер (отдельный компьютер) или облачный хостинг. Большинству проектов достаточно 1-2 Гб дискового пространства, но есть исключения
• Проверьте, какие дополнительные инструменты защиты от взлома и вирусов предлагают провайдеры. Выясните, устанавливает ли провайдер сертификаты безопасности SSL, и какие именно
• Сравните цены, тарифы, услуги. Ищите оптимальное соотношение. Существуют бесплатные хостинги. Скорость загрузки там, как правило, невысокая, а технические возможности скромные. Часто такие провайдеры зарабатывают на рекламе, размещая ее на площадках, которые расположены у них на серверах

Размещение готового сайта на сервере

После оплаты услуг провайдера нужно разместить сайт на хостинге

Если вы заранее создали проект на HTML и PHP, то у вас есть готовые папки и файлы, которые нужно загрузить на сервер. Проще всего это сделать через админ-панель хостинга по протоколу FTP. Инструкцию ищите у своего провайдера. Если возникнут затруднения, обратитесь в техподдержку

Если вы создаете проект на CMS, последовательность шагов следующая

• Зайдите в админ-панель регистратора домена и пропишите DNS-серверы вашего хостинга (узнайте их у провайдера)
• Дождитесь, когда изменения вступят в силу (обычно это занимает несколько часов)
• Зайдите в раздел CMS админ-панели хостинга
• Выберите нужный движок. Привяжите к нему домен, сгенерируйте логин и пароль администратора. Для разных CMS и на разных хостингах процедура может незначительно отличаться
• Дождитесь, пока изменения вступят в силу (это занимает от нескольких часов до нескольких дней). И можно заходить в админ-панель. Обычно она расположена по адресу mysite.ru/admin. Введите логин и пароль администратора, заданные на предыдущем шаге
• Вы получите полностью работоспособный, но пока «пустой» сайт. Теперь его нужно настроить и наполнить контентом

Для настройки дизайна чаще всего используют готовые шаблоны — наборы кодов, которые формируют внешний вид страниц. Например, в библиотеке WordPress сотни платных и бесплатных шаблонов, спроектированных дизайнерами. Шаблоны можно кастомизировать — загрузить логотип, выбрать цвет, шрифт, фон, разместить или убрать виджеты и блоки. Или создать индивидуальную тему оформления на HTML и CSS. Важно продумать юзабилити — удобство для пользователей

Можно добавить дополнительные сервисы и функции: запись к врачу, бронирование билетов, опросники, калькуляторы, карты. Это можно сделать с помощью штатных инструментов, через плагины или через HTML-код

Ведение и развитие проекта

Чтобы на сайт заходили посетители, его необходимо продвигать. Основные способы: SEO (продвижение в поисковых системах — Яндексе и Google), реклама, SMM (продвижение в соцсетях), партнерские программы, Email-маркетинг, размещение ссылок

Для продвижения в поиске сайт нужно оптимизировать. Он должен быть «легким», быстро загружаться, страницы должны быть оптимизированы под группы запросов семантического ядра, а контент (статьи, карточки товаров, изображения, видео) — соответствовать определенным правилам

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

Для серьезного бизнеса нужны профессиональные решения

Агентство «JimmyNeuron Marketing» создает интернет-магазины, визитки, корпоративные порталы, лендинги, имиджевые проекты. Работаем с 1С-Битрикс, WordPress, Tilda, MODX и другими платформами

Мы входим в число лучших компаний России в сфере разработки сайтов по результатам самых авторитетных рейтингов

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