Как создать сайт с нуля бесплатно
Сайты выполняют множество функций: от электронной визитки до торговой площадки. В статье расскажем, можно ли без особых умений создать сайт с нуля и что для этого нужно
Анна Стрельцова
Автор
Андрей Кузнецов
Директор компании PLACESTART
Создание сайта – трудоемкий процесс, и без специалиста в этом деле точно не обойтись. Такая мысль возникает у большинства людей, решивших сделать свой сайт. Оказывается, за работу может взяться даже тот, кто имеет лишь поверхностные представления о функционале сайтов, их строении и продвижении. Главное, знать, какие шаги нужно предпринять и какие инструменты использовать.
Пошаговая инструкция по созданию сайта
Первое, над чем стоит задуматься, – задачи и тематика сайта. Без этого не получится разобраться в инструментах, с которыми предстоит работать. С помощью сайта можно рассказать о своих услугах, увеличить продажи, повысить узнаваемость бренда и многое другое. Правильно сформулированные задачи играют важную роль: они определяют функционал сайта и его «сложность». Если вы хотите создать портфолио, будет достаточно одной страницы. Если вам нужен интернет-магазин, придется разрабатывать каталог товаров, форму заказа, оплаты и многое другое. Если задачи, цели и тематика не определены, эффективность даже профессионально разработанного сайта будет низкой.
Регистрация доменного имени
Любой сайт начинается с доменного имени – оно отображается в адресной строке браузера. Подбор доменного имени важен для узнаваемости сайта и его дальнейшего продвижения, поэтому необходимо выбрать не слишком длинное, запоминающееся и простое доменное имя.
Регистрировать доменное имя лучше на проверенных ресурсах, например:
Прежде чем регистрировать домен, важно учесть несколько аспектов. Во-первых, у крупных регистраторов цены обычно выше, чем у небольших, но тоже с хорошей репутацией. Кроме того, все сайты-регистраторы предлагают акции и скидки. Например, за регистрацию нескольких доменов или за покупку домена и хостинга одновременно.
Во-вторых, рассчитывая хоть минимальные, но все же расходы на создание сайта, учитывайте и стоимость ежегодного продления домена. Цены на продление у регистраторов разные, и как правило, выше, чем на покупку домена. Например, первоначальная регистрация домена может стоить 150 рублей, то продление – 800 рублей. Если вы хотите максимально сократить траты на сайт, при выборе регистратора стоит обращать внимание на все условия, которые предлагают компании, и выбирать наиболее подходящие.
- nic.ru
- reg.ru
- timeweb.com
Прежде чем регистрировать домен, важно учесть несколько аспектов. Во-первых, у крупных регистраторов цены обычно выше, чем у небольших, но тоже с хорошей репутацией. Кроме того, все сайты-регистраторы предлагают акции и скидки. Например, за регистрацию нескольких доменов или за покупку домена и хостинга одновременно.
Во-вторых, рассчитывая хоть минимальные, но все же расходы на создание сайта, учитывайте и стоимость ежегодного продления домена. Цены на продление у регистраторов разные, и как правило, выше, чем на покупку домена. Например, первоначальная регистрация домена может стоить 150 рублей, то продление – 800 рублей. Если вы хотите максимально сократить траты на сайт, при выборе регистратора стоит обращать внимание на все условия, которые предлагают компании, и выбирать наиболее подходящие.
Третье, что стоит иметь в виду, – доменная зона. Это последние буквы после точки в доменном имени: .ru, .рф, .com и так далее. Лучше выбирать ту доменную зону, которая соответствует географии аудитории. Если вы планируете привлекать посетителей из России и стран СНГ, выбирайте доменную зону [.ru]. Если ориентируетесь на международную аудиторию, то регистрируйте домен в зоне [.com].
Выбор подходящего хостинга
Хостингом называется аренда удаленного сервера с определенным набором функций и программ, необходимых для работы сайтов. Как и сервис для регистрации доменного имени, ресурс, предоставляющий хостинг, должен быть проверенный, с хорошей репутацией. Например:
- ihc.ru
- timeweb.com
- reg.ru
Выбор платформы
Проще всего создать сайт с помощью специальных платформ – конструктора или CMS (система управления контентом). Это не займет много времени, а главное, не потребует навыков программирования. Это подходит для сайта-визитки, портфолио, блога или небольшого онлайн-журнала.
Конструктор сайтов
Конструктор сайтов – самый простой вариант. Это заданный набор элементов для оформления страниц: блоки для размещения текста и изображений, заголовки, кнопки, иконки, возможность менять цвета каждого элемента. Популярные конструкторы сайтов:
- tilda.cc
- ru.wix.com
Есть и платные конструкторы. От бесплатных они отличаются большим количеством шаблонов, возможностью создать страницу с платежной системой или добавить дополнительную анимацию. Стоимость использования платных конструкторов варьируется от 590 до 5 тысяч рублей в месяц. Разница в ценах так велика из-за функционала: в самых дорогих конструкторах можно создать площадку для автоматизации работы крупного магазина, например.
При всех плюсах у конструкторов есть один существенный недостаток – они ограничены по функционалу. Вы можете использовать только те элементы, которые предусмотрены разработчиками, будь то платный или бесплатный шаблон. В конструкторах нельзя редактировать код, меняя и дорабатывая сайт под ваши нужды. Придется работать в четко заданных рамках.
При всех плюсах у конструкторов есть один существенный недостаток – они ограничены по функционалу. Вы можете использовать только те элементы, которые предусмотрены разработчиками, будь то платный или бесплатный шаблон. В конструкторах нельзя редактировать код, меняя и дорабатывая сайт под ваши нужды. Придется работать в четко заданных рамках.
Кстати, еще одна особенность конструкторов в том, что в них же можно сформировать домен, который не надо регистрировать. Правда, в доменном имени будет присутствовать название конструктора, например wix.domain.ru.
Конструкторы подходят для создания сайтов-визиток и портфолио, а также для тестирования проекта или идеи. Если вы планируете расширять сайт по мере развития вашей компании или деятельности, лучше сразу отказаться от конструкторов, выбрать другую платформу и зарегистрировать отдельный домен.
Конструкторы подходят для создания сайтов-визиток и портфолио, а также для тестирования проекта или идеи. Если вы планируете расширять сайт по мере развития вашей компании или деятельности, лучше сразу отказаться от конструкторов, выбрать другую платформу и зарегистрировать отдельный домен.
CMS
CMS устроена сложнее, чем конструктор, но также идеально подходит для новичков. Основное отличие систем управления контентом от конструкторов в том, что в CMS можно визуально изменить сайт под ваши требования, добавить необходимый функционал, синхронизировать работу сайта с системами управления бизнеса (CRM). CMS не ограничивает ваши фантазии. С помощью программистов в системе управления контентов можно воплотить любую идею, добавив нужный код или скрипт.
Самые популярные CMS:
Самые популярные CMS:
- wordpress.com
- joomla.ru
- drupal.com
Для начала работы нужно скачать с официального сайта разработчика и установить на компьютер дистрибутив CMS. Это архивная папка с техническими файлами. Затем выбираете шаблон и активируете его на вашем хостинге. В данном случае вы можете выбрать бесплатный шаблон из базы данных разработчика CMS, либо купить платную тему. Шаблон, или тема в CMS – это набор страниц с заранее продуманным дизайном и функционалом: меню, шапка и подвал сайта, боковые колонки, виджеты. Обычно предлагается много вариантов дизайна – можно выбрать тот, который больше подходит тематике и задачам сайта.
Следующий шаг – наполнение и тестирование сайта. На этом этапе ведется работа с редактором, в котором можно менять название страниц, добавлять текст, видео и изображения. Оформив и наполнив страницы, нажмите кнопку предварительного просмотра – вы увидите сайт глазами сторонних пользователей. Так вы сможете проверить, все ли корректно отображается, загружаются ли фотографии, не «потерялись» ли кнопки и другие элементы.
Если все в порядке – нажимайте кнопку «Публикация» или «Опубликовать». Теперь сайт доступен всем по своему доменному имени.
Сделать сайт можно «вручную», но для этого потребуются хотя бы начальные знания об HTML и CSS.
Если все в порядке – нажимайте кнопку «Публикация» или «Опубликовать». Теперь сайт доступен всем по своему доменному имени.
Сделать сайт можно «вручную», но для этого потребуются хотя бы начальные знания об HTML и CSS.
Создание сайта с помощью HTML
HTML – универсальный язык разметки, созданный для описания интернет-страниц. Он позволяет преобразовать заданные определенными символами параметры таким образом, чтобы они верно отображались на экране. Если вы владеете HTML-разметкой на базовом уровне, можете создать сайт с уникальным дизайном и необходимым функционалом.
Первым делом продумайте модель будущего сайта: шапку и подвал, меню и страницы, расположение кнопок. Продумайте визуальное оформление сайта, дизайн. Сначала можно делать наброски на бумаге, потом в Adobe Photoshop или другом графическом редакторе нарисуйте страницу. Чем детальнее вы представляете, какой сайт вам нужен, тем проще и быстрее его сделать.
Первым делом продумайте модель будущего сайта: шапку и подвал, меню и страницы, расположение кнопок. Продумайте визуальное оформление сайта, дизайн. Сначала можно делать наброски на бумаге, потом в Adobe Photoshop или другом графическом редакторе нарисуйте страницу. Чем детальнее вы представляете, какой сайт вам нужен, тем проще и быстрее его сделать.
Второй этап – верстка сайта. Создайте файл в текстовом редакторе и назовите его index.html. В его первой строке необходимо написать <!DOCTYPE html> – с помощью данных браузер поймет, как обработать содержимое страницы. Далее: <html><head>Заголовок документа</head>. На второй строке: <body>«Тело» документа</body></html>.
Первые теги говорят о том, что внутри есть HTML-код, тег head может содержать в себе и другие теги, которые не отображаются в браузере, а лишь анализируются поисковыми системами. Тег body – один из основных, в него заключено все содержимое страницы. Notepad-plus-plus.org – текстовый редактор, в котором удобнее, чем в «Блокноте», работать с кодом сайта.
Первые теги говорят о том, что внутри есть HTML-код, тег head может содержать в себе и другие теги, которые не отображаются в браузере, а лишь анализируются поисковыми системами. Тег body – один из основных, в него заключено все содержимое страницы. Notepad-plus-plus.org – текстовый редактор, в котором удобнее, чем в «Блокноте», работать с кодом сайта.
Сохраните файл с разметкой сайта, выбрав в поле «Тип файла» значение «Все файлы». Затем откройте браузер и нажмите комбинацию клавиш Ctrl+O – появятся файлы, которые можно открыть. Выберите ваш файл index.html и откройте его. В новой вкладке появится ваш сайт.
Сделать сайт динамичным помогут языки программирования. На третьем этапе используются такие языки, как PHP, Python или JavaScript. Новичок может столкнуться с сложностями в написании и разметке кода или в выборе тегов, поэтому многие используют конструкторы и CMS для быстрого и дешевого создания сайта.
Сделать сайт динамичным помогут языки программирования. На третьем этапе используются такие языки, как PHP, Python или JavaScript. Новичок может столкнуться с сложностями в написании и разметке кода или в выборе тегов, поэтому многие используют конструкторы и CMS для быстрого и дешевого создания сайта.
Привлечение посетителей
Сайт создан, теперь надо привлечь посетителей – трафик. Главный его источник – поисковики: Яндекс, Google, Mail и другие. Но первое время из поисковых систем трафик будет совсем небольшой, поэтому привлекать посетителей придется с помощью дополнительных источников:
- социальные сети;
- почтовая рассылка;
- форумы, тематические сайты;
- платная реклама: Яндекс-директ, Google Adwords.
Поисковые системы
Чтобы поисковые системы находили ваш сайт по запросам и предлагали его пользователям, нужно настроить корректную индексацию.
Для индексации поисковиками и самого сайта, и всех новых страниц на нем, необходимо настроить два технических файла – robot.txt и sitemap.xml. Первый сообщает поисковым роботам, какие страницы нужно индексировать, а какие нет. В этом файле укажите все, что вы хотите показывать пользователям, и все, что хотите скрыть.
Для индексации поисковиками и самого сайта, и всех новых страниц на нем, необходимо настроить два технических файла – robot.txt и sitemap.xml. Первый сообщает поисковым роботам, какие страницы нужно индексировать, а какие нет. В этом файле укажите все, что вы хотите показывать пользователям, и все, что хотите скрыть.
Файл sitemap.xml – это техническая карта сайта, по ней поисковые роботы ищут страницы, которые они должны проиндексировать. Если в robot.txt вы сообщаете роботам, что они должны распознать, то в sitemap.xml говорите, где это находится.
Далее создайте кабинет вебмастера в популярных поисковых системах: Яндекс, Google. В личном кабинете в обозначенных полях добавьте ссылку на сайт и введите доменное имя. С помощью кабинета вебмастера можно сообщать поисковикам о появлении новых страниц для быстрого распознавания и в целом следить, как индексируется сайт: нет ли ошибок или страниц, которые вы случайно закрыли от индексации.
Правильно настроенная индексация поможет поисковым системам активнее рекомендовать сайт – а значит, делать его популярнее.
Далее создайте кабинет вебмастера в популярных поисковых системах: Яндекс, Google. В личном кабинете в обозначенных полях добавьте ссылку на сайт и введите доменное имя. С помощью кабинета вебмастера можно сообщать поисковикам о появлении новых страниц для быстрого распознавания и в целом следить, как индексируется сайт: нет ли ошибок или страниц, которые вы случайно закрыли от индексации.
Правильно настроенная индексация поможет поисковым системам активнее рекомендовать сайт – а значит, делать его популярнее.
Социальные сети
В первую очередь проследите, чтобы у ваших читателей была возможность поделиться материалом сайта на своих страницах в соцсетях. Для этого нужно установить кнопки репоста в соцсетях на каждой странице сайта. Обычно они уже заложены в шаблон. Создайте профили вашей компании или проекта во всех популярных социальных сетях и добавьте ссылки на них в специальный виджет с иконками соцсетей, который обычно расположен в шапке или боковой колонке сайта. Так посетители смогут переходить на профиль компании, подписываться на страницу, следить за новостями.
Делайте информативные посты на своих страницах в соцсетях с возможностью перейти по ссылке на сайт. Делитесь ссылками с пользователями других групп и сообществ, чья тематика близка тематике сайта или направлению бизнеса. Руководствуйтесь правилом: информация, которой вы делитесь, должна быть действительно интересна и полезна аудитории. Тогда аудитория будет лояльна и сама придет к вам за порцией интересных статей. А вот откровенная реклама и навязывание дают противоположный эффект.
Делайте информативные посты на своих страницах в соцсетях с возможностью перейти по ссылке на сайт. Делитесь ссылками с пользователями других групп и сообществ, чья тематика близка тематике сайта или направлению бизнеса. Руководствуйтесь правилом: информация, которой вы делитесь, должна быть действительно интересна и полезна аудитории. Тогда аудитория будет лояльна и сама придет к вам за порцией интересных статей. А вот откровенная реклама и навязывание дают противоположный эффект.
Популярные вопросы и ответы
Отвечает Андрей Кузнецов, директор компании PLACESTART
Сколько стоит создать сайт самому?
– Сходу сложно сказать, сколько стоит сделать сайт самому, ведь к делу нужен комплексный подход. Следует учитывать, какой именно сайт нужен и для чего. В начале важно ответить на вопросы:
- что будет рекламировать сайт: товары или услуги?
- для кого он будет создан?
После ответа на эти вопросы нужно уже переходить к типу сайта. А далее уже и к выбору, как его создавать. Сделать сайт можно, используя платную версию конструктора – в месяц нужно платить от 150 рублей. Есть, конечно, и бесплатные варианты, они как раз идеально подходят новичкам. Через CMS, например Wordpress, тоже можно создать сайт совершенно бесплатно – придется заплатить только за домен и хостинг.
От чего зависит стоимость сайта у профессиональных разработчиков?
– Она напрямую зависит от целей и задач, которые должен решать сайт: важны выбранные инструменты, стратегия развития и другие факторы. Но в первую очередь необходимо понимать, для чего именно создается тот или иной сайт, после этого уже можно говорить о конкретной стоимости проекта.
Сайт-визитка может стоить порядка 4000-8000 рублей, а вот на сложный проект (интернет-магазин, сайт крупного отеля) можно потратить в два раза больше. Здесь важна именно функциональная сторона – за домен и хостинг плата остается такой же. Нужно разобраться в категориях на сайте, их значении. Именно поэтому с самого начала важно определить его цель и от нее уже двигаться, намечать примерную стоимость.
Сайт-визитка может стоить порядка 4000-8000 рублей, а вот на сложный проект (интернет-магазин, сайт крупного отеля) можно потратить в два раза больше. Здесь важна именно функциональная сторона – за домен и хостинг плата остается такой же. Нужно разобраться в категориях на сайте, их значении. Именно поэтому с самого начала важно определить его цель и от нее уже двигаться, намечать примерную стоимость.
Насколько эффективны сайты, созданные через конструктор?
– Сайты-конструкторы можно рассматривать как тестовые площадки или временное решение. Эффективность их в будущем уменьшится, так как функционал зачастую ограничен и не позволяет решать дальнейшие задачи по развитию проекта.
На начальном этапе такие сайты хорошо подойдут блогам или проектам, сделанным под визитку. А вот для небольших интернет-магазинов лучше использовать CMS – опять же все упирается в функционал. В конструкторе единые шаблоны, а через Wordpress можно добавить необходимые категории, сделать страницу с оплатой и многое другое.
На начальном этапе такие сайты хорошо подойдут блогам или проектам, сделанным под визитку. А вот для небольших интернет-магазинов лучше использовать CMS – опять же все упирается в функционал. В конструкторе единые шаблоны, а через Wordpress можно добавить необходимые категории, сделать страницу с оплатой и многое другое.
Как можно заработать, создавая сайты?
– Чтобы зарабатывать на сайтах, нужно правильно выбрать специализацию. Если она выбрана неверно или разброс сил сразу на несколько сфер, то заработок будет низким – на начальном этапе многие уходят в другое направление деятельности. Всегда нужно ориентироваться либо на спрос на рынке, либо создавать что-то новое, инновационное.
Конкретные примеры: новичок может разрабатывать макет будущего сайта, продумывать его дизайн или работать с графикой. В начале пути не стоит браться сразу за несколько задач, лучше выбрать ту сферу, которая ближе. Возможно, по нраву придется конкретно разработка сайтов – тогда нужно углубиться в программирование, а кому-то нравится оформление, визуал. На последующих этапах профессионального развития создатели сайтов частенько работают в связке с веб-дизайнерами. Это ускоряет процесс работы над проектом и делает последний качественнее.
Конкретные примеры: новичок может разрабатывать макет будущего сайта, продумывать его дизайн или работать с графикой. В начале пути не стоит браться сразу за несколько задач, лучше выбрать ту сферу, которая ближе. Возможно, по нраву придется конкретно разработка сайтов – тогда нужно углубиться в программирование, а кому-то нравится оформление, визуал. На последующих этапах профессионального развития создатели сайтов частенько работают в связке с веб-дизайнерами. Это ускоряет процесс работы над проектом и делает последний качественнее.
Какие советы вы могли бы дать новичку, который только начинает создавать сайты?
– Изучайте только современные инструменты и технологии для работы, читайте специализированную литературу. Хорошая книга для новичков – «Создание сайтов», Анар Бабаев. В ней есть информация и о технической стороне вопроса, и о ведении сайта, о вариантах заработка на нем.
Обязательно пройдите платное обучение (онлайн-курсы) или бесплатную стажировку в крупной компании, чтобы получить багаж знаний и расширить свой кругозор, получить опыт. А дальше уже выбираете то, что больше по душе. Ведь только работа, которая приносит удовольствие, становится хобби. А когда за ваше хобби вы еще и получаете хорошие деньги, это приятнее вдвойне.
Обязательно пройдите платное обучение (онлайн-курсы) или бесплатную стажировку в крупной компании, чтобы получить багаж знаний и расширить свой кругозор, получить опыт. А дальше уже выбираете то, что больше по душе. Ведь только работа, которая приносит удовольствие, становится хобби. А когда за ваше хобби вы еще и получаете хорошие деньги, это приятнее вдвойне.
Фото на обложке: shutterstock.com
