Сегодня мы поговорим о том, как сделать веб-сайт просто и без погружения в код. Оговорюсь сразу: выдать продукт высокого класса, оперируя полученными из этой статьи знаниями, не получится. Однако создать, например, сайт детского садика, школы, цветочного магазина — не проблема.
Начнем с азов: что такое веб-сайт и из каких "частей" он состоит.
Доменное имя
Доменное имя веб-сайта состоит из двух частей: домена первого уровня (.ru, .рф, .com, .net и т.д.) и домена второго уровня — непосредственно имени сайта. Для лучшего понимания изучите картинку ниже.
Получить доменное имя достаточно просто, для этого не нужно обладать какими-то специфическими знаниями. При этом можно получить домен в "некрасивых" зонах типа .ml или .tk совершенно бесплатно. Например, на сайте Freenom.
Более привычный домен в зонах .com, .ru, .net и т.п. можно приобрести у провайдеров доменных имен. Например, на сайтах REG или Jino. Это не самые лучшие и экономичные варианты, однако, если вы новичок, простота — ваш друг и помощник.
Доменное имя приобретается по папортным данным. Это нужно во-первых для того, чтобы вы не размещали на своем сайте сомнительный или мошеннический контент, а во-вторых — для восстановления прав на домен, если его перехватят мошенники.
Доменное имя — такая же собственность, как автомобиль или компьютер. Помните об этом и относитесь к своему доменному имени ответственно.
Хостинг, или место, где лежат сайты
Чтобы понять, как сделать сайт, важно иметь представление о его устройстве и работе. Сейчас я попробую объяснить вам простыми словами, что скрывается за сложным словом "хостинг".
Не секрет, что сайты (вернее, файлы с кодом сайтов и базы данных) размещаются на компьютерах. Эти компьютеры называются серверами и отличаются от наших с вами бытовых машин.
- Сервер — это очень мощный компьютер. Основными параметрами сервера являются CPU (тактовая частота и кол-во ядер), объем RAM (оперативной памяти) и тип/объем накопителя (HDD или SSD).
- Располагаются серверы в дата-центрах. Это специальные помещения, в которых поддерживается необходимый уровень безопасности, осуществляется температурный контроль и мониторинг ключевых параметров сервера. В любой момент вышедшее из строя "железо" готовы починить специалисты дата-центра.
- В отличие от ПК, серверы для веб-приложений не имеют видеокарт. Управление ими осуществляется через интерфейс командной строки.
Поскольку рядовому веб-администратору (хозяину или создателю сайта) такая мощная зверюга обычно ни к чему, серверы дробятся на несколько виртуальных компьютеров. Каждая виртуальная машина получает долю от ресурсов сервера. Продвинутые веб-мастера часто арендуют такие машины с помесячной тарификацией, это называется VPS (Virtual Personal Server) или VDS (Virtual Dedicated Server).
Но новичкам разбираться с виртуальными машинами трудновато. Поэтому на рынке широко распространеныеще более "мелкие" доли сервера в аренду: учетные записи в виртуальных машинах с веб-интерфейсом.
В этом случае в распоряжении пользователя будет находиться только его собственная папка. Управлять сервером, как правило, нельзя. В этой папке можно размещать сразу несколько сайтов. Но учтите: ваши сайты будут делить ресурсы виртуальной машины с "соседями", такими же веб-мастерами, как вы. Если у условного соседа Васи сайт съест все ресурсы виртуальной машины, ваш сайт "упадет" — на время перестанет открываться.
К счастью, хостеры (хозяева виртуальных машин) умеют превентивно ограничивать слишком прожорливые сайты и веб-приложения, так что волноваться на этот счет слишком сильно не стоит.
Итак, самый правильный вариант для новичка — зарегистрироваться у популярного хостера, приобрести у него домен и без труда разместить сайт в папке с именем домена.
Код сайта
Несмотря на то, что это руководство нацелено на людей, не умеющих программировать, пару слов о коде сказать необходимо.
Динамика или статика
Говоря очень упрощенно, сайты бывают статическими или динамическими.
Статические сайты
Статический, самый примитивный сайт представляет собой файл или структуру файлов, отображаемых в браузере при запросе доменного имени. При этом выдача тех или иных файлов сайта осуществляется путем навигации по "папкам" на сервере. Никакой backend-код (например, на PHP, Python или Node.js в формировании сайта не участвует).
Эксперимент:
1. Создайте на рабочем столе папку. Например, "mysite.ru". Создайте в ней текстовый документ со словами "Привет, мир!". Переименуйте текстовый документ из "Текстовый документ.txt" в "index.html". Убедитесь, что изменили расширение файла: иконка с блокнотом должна измениться на иконку браузера.
2. Создайте внутри этой папки подпапку "about". Внутри новой папки поместите еще один файл "index.html", создав его из текстового документа. Содержимое этого файла может быть любым. Главное, чтобы оно отличалось от "index.html", созданного вами ранее.
3. Скопируйте путь к папке из адресной строки проводника.
Теперь вставьте скопированный текст в адресную строку вашего браузера. Если всё сделано правильно, вы должны увидеть надпись "Привет, мир!".
Можно добавить к пути в адресной строке слово "/about" (без кавычек, со слешем), и вы увидите содержимое второго файла "index.html".
Зачем было всё это делать? Как это относится к созданию сайта? Самым прямым образом!
Дело в том, что вы только что создали свой собственный статический веб-сайт. Вот его признаки:
- Весь контент сайта размещается в виде индексных файлов, разложенных по папкам.
- Чтобы добавить страницу, придется создать папку с ее именем на латинице и индексным файлом с нужным содержимым.
- Изменение страниц происходит сугубо из кода.
Точно такой же сайт можно разместить на хостинге — операционная система Linux будет "отдавать" браузеры страницы статического сайта почти так же, как Windows.
При всей простоте статические сайты годятся только для использования в качестве "заглушек". Управлять ими неудобно, а каждое изменение кода сопряжено с возней в HTML-разметке.
Динамические сайты
Подавляющее большинство сайтов в интернете — динамические. Если статический сайт можно сравнить с коробкой (внутри которой еще 100 коробок), то динамический ресурс — это библиотека. Вы приходите и спрашиваете у библиотекаря, как пройти к нужной книге. Суммируем различия между подходами:
- Динамический сайт устроен гораздо сложнее статического
- Часть кода динамического сайта, отвечающая за маршрутизацию пользователя (перенаправление по страницам) и генерацию однотипных страниц-шаблонов осуществляется на сервере средствами backend-языков программирования
- Динамический сайт основан не на каталогах, а на программной логике
- Информацию, размещенную на динамическом сайте, можно изменять при помощи административного интерфейса (админки), а не через правку кода индексных файлов
- Структура динамического сайта в силу пп. 2 и 3 не равна структуре папок на сервере
Если вы уже имеете опыт в создании веб-сайтов, приведенный выше список может показаться вам чрезмерно упрощенным. Но, уверен, новичку и без того трудно разобраться, как работает "этот ваш интернет", так что упрощения помогут преодолеть порог входа и освоиться.
Как вы могли догадаться, сегодня мы будем создавать как раз-таки динамический сайт.
Движок сайта
Движок (система управления контентом, CMS) — это "сердце" динамического сайта. С одной стороны, движок предоставляет хозяину сайта удобный интерфейс для управления. С другой, из коробки готов покрыть 90% задач, стоящих перед сайтом.
На текущий момент самым популярным в мире движком для создания сайтов является бесплатная CMS WordPress. По умолчанию WordPress позволяет создать и настроить личный блог всего за 5 минут. Оставшиеся 30 уйдут на выбор темы оформления сайта, подключение плагинов (допонительных инструментов) и создание первой записи.
Чтобы создать свой первый сайт на WordPress, необходимо:
- Если вы не готовы платить за доменное имя и хостинг, скачайте и установите среду локальной веб-разработки OpenServer. Если же хостинг и домен у вас куплены, обратитесь к хостеру за инструкцией по переносу сайта на WorsPress. Очень часто хостеры предлагают простое развертывание WordPress-сайтов "в один клик". Дальнейшая инструкция предназначена для тех, кто решил попробовать себя в локальном создании сайта на собственном компьютере. Такой сайт не будет виден никому в интернете, однако это отличный старт.
- В установочной папке OpenServer есть папка "domains", в ней создайте подпапку с именем вашего сайта (например, "mysite.ru") и распакуйте в неё содержимое папки "wordpress" из архива WordPress. Важно: перед извлечением файлов откройте вложенную в архив папку "wordpress" и распакуйте в папку сайта ее содержимое.
- Убедитесь, что OpenServer запущен и откройте в адресной строке следующую ссылку: 127.0.0.1/openserver/phpmyadmin/index.php
- Это адрес phpMyAdmin, самой простой программы для работы с базами данных. Логин: root, пароль либо root, либо пустой.
- Создайте новую базу данных (например, "mysite")и запомните ее название. В ней будут помещаться все опции и записи вашего нового блога.
- Далее ПЕРЕзапустите OpenServer (в трее должен появиться зеленый флажок) и впишите в адресную строку браузера: https://mysite.ru/wp-admin/install.php
В поле "Имя базы данных" укажите имя только что созданной базы данных.
В поле "Имя пользователя" укажите: root.
В поле "Пароль" — пароль, использованный для входа в phpMyAdmin.
Прочие поля оставьте без изменений.
После этого WordPress установится (создаст в базе данных требуемую структуру), и вы сможете ввести базовую информацию о сайте, такую как его название, ваши логин-пароль от сайта и т.п.
Залогиниться в административный интерфейс можно по ссылке mysite.ru/wp-admin
Разумеется, "mysite.ru" следует заменять именем своего сайта.
Готово! Ваш первый сайт создан. Можете открыть его, введя доменное имя сайта в адресной строке. Наверняка вы увидите что-то вроде:
Попробуйте изменить внешний вид сайта с помощью Тем оформления — к вашим услугам огромный магазин на любой вкус и цвет. В следующих статьях мы поговорим о том, как произвести тонкую настройку WordPress. Не забудьте подписаться и поставить "Лайк" публикации.
С уважением,
Сергей
