Как бесплатно с нуля создать свой сайт?

В современном мире как никогда актуальна фраза: «если вы не представлены в Интернете – вас не существует». Кто-то создает свой ресурс для продвижения бизнеса, кто-то – для того, чтобы предлагать товары и услуги в Сети, а для некоторых сайт сам по себе становится основным источником дохода.

Выбор хостинга, разработка дизайна, верстка, интеграция с движком, поисковая оптимизация и в конечном итоге монетизация – все это требует навыков, поэтому сегодня web-разработка – если не основная, то очень значимая часть IT-индустрии. Но не пугайтесь – усидчивость и упорство могут с лихвой компенсировать недостаток знаний!

Какие бывают виды сайтов?

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

• Персональный сайт – создается с целью рассказать миру о своей биографии, достижениях, сфере интересов и увлечений. Раньше персональные сайты пользовались значительной популярностью, но в последнее время их нишу заняли персональные страницы в социальных сетях.
• Сайт-визитка – используется предприятиями малого и среднего бизнеса. Содержит общее описание деятельности компании, раздел с контактными данными и форму обратной связи. Создать его своими руками с нуля можно достаточно быстро.
• Корпоративный сайт – это онлайн-представительство крупной компании в Интернете. Состоит из множества разделов, среди которых – информация о сотрудниках фирмы, ее истории, партнерах, новости компании, описание продукции, пресс-кит для СМИ, данные о корпоративной социальной ответственности и т.д. Такой сайт имеет официальный статус, то есть пользователь ресурса может ссылаться на его содержимое как на официальную позицию компании.
• Сайт-каталог, или сайт-витрина. На таком сайте представлена продукция компании с фотографиями, детальным описанием, спецификациями и характеристиками. Витрина не предполагает возможности покупки товара онлайн – только обращение через форму обратной связи или по адресам и телефонам, указанным в разделе контактных данных.
• Интернет-магазин мало чем отличается от витрины, однако на страницах товаров появляется кнопка «Купить». Но для ее появления придется приложить немало труда – подключить платежную систему, настроить обработку заказов, интегрировать сайт с бухгалтерскими и складскими системами, обеспечить безопасность передачи пользовательских данных.

Важно: при выборе платежной системы стоит обратить внимание на наличие сертификации PCI DSS – не имея такого сертификата, поставщик вряд ли сможет обеспечить защиту данных от утечки. В таком случае вы рискуете понести не только репутационные потери, но и стать объектом пристального внимания органов финансового контроля.

• Промо-сайт (Landing page) – как правило, это побочный сайт компании, направленный на продвижение одного продукта. Чаще всего состоит из одной страницы, на которой описываются характеристики и преимущества товара и предоставляется возможность его заказа.
• Блоги и контентные сайты – содержат информационные материалы определенной тематики. На таких сайтах не предлагается продажа товаров и услуг, зато могут присутствовать рекламные блоки или ссылки на коммерческие порталы. Такие с виду «некоммерческие» ресурсы являются ничем иным, как рекламными площадками.

Как делать сайт с нуля?

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

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

Определение цели создания

Одно из основных правил целеполагания гласит: правильная цель находится за пределами деятельности по ее достижению. Иными словами, само по себе наличие сайта не может являться целью. Вы самостоятельно создаете сайт для достижения определенного эффекта – чаще всего финансового, реже – репутационного.

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

Более того, можно поставить вопрос более глобально – нужен ли вообще вам сайт? Ведь достигнуть цели можно и другими способами. К примеру, заработок в Инстаграме при правильном ведении аккаунта может быть не меньше, чем на своем сайте, и при этом вы избежите затрат на разработку.

Покупка домена и хостинга

Цели ясны, задачи определены – за работу! Скорее всего, вы уже придумали название для своего проекта. Но просто придумать мало, необходимо еще зарегистрировать доменное имя. Это тот самый адрес, по которому будет доступен ваш сайт. Приготовьтесь к тому, что желаемое доменное имя может быть занято – популярные запоминающиеся имена разбирают очень быстро и часто с целью перепродажи. Но не отчаивайтесь – в последнее время появилось много новых доменных зон, и в них ваше имя может быть свободно:

Как видим, выбрать домен в популярной зоне для интернет-магазина обуви «Ромашка» может быть проблематично. Но разве свободный домен в зоне .shoes – не идеальное решение?

Также сайту нужно где-то «жить» — то есть вы должны разместить его на удаленном сервере (хостинге). С его покупкой не следует торопиться – пока вы не определились с технологиями, на которых сайт будет работать, вы не сможете корректно подобрать параметры хостинга и рискуете арендовать сервер, не подходящий по одному или нескольким параметрам – мощности процессора, объему жесткого диска, операционной системе и т.д.

Совет: наиболее безопасной считается аренда хостинга в Голландии или в Германии – законодательство этих стран в сфере информационной безопасности не предполагает возможности передачи данных с серверов правоохранительным органам.

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

