Сделать сайт недорого: пошаговая инструкция для малого бизнеса

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

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

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

Шаг 1. Определяемся с целью сайта

Теория

Нельзя начинать делать сайт, если вы не знаете, зачем именно он вам нужен. Сайты для бизнеса можно условно поделить на три типа.

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

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

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

Для всех трёх видов отлично подходит платформа WordPress.

Практика

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

Шаг 2. Выбираем хостинг

Теория

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

На этом этапе нам подойдёт любой тарифный план хостинга — посетителей у нового сайта будет немного, а WordPress очень хорошо оптимизирован и не требует много ресурсов. Но я советую вам купить хостинг «на вырост» — тогда ваш сайт будет нормально справляться с пиковыми нагрузками.

Еще один важный момент — наличие автоматических установщиков CMS. Например, Softaculous устанавливает WordPress за 3 минуты.

Практика

Для сайта я выбрал хостинг Unihost с тарифом U-Drive. Наверное, мне подошел бы и U-Ride, но на U-Drive у меня гарантированно не будет проблем с ресурсами. Покупаю я сразу на год, поэтому цена хостинга составит $8.40 в месяц.

Покупать хостинг мы будем вместе с доменом.

Шаг 3: Выбираем доменное имя

Теория

Доменное имя — это адрес, который пишут в браузере, чтобы открыть сайт. Например, unihost.com. Здесь .com — это доменная зона, как почтовый индекс, а unihost — уже уникальная часть адреса, как улица и дом.

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

Цена на домен зависит от трёх факторов:

1. Доменная зона. У каждой доменной зоны свои расценки — есть бесплатные, например, .tk. А домен в зоне .na стоит $5000 в год.
2. Премиальность. Некоторые домены настолько лучше других, что владелец доменной зоны чувствует себя вправе поднимать на них цены. Так, простой домен в зоне .nyc стоит $30, но за autoshop.nyc придется заплатить уже $35000.
3. Длина домена. Даже на непремиальные домены длиной менее четырёх символов цены выше.

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

А вот интернет-магазинам с клиентами из разных городов и стран нужны более глобальные домены. Лучше всего — .com, но можно ограничиться и национальными .ua, .ru.

Практика

Так как у нас небольшой бюджет, то премиальные домены нас не интересуют. Сайт будем регистрировать в доменной зоне .com — это недорого, солидно и не требует дополнительных затрат.

1. Заходим на https://unihost.com/cpanel-web-hosting/.
   
2. Кликаем Разместить сайт в выбранном тарифе.
3. Открывается страница выбора домена. Вводим выбранный домен — в нашем случае myabsolutelytestdomain.com.
4. Выбираем Я хочу зарегистрировать этот домен и видим, что домен свободен и доступен к регистрации.
5. Кликаем Продолжить оформление заказа.
6. Проверяем заказ. Если всё правильно — кликаем Оформить заказ.
7. Кликаем Еще нет аккаунта Unihost? Создайте его сейчас!.
8. Заполняем форму.
9. Кликаем Создать новый аккаунт и продолжить.
10. Заполняем контактные данные для регистрации домена.
11. Кликаем Далее. 
12. Выбираем систему оплаты и кликаем Продолжить.
13. Оплачиваем счет.

С этого момента, у нас уже есть сайт. Осталось только его настроить и добавить информацию.

Шаг 4. Установка CMS

Теория

После того, как мы оплатим счет, нам придет e-mail с реквизитами для входа в cPanel. Оттуда мы сможем управлять хостингом, а также устанавливать и удалять CMS.

Практика

Устанавливать WordPress мы будем через Softaculous — так проще, быстрее и нам не придется работать напрямую с базами данных. К тому же, техподдержка Unihost записала видео, которое подробно показывает весь процесс.

Шаг 5. Установка темы

Теория

Сразу после установки, на нашем сайте не будет никакой информации — только шаблон. И этот шаблон нужно будет адаптировать под ваш бизнес. Для начала стоит установить тему.

Практика

Сразу после установки WordPress, мы попадаем в админ-панель. Отсюда мы можем менять тему сайта, устанавливать плагины и управлять другими настройками сайта.

По умолчанию стоит стандартная тема Twenty Seventeen. С ней наш сайт выглядит так: 

Но я хочу другую тему. Поэтому:

1. Кликаем Внешний вид в левом меню.
   
