Как создать свой сайт

Обсудить
Как создать свой сайт

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

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

Шаг 1: Выбор платформы

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

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

Обратите внимание на то, что CSS и JavaScript – необязательные компоненты, и вы вполне можете сделать сайт без них. Однако если без JavaScript прожить еще можно, то без CSS создать полноценный сайт почти нереально. На практике, конечно, можно, но выглядеть он будет как веб-ресурс из 2000-х.

Сайт сына маминой подруги

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

То есть вы можете самостоятельно создать сайт на HTML и CSS, а затем внедрить его в одну из CMS. Либо вы можете установить CMS на сервер и сделать сайт с помощью шаблонов. Естественно, что шаблон никогда не сможет заменить сайт, созданный с нуля, но это отличный способ для тех, кто не знает языка разметки и не умеет программировать.

Топ-5 лучших CMS для запуска сайта в 2021 году:

  1. WordPress
  2. Joomla!
  3. Drupal
  4. Typo3
  5. Serendipity

Первый в списке – WordPress, и возглавляет топ он не просто так. WP – это самая популярная система управления контентом в мире. На ней было создано множество популярных сайтов: Mercedes-benz.com, Thewaltdisneycompany.com, Lifehacker.ru и многие другие. Кроме того, WordPress славится своими шаблонными решениями. 

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

Список 5 популярных конструкторов сайтов в 2021 году:

  1. Tilda Publishing
  2. LPgenerator
  3. WIX
  4. uKit
  5. uCoz

Рекомендую обратить внимание на Tilda – мощный инструмент для создания различных сайтов: лендингов, многостраничников, интернет-магазинов. Это идеальный конструктор для тех, кто совершенно не разбирается в веб-разработке. Создать сайт на Тильде сможет даже ребенок – интерфейс сервиса крайне прост. Разумеется, у Тильды есть и расширенный функционал – например, можно добавлять сторонний код, чтобы воссоздать то, чего нельзя сделать стандартным функционалом. Для работы потребуется подключение тарифа Personal, стоимость которого составляет 750 рублей в месяц.

Подождите убегать, это не такая большая сумма, и сейчас вы в этом убедитесь. Дело в том, что на Тильде уже встроен хостинг и бесплатно подключается защищенный протокол HTTPS. Единственная дополнительная трата – это оплата доменного имени. На обычном же сайте, например, на WordPress, потребуется оплатить хостинг, а также подключить SSL-сертификат за отдельную стоимость. Поэтому 750 рублей в месяц это не такая большая сумма, особенно если сайт приносит большой поток клиентов.  

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

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

Каждый сайт в сети идентифицируется уникальным именем – например, google.com или timeweb.com. Такое имя принято называть доменом, обычно оно приобретается у регистратора доменов, а затем устанавливается на хостинг. Существуют и бесплатные домены, но такой вариант больше подходит для тестируемого сайта, нежели для полноценного и рабочего.

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

Давайте создадим аккаунт на хостинге Timeweb и подключим к нему домен:

  1. Переходим на официальную страницу хостинга и в верхнем меню нажимаем на кнопку «Вход для клиентов».Бесплатный хостинг
  2. На отобразившейся странице выбираем «Регистрация».Хостинг Timeweb регистрация
  3. Вводим свое имя и почтовый адрес, затем жмем «Стать клиентом».Timeweb хостинг
  4. 10-дневный тестовый период активирован. Теперь мы будем перенаправлены в свой личный кабинет – здесь и будут происходить все взаимодействия с сайтом. Чтобы подключить к нему новый домен, откроем раздел «Домены и поддомены».Как на Timeweb подключить новый домен
  5. Здесь мы можем как зарегистрировать новый домен, так и добавить уже существующий. Если вы ранее покупали где-то доменное имя или хотите получить бесплатное, то выберите «Добавить домен». Чтобы купить новый домен, необходимо нажать на кнопку «Зарегистрировать домен» и подобрать нужное имя. Для примера подключим бесплатный домен, который выдается хостингом.Как на Timeweb подключить бесплатный домен
  6. Таймвэб позволяет воспользоваться тестовыми зонами .tmweb.ru, .tw1.su, .tw1.ru, .webtm.ru. Например, мы можем создать бесплатный домен типа myfirstsite.webtm.ru. Обратите внимание на то, что доменное имя может быть занято. Если оно будет свободно, то напротив него отобразится зеленая галочка. После этого можно нажать на кнопку «Добавить».Как на Timeweb добавить новый домен
  7. Готово! Теперь мы можем перейти по указанному домену – достаточно ввести его в строку запроса браузера, куда прописываются адреса страниц. В результате должна отобразится информация о хостинге – это нормально, так как мы еще не создали сайт. Сайт на Timeweb

Как видите, подключить свой домен совсем не сложно. Теперь можно переходить к созданию собственного сайта.

Шаг 3: Создаем сайт

Ранее мы рассмотрели популярные CMS-платформы, а также подключили доменное имя к будущему сайту. Перейдем непосредственно к разработке веб-сайта – в этой статье мы не будем писать свой код, а рассмотрим лишь те способы построения страницы, которыми могут воспользоваться новички. Это использование шаблонов в WordPress, а также конструирование сайта в Tilda. 