Выбор движка (CMS)

CMS (Content Management System, в просторечии — админка) – это набор программного обеспечения, при помощи которого вы будете управлять содержимым сайта. Содержимое страниц сайта передается от сервера клиенту в виде кода – набора инструкций, согласно которому браузер отстраивает текстовые блоки и изображения. В принципе, сайт может работать и без админки, но тогда вам придется создавать каждую страницу отдельно и писать вручную весь код. CMS позволяет легко создавать и редактировать страницы при помощи визуального редактора – так, как это делается в обычной офисной программе. В зависимости от типа сайта вам может подойти один из вариантов:

• Не использовать CMS. Если сайт состоит из одной страницы и его содержимое редко изменяется, не имеет смысла тратить время и деньги на покупку, развертывание и интеграцию системы. Намного проще внести изменения непосредственно в верстку сайта. Такой сайт можно разместить на самом дешевом или бесплатном хостинге.
• Создать сайт на специальном сервисе-конструкторе. Как правило, в этом случае вы выбираете готовый дизайн и просто наполняете его текстами. После этого прописываете необходимые настройки домена – и сайт готов. Такое решение подойдет только для небольших шаблонных проектов – для реализации более крупных функционала конструкторов может быть недостаточно. Лучший конструктор сайтов назвать сложно, но в большинстве рейтингов лидирует Wix.
• CMS Kirby – эта система практически неизвестна в Рунете, но она идеально подходит для небольших сайтов-визиток. Kirby не использует базу данных (БД) и хранит содержимое страниц в отдельных текстовых файлах — и это обеспечивает ей три важных преимущества. Во-первых, не придется разбираться в том, как создать и настроить БД. Во-вторых, база данных – это возможная точка входа для злоумышленника, который может взломать сайт, отправив на него так называемую инъекцию – выполнить вредоносный код под видом обычного запроса. В-третьих, на работу БД затрачиваются ресурсы сервера, а значит, без нее сайт сможет работать на более дешевом хостинге. Распространяется бесплатно.
• WordPress – самая популярная бесплатная CMS на сегодняшний день. Лучше всего подходит для новостных ресурсов и блогов. Для системы разработано множество дополнений, реализующих дополнительную функциональность – работу с meta-тегами для поисковой оптимизации, автоматический репостинг в социальные сети, подключение платежных систем, настройку аналитики и многое другое. Также для WordPress доступно множество платных и бесплатных тем – с их помощью вы избежите затрат на разработку дизайна и верстку сайта.

Важно: популярность WordPress имеет и плохую сторону – она крайне интересна злоумышленникам. Буквально через день после выхода новой версии системы в ней находят уязвимости, при помощи которых ваш сайт может быть взломан. Также WordPress требователен к ресурсам сервера.

• 1C-Битрикс – очень мощный инструмент управления сайтом. Система платная, сложная и ресурсоемкая. Самостоятельно развернуть ее у вас вряд ли получится. Разработкой сайтов на этой CMS занимаются сертифицированные специалисты. Битрикс имеет смысл выбирать для крупных корпоративных порталов, интернет-магазинов и каталогов.
• Самописная CMS. Если вы хотите создать сайт с особой структурой либо возможности существующих CMS вас не устраивают – можно написать свою систему. Конечно, это потребует значительных трудозатрат, но зачастую это бывает легче, чем адаптировать существующую систему под свои потребности. Как правило, самописные CMS используют для проектов с нестандартным функционалом (например, если вы разрабатываете игры для заработка денег без вложений).

Подготовка контента

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

К моменту запуска ресурса подготовьте базовое наполнение для всех его разделов. Не оставляйте пустых разделов – пусть лучше на сайте окажется мало страниц, чем отдельные пункты меню будут вести «в никуда».

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

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

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

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

Разработка дизайна

Если вы решили не использовать готовые темы для вашего сайта, дизайн придется заказывать либо рисовать самостоятельно. Дизайн – это именно та «одежка», по которой ваш ресурс встретят пользователи. Прежде чем что-либо рисовать, продумайте структуру основных страниц, после чего нарисуйте прототип – черно-белый эскиз, где вы отобразите расположение основных блоков. Одна из популярных бесплатных программ для рисования прототипов – Axure RP. У нее простой интерфейс, также она позволяет добавлять не только текстовые блоки или геометрические фигуры, но и специфичные для web-сайтов элементы – поля ввода, кнопки, выпадающие списки, заголовки и т.д.

