Как сверстать, если никогда не верстал
Публикация страницы в интернете
Как сверстать, если никогда не верстал
Публикация страницы в интернете
В прошлых советах я рассказал, как с нуля сделать простую веб‑страницу с базовым оформлением. Сегодня расскажу, как загрузить и опубликовать страницу в интернете, чтобы её могли увидеть другие люди.
Предположим, что в конце последнего совета у нас получилась такая страница‑визитка — файл index.html с разметкой и стилями:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Иван Фубаров</title>
<style>
body {
font-family: Helvetica;
font-size: 18px;
line-height: 20px;
background-color: #000;
color: #fff;
}
h1 {
font-size: 32px;
}
p {
max-width: 250px;
opacity: 0.9;
}
.highlighted {
color: #ffd500;
}
</style>
</head>
<body>
<h1>
Иван <span class="highlighted">Фубаров</span>
</h1>
<p>Дизайнер, руководитель, философ, любитель луковых оладий.</p>
<p>Помогаю бизнесу выглядеть подтянуто и стильно. Оптимизирую работу дизайнеров.</p>
<p>В свободное время занимаюсь йогой и гуляю с котом 🐈</p>
</body>
</html>
Как страница попадает в интернет
Страницу можно открыть на своём компьютере, если перетянуть ХТМЛ‑файл в браузер.
Чтобы другие люди могли открыть страницу, нужно, чтобы они так же могли обратиться к какому‑то компьютеру и «перетянуть» файл оттуда себе в браузер. Такой компьютер называется сервером.
Сервером может быть и домашний компьютер, но это неудобно и небезопасно. Придётся особым образом настроить компьютер и сетевое оборудование, и всегда держать их включёнными, чтобы люди имели доступ к серверу в любое время.
Большинство сайтов живут на арендованных серверах. Позволить собственные сервера и инфраструктуру могут немногие компании
Проще и надёжнее арендовать готовый настроенный сервер и загрузить туда страницу.
Большинство сайтов живут на арендованных серверах. Позволить собственные сервера и инфраструктуру могут немногие компании
Аренда сервера
Услугу по аренде сервера называют хостингом. Видов хостингов много, они отличаются ценами и специализацией: кто‑то сдаёт простые сервера для несложных сайтов, а кто‑то предлагает мощные серверные кластеры для огромных проектов.
Для размещения нашей страницы подойдёт самый простой хостинг. Стоит выбрать что‑то недорогое, без переплаты за избыточные мощности и с удобным понятным интерфейсом.
Бывают и бесплатные хостинги, но с ними нужно быть осторожнее. Обычно бесплатность компенсируется низкой надёжностью и встроенной рекламой сомнительного содержания. Хороший бесплатный вариант — это Гитхаб Пейджс, но разобраться с ним может быть сложнее, чем с обычными хостингами.
Популярные и зарекомендовавшие себя в рунете хостинги — Рег.ру, Таймвеб и Бегет.
Принципиально крупные хостинги мало чем отличаются, кроме дизайна. Примеры дальше будут для Таймвеба, но для других хостингов особых отличий не будет.
Виртуальный хостинг означает, что на одном физическом компьютере‑сервере сдают места сразу под несколько сайтов, разграничивая их программно. Мощности сервера делятся между сайтами, тонко настроить сервер под себя нельзя. Это недорогое решение для простых сайтов.
Аренда физического сервера целиком гораздо дороже, зато даёт полный доступ к мощностям и позволяет тонко настроить сервер. Это выбор для сложных и высоконагруженных проектов.
Сначала регистрируемся, ищем в меню «Виртуальный хостинг», выбираем самый простой тариф:
Виртуальный хостинг означает, что на одном физическом компьютере‑сервере сдают места сразу под несколько сайтов, разграничивая их программно. Мощности сервера делятся между сайтами, тонко настроить сервер под себя нельзя. Это недорогое решение для простых сайтов.
Аренда физического сервера целиком гораздо дороже, зато даёт полный доступ к мощностям и позволяет тонко настроить сервер. Это выбор для сложных и высоконагруженных проектов.
После выбора тарифа откроется панель управления. Отсюда можно оплачивать и управлять нашим хостингом.
На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф
В разделе «Сайты» добавляем сайт. Сайт в терминах хостинга — это, условно, выделенное в памяти место с файлами, данными и уникальным адресом. Адрес сайта называют доменом и на этом шаге он может выглядеть сложно и непонятно, чуть позже мы приведём его в порядок.
На одном арендованном хостинге можно разместить несколько своих сайтов, если позволяет тариф
В Таймвебе первый сайт создаётся сам при регистрации, ничего добавлять не надо:
Наконец, в разделе «Файловый менеджер» загрузим файл нашей страницы в папку сайта.
Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу
В зависимости от хостинга, названия папок для загрузки файла могут быть public_html или www. Эти папки могут находиться сразу в файловом менеджере или в папке с названием сайта. Если в нужной папке уже лежит файл с названием index, его нужно удалить.
Название файла index указывает на главную страницу, она откроется по умолчанию при заходе на сайт по его адресу
Всё. Сайт уже доступен в интернете, но пока его адрес сложный и неудобный. Разберёмся, как сделать адрес удобным и красивым.
Адрес сайта
На один сайт может вести сколько угодно доменов
По‑правильному, адрес сайта называется доменом. По умолчанию на хостинге доступны и используются бесплатные домены, но они выглядят сложно и некрасиво. Поэтому обычно для сайта арендуют более удобный и красивый домен.
На один сайт может вести сколько угодно доменов
Домены, как и хостинг, не покупаются навсегда. Они арендуются сразу на год или на несколько лет, затем аренду нужно будет продлевать.
Доменная зона может влиять на продвижение сайта в поисковиках, но для простых некоммерческих проектов этим можно не заморачиваться и выбрать зону, которая больше нравится
Цена аренды зависит от доменной зоны — текста после точки в адресе. Адрес в распространённой русской зоне .ru обойдётся дешевле, чем в более солидной коммерческой зоне .com и гораздо дешевле, чем в экстравагантной зоне .xxx.
Доменная зона может влиять на продвижение сайта в поисковиках, но для простых некоммерческих проектов этим можно не заморачиваться и выбрать зону, которая больше нравится
Домены удобно арендовать у той же компании, что и хостинг. В Таймвебе купить домен можно во вкладке «Домены и поддомены», кнопкой «Зарегистрировать домен»:
Большинство доменов с популярными словами уже заняты. Их часто скупают не для размещения сайтов, а специально для перепродажи. Это похоже на бизнес с красивыми автономерами.
Занятый домен можно купить напрямую, связавшись с его владельцем. Купить домен с рук почти всегда гораздо дороже, а сам процесс сопряжён с переговорами и несёт определённые риски. Поэтому к такой сделке нужно подходить очень внимательно и осторожно.
Гораздо проще, если домен занят, подобрать другие слова или изменить доменную зону. Обычно в интерфейсе покупки домена сразу предлагается набор похожих вариантов, вместо занятого:
Когда домен подобран и оплачен, его привязывают к сайту через раздел «Сайты» в панели управления. Вскоре после привязки, сайт начнёт открываться по нужному домену.
Сайт на хостинге можно изменять и обновлять. Например, изменить главную страницу и загрузить её новую версию, или добавить больше страниц. В рамках тарифа можно добавлять новые сайты, покупать и привязывать больше доменов. Только не забывайте вовремя продлевать аренду хостинга и доменов, чтобы всё работало без перебоев.
P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.