2. Кликаем Темы.
3. Кликаем Добавить новую.
4. Ищем тему или выбираем одну из предложенных. Мне нравится Sydney — в ней есть встроенный конструктор страниц и удобное верхнее меню.
5. Наводим на неё курсор и кликаем Установить.
6. Ждём, пока закончится установка и кликаем Активировать.

Теперь наш сайт выглядит так: 

Шаг 6. Установка плагинов для темы

Теория

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

Практика

Нашей теме нужны два плагина — PageBuilder от SiteOrigin и Sydney Toolbox. Давайте их установим.

1. Кликните Begin installing plugins вверху панели управления.
2. Откроется страница с ссылками на плагины. Кликните Install под одним из них. 
3. Откроется страница установки плагина. Дождитесь её окончания и кликните Return to Required Plugins Installer. 
4. Повторите процедуру со вторым плагином.
5. Кликните Activate под одним из плагинов. 
6. Кликните Activate под вторым плагином.
7. Кликните Return to Dashboard.

Шаг 7. Настройка темы

Теперь тема установлена. Давайте её настроим.

1. Кликаем Внешний вид в левом меню Админ-панели.
2. Кликаем Настроить.  
3. Откроется главная страница сайта с дополнительным меню слева.

Настроим заголовок главной страницы.

1. Кликаем Область заголовка в левом меню.
2. Кликаем Слайдер заголовка и настраиваем слайдер на главной странице.
   
3. В поле Скорость слайдера выбираем как часто будут меняться картинки в миллисекундах (1000 мс = 1 с). Тут же можно остановить текстовый слайдер и сделать текст общим для всех картинок.
4. Кликаем Изменить изображение под первой картинкой.
   
5. Выбираем новое изображение из библиотеки сайта или загружаем новое.
6. Кликаем Выбрать изображение в нижнем правом углу.
7. Прописываем заголовок и подзаголовок к слайду.
8. Повторяем это для остальных слайдов. Если у вас не хватает своих картинок — просто удалите лишние стандартные, это уберет их из ротации.
9. Прописываем текст кнопки. Кнопка прокручивает заголовок и переносит пользователя напрямую к тексту на главной.
10. Кликаем на стрелку слева вверху.
11. Кликаем Сохранить и опубликовать.

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

1. Кликаем Тип заголовка.
2. В поле Тип заголовка сайта ставим галочку напротив Изображение или Video. Полноэкранный слайдер занимает слишком много места, чтобы показывать его где-то еще кроме главной страницы.
3. Кликаем на стрелку слева вверху.
4. Кликаем Медиафайл заголовка и настраиваем заголовок для других страниц сайта.
5. Чтобы поставить в заголовок своё видео:
   1. Для видео с Youtube вставляем ссылку на видео в поле Или введите URL Youtube.
   2. Для локального видео кликаем Выбрать видео и выбираем файл из библиотеки Вордпресс или загружаем новый.
   3. Изображение после этого тоже нужно поставить своё — оно будет отображаться во время загрузки видео.
6. Чтобы поставить в заголовок своё одиночное изображение, кликаем на Скрыть.
7. Кликаем на Добавить. 
8. Выбираем новое изображение из библиотеки сайта или загружаем новое с соотношением сторон 16:9.
9. Кликаем Выбрать и обрезать.
10. Кликаем Обрезать.
11. Редактируем высоту заголовка, если вдруг показывается не всё изображение.
12. Если хотите — внизу страницы ставим галочку напротив Отключить наслоение. Это снимет затенение с картинки заголовка.
13. Кликаем на стрелку слева вверху.
14. Кликаем Сохранить и опубликовать.

Получилось неплохо. Но я хочу меню по центру страницы.

1. Кликаем Стиль меню.
2. Ставим галочку напротив По центру (меню и логотип сайта).
3. Кликаем на стрелку слева вверху.
4. Кликаем на ту же стрелку еще раз.
5. Кликаем Сохранить и опубликовать.

Уже хорошо. Но не хватает логотипа и иконки во вкладке браузера.

1. Кликаем Название сайта, ключевая фраза, логотип.
2. Если у вас нет логотипа — тут можно поменять название и краткое описание сайта, которые отображаются в заголовке.
3. Но у нас есть логотип, поэтому:
   1. Кликаем Выбрать изображение в поле Загрузить свой логотип.
   2. Выбираем новое изображение из библиотеки сайта или загружаем новое.
   3. Кликаем Выбрать.
4. Теперь кликаем Выбрать изображение в поле Иконка сайта.
5. Если у вас прямоугольный логотип — загружаем новое изображение размером 16х16
6. Если у вас квадратный или круглый логотип — можно использовать его. Для этого:
   1. Выбираем загруженное в пункте 2 изображение.
   2. Кликаем Выбрать и обрезать.
   3. Кликаем Обрезать.
