Урок 10. Размещение сайта на хостинге.

Курс html/css для подростков 12+

Урок 10. Размещение сайта на хостинге.

Что такое хостинг и сервер. Пример того, как можно разместить сайт на хостинге hts.ru, воспользовавшись тестовым периодом.


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

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

Существует множество компаний предоставляющих хостинг. Демонстрационный пример будет воспроизведен с использованием хостинга компании ООО «Хостинговые Телесистемы». 

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

Заходим на сайт компании ООО «Хостинговые Телесистемы» hts.ru. 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_01.png 

Далее нажимаем «Хостинг» (выделено красной линией). 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_02.png 

Нажимаем «Заказать». 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_03.png 

Нажимаем «заказать тестовый период». 

 

 

В следующем окне заполняем поля. 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_05.png 

Далее нажимаем «Оформить заказ» и получаем следующее сообщение: 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_06.png 

Обратите внимание, что тестовый период начнется через 10 минут. Нажимаем «продолжить». 

Примечание: на момент написания статьи появилось окно с опросом. Я его просто закрыл: 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_07.png 

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

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

Далее произведу небольшую экскурсию по тому, что здесь есть. 

В левом столбике находятся следующие разделы: «Мойаккаунт», «Избранное», «Управление», «Помощь». 

Раздел «Мойаккаунт» понадобится тогда, когда Вы будете оплачивать хостинг или заказывать новые услуги. Думаю, что там Вы разберетесь сами. 

В раздел «избранное» можно добавлять ссылки со страниц управления, честно говоря, на момент написания статьи я не разобрался, как он работает. 

Раздел «управление» - как раз тот раздел, который нам нужен для создания сайта. С ним мы познакомимся по ходу работы. 

В разделе «Помощь» находятся «Службаподдержки» - страница, где вы можете задать вопросы в службу поддержки. Как показала практика, она работает круглосуточно и всегда отвечает достаточно быстро. О том, что она ответила всегда приходит сообщение в почту, это очень удобно, не надо постоянно находиться на сайте, что бы сразу получить ответ. 

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

С остальным можете ознакомиться сами. 

Что бы двигаться дальше, необходимо знать и понимать, что такое «домен» или «доменное имя сайта». Если данный термин Вам не понятен, то посмотрите в адресную строку браузера: 

 

Здесь «dvkuklin.ru» как раз и есть доменное имя сайта. Дополнительно об этом можно почитать в Интернете. 

Теперь приступим к настройке всего необходимого для нашего сайта. 

Заходим в «Управление→Файлы». 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_09.png 

Здесь находится, своего рода, «проводник» для работы с папками и файлами того «кусочка» сервера, который мы «арендовали». Как видите, уже имеется три папки, и три файла. Файлы не трогаем. Папки на данный момент пустые. В папку «logs» будут записываться лог-файлы, в которых содержится информация о том, какой файл, когда и куда был передан. В нашей ситуации её не трогаем. Папка «tmp» нам тоже не интересна. А вот папка «htdocs» как раз та папка, в которой должны находиться файлы нашего сайта. Но это не обязательно так. Можно создать папку с любым другим именем, как Вам угодно. Тем не менее обычно файлы сайта находятся в папке с именем «htdocs». 

Если Вас устраивает папка «htdocs», то ничего тут не делаем. Если Вам нужна другая папка, то создайте её. Я оставлю «htdocs». 

Далее зайдем в «Управление→Домены». 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_10.png 

Здесь у нас только одно доменное имя. Это потому, что мы еще не зарегистрировали свой домен. Данный домен дается навсегда при приобретении хостинга. Он нужен для того, что бы тестировать внесенные изменения на тестовом сайте и не мешать при этом работе настоящему сайту. Т.е. в дальнейшем, когда сайт у Вас уже заработает, то вносить изменения Вы будете как раз в тестовый сайт с этим доменом, потом будете его тестировать, и если все хорошо, то тогда изменения внесете в основной сайт. 

Теперь свяжем этот домен с папкой «htdocs» (у Вас может быть другая папка). Это нужно для того, что бы при вводе данного домена в адресной строке браузера именно из этой папки были переданы файлы. 

Нажимаем на наш тестовый домен (на скриншоте обведен красной линией). 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_11.png 

Далее нажимаем на «Сайты». 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_12.png 

Далее нажимаем на «Создать связь Домен-Каталог». 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_13.png 

В строке «Каталог вводим имя нашей папки. Больше ничего не меняем и внизу окна нажимаем на «Создать» 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_14.png 

Обратите внимание на сообщение: «Изменения вступают в силу в течении 10 минут». Это означает, что связь домен-каталог заработает в течении этого времени. 

В это время создадим страницу, что бы проверить, что все работает. 

Возвращаемся в «Управление→Файлы». Заходим в папку «htdocs» (в ту, которую связали с доменом). Нажимаем «Создать файл». Указываем имя «index.html». И нажимаем «Создать». 

Примечание: как правило всегда, когда набирают доменное имя в адресной строке браузера получают файл с именем «index.html» или «index.php». Так принято. Можно настроить сервер и по-другому, что бы он выдавал другой файл, но в нашем случае что либо менять нет смысла. 

Можно сказать, что мы создали файл главной страницы нашего сайта. Теперь нажмем на карандашик: 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_15.png 

Откроется окно для редактирования содержимого файла: 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_16.png 

Здесь выбираем «utf8» и водим следующий текст: 

<!doctype html> 

<head> 

  <meta charset="utf8" /> 

</head> 

<body> 

  <h1> 

    Привет всем! Ура! Мы создали сайт! 

  </h1> 

</body> 

Примечание: «utf8» - кодировка символов, в которой есть кириллица. Если выбрать другую кодировку, то вместо русских букв появятся иероглифы.  

Нажимаем сохранить. И если прошло более 10 минут с момента создания связи домен-каталог, то можно проверить все ли работает. В новой вкладке браузера наберите именно Ваш домен (в моем случае это «srv92372.ht-test.ru»). И должна открыться следующая страница: 

https://dvkuklin.ru/HCMS/HCMS_01/HCMS_01_17.png 

Поздравляю! Если у Вас все получилось, то Вы создали сайт.  

 

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

 

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

 

Связаться с поддержкой можно на соответствующей странице: