Чтобы опубликовать вёрстку в интернете, понадобится хостинг, домен и сами файлы вёрстки. Для примера опубликуем сайт‑визитку.
Хостинг — это компьютер, сервер, где лежат файлы сайта. Такой компьютер должен быть особым образом настроен и включён 24/7, поэтому использовать свой компьютер для хостинга — удел энтузиастов и крупных компаний. Обычно хостинг арендуют, цена аренды зависит от мощности хостинга: для сайта‑визитки хватит хостинга за 400 ₽ в месяц, а для крупного интернет‑магазина цена измеряется десятками тысяч.
Домен — это уникальный адрес вида yandex.ru, где .ru — одна из множества существующих доменных зон: .com, .net, .io и так далее. Домен указывает на хостинг: при вводе домена, браузер откроет файлы сайта, лежащие на хостинге. Домен платно регистрируется и продлевается каждый год. Цена зависит от доменной зоны: регистрация домена в зоне .ru обойдётся в 200 ₽, а в зоне .casino — больше 20 тысяч.
Файлы сайта, в нашем случае, — это ХТМЛ‑вёрстка и ЦСС‑стили. В продвинутых случаях — скрипты, медиафайлы, базы данных.
Покупка хостинга
Беплатные хостинги, за редким исключением, рассматривать не стоит. Они часто используются мошенниками и находятся под санкциями: сайты не появляются в поисковиках, а браузеры не пускают посетителей на «небезопасные сайты». Ещё бесплатные хостинги могут встроить на сайт рекламу.
Надёжнее и безопаснее арендовать хостинг у проверенной компании — провайдера. Провайдеров много, возьмём для примера Таймвеб, но принцип работы везде одинаковый.
Виртуальный хостинг — самый доступный. Вы арендуете не сервер целиком, а лишь кусочек его ресурсов. Это как строить дом с нуля или купить квартиру в ЖК. Дом сложнее и дороже, зато можно построить что угодно. Виртуальный хостинг ограничен в настройке, но для простых сайтов его хватит за глаза.
На сайте Таймвеба выберите «виртуальный хостинг», зарегистрируйтесь и сразу пополните счёт. В 2024 базовый тариф стоит 342₽ в месяц.
Виртуальный хостинг — самый доступный. Вы арендуете не сервер целиком, а лишь кусочек его ресурсов. Это как строить дом с нуля или купить квартиру в ЖК. Дом сложнее и дороже, зато можно построить что угодно. Виртуальный хостинг ограничен в настройке, но для простых сайтов его хватит за глаза.
Покупка домена
Таймвеб предлагает и бесплатные домены, но их не стоит использовать, кроме как в тестовых целях, — бесплатные домены часто под санкциями из‑за использования мошенниками.
В «Доменах» придумайте и зарегистрируйте адрес сайта:
Таймвеб предлагает и бесплатные домены, но их не стоит использовать, кроме как в тестовых целях, — бесплатные домены часто под санкциями из‑за использования мошенниками.
Затем перейдите в «Домены», «Администраторы», и создайте администратора — юридического владельца нового домена.
Привязка домена
В «Сайтах», удалите предустановленный сайт и создайте новый. При создании укажите имя папки, где будут лежать файлы сайта. Лучше назвать папку по адресу сайта, это удобно, если захотите создать ещё один сайт — тариф это позволяет.
Привяжите к созданному сайту домен, должно получиться так:
На привязку домена потребуется время. В целом, любые операции с доменами, особенно новыми, могут занимать часы. Пока загрузим файлы сайта.
Загрузка файлов сайта
В «Файловом менеджере» перейдите в папку сайта, затем в public_html. Удалите оттуда всё и перетащите внутрь файлы своего сайта. В случае с нашей визиткой получится так:
Выпуск ССЛ‑сертификата
Осталась последняя мелочь — ССЛ‑сертификат. Это особый ключ, чтобы браузер читателя мог убедиться, что ваш сайт не подменили мошенники. ССЛ‑сертификат требуют все современные браузеры.
Адрес сайта без ССЛ начинается с http:// и браузеры покажут предупреждение при попытке туда зайти. Не все рискнут проигнорировать предупреждение и зайти на такой сайт.
Адрес сайта с ССЛ начинается с https://, а в адресной строке браузера появляется замочек и читатели без проблем смогут зайти на такой сайт.
«Домены», «SSL‑сертификаты», «Заказать». Выберите бесплатный сертификат от Let’s Encrypt, его достаточно для небольших сайтов.
Если при заказе сертификата в списке доменов нет нашего домена, подождите несколько часов и повторите попытку.
Дождитесь, пока в «Сертификатах» статус вашего сертификата изменится на «Установлен». Затем в «Сайтах», в настройках сайта, «Использовать безопасное соединение».
Проверка результата
Введите домен в адресной строке браузера. Вы должны увидеть свою вёрстку. Если этого не происходит, проверьте предыдущие действия и подождите несколько часов. Если сайт всё ещё не работает — напишите в поддержку Таймвеба, они помогут разобраться.
Обновление сайта
Редактировать файлы сайта можно из файлового менеджера хостинга, но лучше так не делать, чтобы случайно не сломать работающий сайт.
Работайте с файлами на своём компьютере, тщательно тестируйте и только потом обновляйте файлы на хостинге. После замены файлов обязательно проверьте, что сайт обновился и работает без проблем.
Браузеры могут кешировать — запоминать — файлы сайтов и не обновлять их у читателей. Борьба с этим — отдельная большая тема.
Пока используйте базовый приём: при изменении любого файла, на который есть ссылка в ХТМЛ, допишите в конец ссылки новую версию в виде ?v=2. Браузер увидит, что адрес изменился и перекачает файл, так читатели получат его актуальную версию.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.