7. Кликаем на стрелку слева вверху.
8. Кликаем Сохранить и опубликовать.  

Еще не очень нравится бело-черно-красная расцветка сайта. Я хочу, чтобы основным цветом был синий.

1. Кликаем Цвета.
2. Кликаем Общие.
   
3. Кликаем Выбрать в поле Основной цвет.
4. Выбираем цвет.
5. Кликаем на стрелку слева вверху.
6. Кликаем Сохранить и опубликовать.

Ну и давайте добавим на наш сайт контактную информацию для клиентов:

1. Кликаем Виджеты.
2. Кликаем Подвал 1.
3. Кликаем Добавить виджет.
4. Кликаем Sydney: Contact Info.
5. Заполняем поля, дважды нажимаем на стрелку и кликаем Сохранить и опубликовать.

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

1. Кликаем Подвал.
2. Кликаем Один. Видим, как исправляется отображение адреса.
3. Кликаем на стрелку слева вверху.
4. Кликаем Сохранить и опубликовать.

Напоследок, я хочу отключить сайдбар (боковую колонку) Вордпресса в блоге. По моему мнению, этот сайдбар давно и безнадежно устарел.

1. Кликаем Параметры блога.
2. Ставим галочку напротив На всю ширину (без боковой колонки).
3. Кликаем на стрелку слева вверху.
4. Кликаем Сохранить и опубликовать.

Когда закончите настройку темы — кликните на крестик слева вверху.

Шаг 7. Создание и наполнение страниц.

Теория

Теперь у нашего сайта строгая, профессиональная тема с поддержкой верхнего меню. Давайте создадим на сайте страницы Главная, Новости, Наши услуги, Услуга 1, Услуга 2 и О компании.

Практика

1. В левом меню админ-панели, кликаем на Страницы.
2. Вверху кликаем Добавить новую.
3. Вводим заголовок страницы, например Главная.
4. Заполняем страницу текстом и картинками. Всё делается в простом визуальном редакторе. Хотя, если вы разбираетесь в HTML, можно кликнуть на вкладку Текст и писать код вручную.
5. Справа, в поле Шаблон, ставим во всю ширину. Это уберет со страницы сайдбар.
6. Кликаем Опубликовать.
7. Кликаем Изменить в поле Постоянная ссылка под заголовком и приводим URL к человекопонятному виду.
8. Кликаем Обновить.

Создаём остальные страницы таким же способом. Страницу Новости можно ничем не заполнять, на неё мы перенесём блог. Для этого:

1. В левом меню админ-панели кликаем Настройки.
2. Кликаем Чтение.
3. В пункте На главной странице отображать выбираем Статическую страницу.
4. В списке Главная страница выбираем Главная.
5. В списке Страница записей выбираем Новости.
6. Кликаем Сохранить изменения.        

Теперь добавляем страницы в главное меню сайта:

1. В левом меню админ-панели, кликаем Внешний вид.
2. Кликаем Меню.
3. Удаляем из нынешнего меню все страницы. Для этого кликаем на стрелочке справа от названия страницы и кликаем Удалить.
4. Ставим галочку напротив наших новых страницы в списке слева и кликаем Добавить в меню.
5. Меняем порядок страниц в меню. Для этого, просто перетаскиваем их. Страницы Услуга 1 и Услуга 2 перетаскиваем на Наши услуги, что сделает их дочерними и превратит кнопку Наши услуги в подменю.    
6. Кликаем Создать меню.
7. Ставим галочку напротив Основное меню в списке Показать местонахождение и кликаем Сохранить меню.

Поздравляю — теперь вы знаете, как сделать настоящий сайт, с красивыми заголовками, блогом и виджетами! Более того, ваш сайт еще и хорошо выглядит на мобильных устройствах.

Осталось только заманить на него клиентов. Я советую добавить адрес сайта на ваши визитные карточки, а также другие виды рекламы. Если планируете сделать сайт основным видом продвижения бизнеса — позаботьтесь об рекламе в Adwords, Яндексе и социальных сетях. Но это уже совсем другая тема и чтобы её объяснить, потребуется уже далеко не одна статья.

Пишите ссылки на сайты, которые вы сделали самостоятельно, в комментарии к статье. А если что-то вдруг непонятно — смело задавайте вопросы, я сделаю всё, чтобы вам помочь!