После того как прототип нарисован, необходимо приступать к его «раскрашиванию», результатом которого станет макет для верстки. Для рисования макетов можно использовать Adobe Photoshop, а пользователям Mac OS рекомендуем программу Sketch – она разработана специально для web-дизайна, позволяет работать с прежде разработанными прототипами, а также выгружать макеты в систему InVision. InVision – это веб-сервис, который дает возможность эффектно презентовать ваш дизайн и «оживить» макеты при помощи анимации и перелинковки – то есть при презентации макета вы сможете сымитировать работу гиперссылок и кнопок на будущем сайте. Это очень удобно при демонстрации работы сложных интерфейсов. Кроме того, InVision невероятно облегчает работу верстальщика – в режиме инспектирования макетов система предоставляет практически готовый код. В общем, если вы обладатель Mac – Sketch и InVision вам в помощь. Для пользователей Windows остается привычное детище Adobe и книга “Photoshop для чайников”.

Проведение верстки

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

• HTML задает структуру страницы сайта – заголовки, абзацы, списки, ссылки и т.д.
• CSS описывает визуальные стили – расположение блоков, их цвет, границы, размер и начертание текста, анимацию элементов.
• JavaScript «оживляет» страницу, делает ее интерактивной, с его помощью программируется реакция интерфейса на действия пользователя. Благодаря ему можно придать страницам более широкую функциональность – к примеру, написать калькулятор стоимости заказа.

Не советуем увлекаться программами для «визуального» редактирования страниц – они генерируют много лишнего и некачественного кода. Намного лучше писать код вручную при помощи специальных текстовых редакторов – Sublime Text, Visual Studio Code, WebStorm и других. Многие из них распространяются бесплатно. При написании сайта с нуля, как правило, сначала пишутся HTML и CSS, а уже потом — код на JavaScript.

Скорее всего, вы пока не знаете ни одного из этих языков. Ничего страшного! В Сети можно изучить их бесплатно или очень недорого. Codeschool, Udemy, CodeCademy – на этих ресурсах вы сможете не только прослушать лекции по интересующему языку, но и выполнить обучающие задания для закрепления материала.

Для полноценного запуска сайта одной верстки будет недостаточно. Верстка – это только пример, картинка, преобразованная в код. Для того чтобы сайт «ожил», необходимо интегрировать его с CMS – вместо текстов в верстке нужно прописать специальные участки кода, чтобы отображать данные из админки. После этого ваша верстка превратится в шаблоны – и при помощи одного и того же шаблона будет автоматически создаваться множество однотипных страниц, например новостей.

Сколько можно заработать на создании сайтов?

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

• Контекстная реклама – наверное, наиболее популярный и легкий способ монетизации. Вы размещаете рекламные блоки на сайте и начинаете получать доход от кликов пользователей по рекламным объявлениям. Конечно, все просто только на первый взгляд – но сайт должен соответствовать требованиям рекламной системы. Также ваши конкуренты могут заняться «скликиванием» рекламных объявлений из-за чего ваш сайт могут заблокировать. Наиболее популярные системы контекстной рекламы – Яндекс.Директ и Google AdSense.
• Тизерная реклама – в чем-то похожа на контекстную. Основное отличие от контекстной рекламы – низкое качество объявлений и меньший заработок от размещения рекламных блоков. С другой стороны, требования к сайтам в таких системах намного ниже, так что если вы не собираетесь активно развивать сайт, тизерные блоки могут быть подходящим решением. Примерный заработок от тизерной рекламы — 35-50 долларов в месяц.
• Баннерная реклама – в отличие от контекстной и тизерной рекламы тут оплачиваются не клики, а показы. Расценки за показы, естественно, ниже, чем за клики, но при достаточной посещаемости сайта размещение баннеров может обеспечить доход в несколько сотен долларов в месяц.
• Продажа ссылок. Поисковые системы при ранжировании сайтов учитывают внешние ссылки на них. Если на ваш ресурс ссылаются – значит, на нем размещена полезная информация, можно поднять его выше в результатах поиска. Существуют специальные биржи (GoGetLinks, Miralinks, Sape), на которых вы можете продать ссылки со своего сайта. Стоимость продажи одной ссылки – около десяти долларов. Для продажи ссылок ваш сайт должен быть трастовым – то есть чтобы реализовать ссылки со своего сайта на другие, необходимо сначала купить ссылки с других сайтов на свой.
• Партнерские программы – размещение ссылок на сайты партнеров для получения процента с продаж клиентам, перешедшим по ним. Заработок зависит от стоимости продаваемых товаров и процента ваших комиссионных.
• Написание заказных статей и PR-материалов — подойдет для новостных сайтов и блогов. Для размещения заказных материалов ваш сайт должен быть не просто посещаемым, но и влиять на мнения и предпочтения аудитории. Сумма заработка зависит от ваших договоренностей с заказчиком.

Подводим итоги

Создавая сайт, вы можете как начать бизнес на дому с нуля, так и поддерживать уже существующий бизнес. Разработка сайта с нуля – достаточно трудоемкий процесс, и, возможно, стоит отдать создание сайта на откуп профессионалам. Но если вы хотите сэкономить и научиться основам веб-разработки, делать сайт с нуля – отличное решение.

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