Как создать сайт на WordPress

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

  1. Переходим в раздел «Каталог CMS» и выбираем WordPress.Как на Timeweb установить WordPress
  2. В отобразившемся окне выбираем «Установить приложение».Как поставить на Timeweb WordPress
  3. Выбираем доменное имя, активируем создание новой базы данных и нажимаем на «Начать установку».Как на хостинг Timeweb поставить WordPress
  4. Готово! Теперь домен соединен с новым сайтом, а мы можем переходить к его модернизации. Для начала откроем административную панель –жмем на «Перейти к приложению».Как открыть админку WordPress после установки
  5. Вводим данные для входа, указанные после установки WordPress, и жмем «Войти».Как войти в административную панель WordPress
  6. Далее мы мы попадаем в админку WordPress – здесь и будем проводить все модификации с сайтом. В первую очередь нас интересует его внешний вид – для этого перейдем в раздел «Внешний вид» -> «Темы» и в правой части нажмем «Добавить новую».Как изменить тему в WordPress
  7. Выбираем вкладку «Популярные» и попадаем в огромный магазин с различными темами – на данный момент их 3918. Для примера возьмем тему «Agencyup» и установим ее.Как установить тему в WordPress
  8. На этой же странице активируем ее.Как активировать тему в WordPress
  9. Теперь можем открыть сайт и убедиться в том, что тема активировалась. Для этого в верхнем левом углу наведем курсор мыши на название WordPress и нажмем на «Перейти на сайт».Как посмотреть свой сайт на WordPress
  10. В результате перед нами отобразится страница сайта. Чтобы ее кастомизировать, в верхнем меню есть специальная кнопка «Настроить», которая открывает доступ к редактированию доступных блоков: меню, футера, главной страницы и прочих элементов.Как настроить шаблон в WordPress

Вот так происходит создание сайта на WordPress. Помимо использования доступных тем, вы можете создавать свои собственные – в таком случае потребуются знания HTML, CSS, PHP и JavaScript. Кроме того, из этого вы можете построить неплохой бизнес – создание сайтов на WordPress пользуется большой популярностью во всем мире!

Как создать сайт на Tilda

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

Давайте создадим простой сайт из нескольких шаблонных блоков и одного ZERO-блока:

  1. Переходим на официальную страницу Tilda и проходим регистрацию.Тильда регистрация
  2. После этого мы попадаем на главную страницу конструктора сайтов. Первым делом подключим тариф Personal, чтобы получить доступ ко всем функциям. Для новых аккаунтов он выдается бесплатно на 2 недели. Откроем раздел «Тарифы и оплата», чтобы его подключить.Как подключить бесплатный тариф Personal в Tilda
  3. Выбираем «Активировать».Бесплатный аккаунт Personal Tilda
  4. Возвращаемся в раздел «Мои сайты» и создаем пустой сайт.Как на Тильде создать сайт
  5. Придумываем ему название.Создание сайта на Тильде
  6. Создаем новую страницу.Как создать новую страницу на Тильде
  7. В результате перед нами отобразится список доступных шаблонов, а также возможность создать пустую страницу. Давайте для примера возьмем первый шаблон и добавим в него ZERO-блок – посмотрим, что он собой представляет и какой есть функционал у конструктора.Как создать свой сайт на Тильде
  8. Пройдемся немного по основным кнопкам. В верхней части расположено меню, через которое мы можем перейти в предпросмотр веб-сайта, опубликовать его, настроить и обратиться к техподдержке. Кнопка «Опубликовать» позволяет внести изменения в реальный сайт – если вы подкорректировали какие-либо блоки, то сохранить эти изменения можно именно с помощью кнопки «Опубликовать». Ниже идут различные блоки, над которыми находится еще одно меню – оно отвечает за редактирование самого блока.Как создать свой сайт с нуля на Тильде
  9. ZERO-блок – это тот блок, который мы можем создавать своими руками. В данный момент перед нами расположены только шаблонные варианты, которые мы можем корректировать с ограниченным функционалом, т.е. добавить в правую часть какую-нибудь картинку у нас не получится. Именно для этого существует ZERO-блок – помощник для безграничной кастомизации. Чтобы его добавить, необходимо сначала создать новый блок – для этого наводим курсор мыши на область между любыми двумя блоками и нажимаем на кнопку в виде плюса.Как добавить Zero-блок в Тильде
  10. Следующим шагом в нижнем левом углу выбираем «Нулевой блок».Как создать Zero-блок в Тильде
  11. Наводим курсор мыши на созданный блок и переходим к его редактированию.Как отредактировать блок в Тильде
  12. Именно здесь мы можем вносить всевозможные изменения – добавлять текст так, как нам хочется, изменять его шрифт, работать с различными инструментами и многое другое. В общем, функционал довольно обширен. Вы можете самостоятельно изучить ZERO-блок, а если что-то будет непонятно, то обратитесь к справочному центру Tilda. После редактирования блока не забываем нажать на «Save» и «Close», чтобы выйти из него.Как сохранить Zero-блок в Тильде
  13. Теперь давайте посмотрим, что у нас получилось – для этого в верхнем правом углу нажимаем «Опубликовать».Как опубликовать сайт в Тильде
  14. Следующим шагом нажимаем «Открыть страницу».Как открыть свой сайт на Тильде
  15. В результате мы видим, что был применен созданный нами шаблон.Как создать свой сайт на Тильде бесплатно

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

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

Спасибо за внимание!

Комментарии

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