Хостинг Фри! Бесплатный хостинг.

Предварительная подготовка для изучения раздела "Бесплатный хостинг".

Традиционно все курсы на данном сайте, включая данный курс "Бесплатный хостинг" можно изучать изолированно от других курсов, включая выполнение практических примеров.

И все-таки, я настоятельно рекомендую вам предварительно пройти курс "Курс 1 HTML. За 1 час от полного новичка до новичка с начальными знаниями HTML." в текстовом и/или видео формате.

Хотя сайты бесплатного хостинга, которые мы будем изучать, предоставляют не только фронтенд, но и бакенд (PHP, Python, Node.js, БД MySQL), а также шаблоны для построения сайтов, но, все-таки, отсутствие знаний HTML часто вызывают у пользователей неожиданные вопросы и ведут к неожиданным проблемам.

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

Два примера сайтов на бесплатном хостинге.

Для начала давайте рассмотрим два примера сайтов на бесплатном хостинге.

• http://f0630527.xsph.ru/ - Сайт f0630527.xsph.ru на бесплатном хостинге "СпринтХост". Опасный протокол http. Поддержка PHP, Python, Node.js.
• https://ab.h1n.ru/ - Сайт ab.h1n.ru на бесплатном хостинге "ХостиМан". Безопасный протокол https. Поддержка PHP.

Рассмотрим скриншоты обоих вариантов.

Смысл обоих сайтов такой. В результате прохождения курса Курс 1 HTML мы создали некий одностраничный сайт "Краткий справочник популярных элементов HTML" и теперь здесь закидываем этот сайт на бесплатный хостинг для закрепления и углубления наших знаний HTML и вообще фронтенда.

При этом сам этот "справочник" будет не на главной странице, а на уровень глубже:

• http://f0630527.xsph.ru/html/ - "Справочник HTML" на сайте f0630527.xsph.ru.
• https://ab.h1n.ru/html/ - "Справочник HTML" ab.h1n.ru.

Главные страницы обоих сайтов содержат некое общее описание и разные ссылки по теме, в том числе и ссылку на наш "Краткий справочник популярных элементов HTML".

В дальнейшем я планирую, что оба проекта (но может и только один из них) будут развиваться по мере выполнения практических заданий по курсам CSS, JS, разным библиотекам (фреймворкам) JS, серверным языкам, базам данных и т.д.

Таковы планы. Что из этого реально получится - посмотрим.

Обзор и сравнение. Зачем хостинговые компании предоставляют бесплатный хостинг. Главный типичный недостаток бесплатного хостинга и как его можно избежать. Протоколы http и https.

Зачем хостинговые компании предоставляют бесплатный хостинг?

Это такой хитрый рекламный трюк.

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

Все логично, просто и понятно.

Главный типичный недостаток бесплатного хостинга.

Давайте, внимательно присмотримся к адресной строке нашего тренировочного сайта http://f0630527.xsph.ru/

Что это за черный треугольник с восклицательным знаком? Что значит надпись "Не защищено"?

Это неприятно, но это еще можно пережить. Хуже другое. Некоторые особо мнительные браузеры (в частности "Google Chrome") могут выкинуть такой забавный фокус. При попытке нажать на этом сайте какую-либо внутреннюю ссылку, например, на наш "Справочник HTML": http://f0630527.xsph.ru/html/, браузер отобразит вот такое предупреждение.

Попасть на нужную страницу все-таки можно. Для этого надо нажать кнопку "Сведения".

Да, теперь следует нажать на ссылку с текстом перейти на страницу.

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

Проблема легко решается, если запустить тот же браузер Гугл Хром в т.н. "режиме Инкогнито".

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

Тут проблема в том, как заставить всех посетителей сайта перейти в этот режим? Проблема.

В чем же причина кошмара описанного выше? Как его можно избежать?

Существуют 2 протокола передачи данных в Интернете.

HTTP (HyperText Transfer Protocol) - опасный протокол! Именно его использует сайт http://f0630527.xsph.ru/ - именно это и является основой всех неприятностей, описанных выше.

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

Сам домен xsph.ru становится "зашкваренным", пристанищем всякого рода аферистов, а не только честных пользователей вроде меня и вас.

Опасный протокол и "зашкваренный" домен вот что заставляет браузер Гугл Хром так отчаянно ругаться словами "Не защищено", "опасно", "фишинг", "Осторожно, поддельный сайт!" и пр.

Решение проблемы есть и мы рассмотрим его на примере нашего второго учебного сайта.

HTTPS (HyperText Transfer Protocol) - безопасный (или защищенный) протокол! Именно его использует сайт https://ab.h1n.ru/ - элегантное решение всех проблем.

Решение элегантное и простое. Просто надо заплатить мизерную копеечную сумму (тариф Free+) и все эти проблемы решены кардинально. Тут дело не в деньгах. Просто человек, который платит (пусть даже жалкие копейки) подтверждает, что он порядочный человек, а не жулик. Жулик никогда не будет светить банковскую карту, т.к. в случае чего, его легко будет вычислить. Банк не выдает свои карты просто так, он тщательно фиксирует все данные о человеке, который получает карту.

В результате получается вот такой сайт с чистым коротким красивым поддоменом как, например, мой https://ab.h1n.ru/ или ваш, когда вы зарегистрируете поддомен под данный учебный проект. Попробуйте, покликайте ссылки на данном сайте. Все чисто. Вы никогда не получите предупреждений типа тех, о которых написано выше. Вот в чем важность безопасного протокола и чистого домена.

Далее, я буду демонстрировать работу на обоих поддоменах, и вам советую сделать тоже самое, чтобы вы могли лучше прочувствовать разницу.

Получение аккаунтов на бесплатном хостинге

Для получения аккаунтов на данных ресурсах, кликните соответствующие ссылки на наших тренировочных сайтах:

Или, если это покажется более удобным, воспользуйтесь этими же ссылками прямо здесь:

• Спринт Хост - кликаем здесь для получения аккаунта на "Спринт Хост"
• HostiMan - кликаем здесь для получения аккаунта на "Хости Ман"

Далее все интуитивно понятно, но есть несколько важных специфических моментов, о которых лучше узнать заранее.

Авторизация.

• "Спринт Хост" - авторизация через социальные сети "В Контакте", "Фейсбук", "Гугл".
• "Хости Ман" - собственная авторизация, заранее подготовьте емейл и пароль, который лучше не забывать.

"Спринт Хост" предоставит вам субдомен без вашего выбора, сформированный автоматом

Рассмотрим структуру этого субдомена.

• f0630527 - пользователь никак не может повлиять на этот адрес. Мне достался вот такой номер, а у вас может оказаться, например, f0666000, или еще черт знает что. Тут уж как повезет.
• xsph.ru - это домен, который принадлежит хостингу, на него вешаются все субдомены пользователей, и мой, и ваш, в том числе.

"Хости Ман" дает пользователю возможность выбрать субдомен.

Рассмотрим структуру этого субдомена.

• ab - вот тут следует подойти вдумчиво и серьезно. Выбирайте короткий и звучный поддомен, который соответствует вашим интересам. Например, неплохие имена "car" или "auto", при условии, что вы намерены бороздить автомобильную тему и т.д. Также рекомендую выбрать тариф "Free+", а не просто "Free", чтобы избежать неприятных моментов, описанных выше.
• h1n.ru - это домен, который принадлежит хостингу, на него вешаются все субдомены пользователей, и мой, и ваш, в том числе.

Первичный контент для бесплатных сайтов. Процесс подготовки контента.

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

Это простая страничка с приветствием и, возможно, полезными ссылками по данному хостингу.

Обратите внимание, что будет также направлено письмо на вашу почту с важной информацией: ваши регистрационные данные, ссылки на инструкции и панель управления, информация по доступу по ftp и ssh и т.д.

Скачайте первичный контент для каждого из 2-х сайтов по данным ссылкам:

• первичный контент для "Спринт Хост"
• первичный контент для "Хости Ман"

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

Давайте, распакуем каждый дистрибутив в определенные папки (предварительно их создав), например, сюда:

• d:\sites_train\xsph_ru\ - контент для "Спринт Хост"
• d:\sites_train\h1n_ru\ - контент для "Хости Ман"

* Если у вас возникают вопросы типа "как создать папку" и т.п., то я крайне деликатно напомню, что все подобные вещи мы изучили заранее, см курсы: Курс 1 HTML, Cmd.exe.

Папка с контентом для "Спринт Хост"



Папка с контентом для "Хости Ман"



Краткое описание контента для каждого из этих двух сайтов

• index.html - главный файл сайта.
• css - стили сайта хранятся в файле style.css, который находится в данной папке. Как этот файл подключается - см файл index.html, о котором сказано выше.
• files - здесь склад разных файлов для данного сайта. Как они подключаются, см курс Курс 1 HTML.
• html - здесь файл index.html с контентом "Краткий справочник популярных элементов HTML" в чистом html виде.
• img - папка с разными картинками, графическими файлами.
• php - в этой папке файл index.php - это наш прицел на будущее, для демонстрации, что данный хостинг поддерживает серверное программирование. Это нам будет нужно, когда начнем изучать бакенд

А теперь - самое интересное! Творческая практика. Запускаем наш любимый редактор VS Code, и правим файлы, которые подвернутся под руку, кто во что горазд. Чем оригинальнее изменения, тем лучше. В текстовых файлах меняйте код. А графические файлы просто меняйте, вместо самолета, например, поставьте ракету, а вместо медведя поставьте девушку.

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

На что обращаем внимание в контенте для наших сайтов.

А обращаем мы внимание на следующие моменты.

Вот в этих файлах:

• d:\sites_train\xsph_ru\index.html - главный файл для сайта на хостинге "Спринт Хост"
• d:\sites_train\h1n_ru\index.html - главный файл для сайта на хостинге "Хости Ман"

Имеют место быть HTML элементы и/или атрибуты элементов, которые мы не изучали на нашем курсе Курс 1 HTML.

Что ж, изучим их прямо сейчас, по ходу пьесы.

Иконки для отображения на вкладке браузера.

Пример использования на хостинге "Спринт Хост":

<link rel="icon" type="image/png" href="/img/favicon_60x60.png"> <link rel="icon" type="image/svg+xml" href="/img/favicon_60x60.svg">

Пример использования на хостинге "Хости Ман":

<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon">

В первом случае мы используем 2 разных файла "под иконку": favicon_60x60.png и favicon_60x60.svg, предоставляя браузеру выбор, какой именно файл использовать. Причем, обратите внимание, файлы эти для иконок имеют достаточно большой размер 60x60 пикселей. Имеется в виду, что браузер подожмет эти файлы автоматом и отобразит в маленьком виде.

Во втором случае используется для иконки единственный файл favicon.ico, причем в формате, который как раз и заточен под эти самые иконки.

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

Теорию вопроса изучаем здесь, если такое желание появилось:

https://developer.mozilla.org/ru/docs/Web/HTML/Element/link


Также HTML элемент link в комбинации с атрибутом rel="stylesheet" позволяет подключать файлы стилей.

На обоих наших тренировочных сайтах файлы стилей подключаются одинаковым способом:

<link rel="stylesheet" href="/css/style.css" type="text/css" />

Технологию CSS мы будем изучать позднее, когда освоим HTML как следует не только в теории, но и на практике, а пока обратите внимание на следующие моменты:

• Все файлы *.html, *.php подключают один и тот же файл стилей style.css.
• И как следствие из пункта выше: изменяем какой-то стиль в файле style.css и это сразу сказывается на всех файлах *.html, *.php

Программы для сервера - проверка возможности их выполнения.

• d:\sites_train\xsph_ru\php\index.php - возможность выполнения серверных скриптов для сайта на хостинге "Спринт Хост"
• d:\sites_train\h1n_ru\php\index.php - возможность выполнения серверных скриптов для сайта на хостинге "Хости Ман"

Да, пока еще мы с вами не доросли до серверного программирования. Пока просто возьмем на заметку: на обоих хостингах возможность использовать серверные скрипты есть, и эта возможность демонстрируется отработкой функции phpinfo(INFO_ALL);.

"Краткий справочник популярных элементов HTML"

Этот самый справочник, который мы так тщательно делали на курсе Курс 1 HTML.

Справочник состоит из единственного файла index.html и располагается он здесь:

• d:\sites_train\xsph_ru\html\index.html - "Краткий справочник популярных элементов HTML" для сайта на хостинге "Спринт Хост"
• d:\sites_train\h1n_ru\html\index.html - "Краткий справочник популярных элементов HTML" для сайта на хостинге "Хости Ман"

Файлы (картинки, звуки, видео) для "Краткого справочника популярных элементов HTML"

Все эти файлы находятся здесь:

• d:\sites_train\xsph_ru\files\*.* - файлы (картинки, звуки, видео) для "Краткого справочника популярных элементов HTML" для сайта на хостинге "Спринт Хост"
• d:\sites_train\h1n_ru\files\*.* - файлы (картинки, звуки, видео) для "Краткого справочника популярных элементов HTML" для сайта на хостинге "Хости Ман"

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

Разные файлы для каждого сайта

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

• d:\sites_train\xsph_ru\img\*.* - файлы для сайта на хостинге "Спринт Хост"
• d:\sites_train\h1n_ru\img\*.* - файлы для сайта на хостинге "Хости Ман"

Итак, к этому моменту мы должны внести какие-то свои изменения в эти файлы (ну, не зря же мы изучили VS Code, разобрались досконально, где какие файлы и для чего они нужны. Настало время для самого интересного.

Панели управления. Заливка подготовленных файлов на хостинг.

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

Вот ссылки на панели управления наших хостингов.

• CP "Спринт Хост" - панель управления хостинга "Спринт Хост"
• CP "Хости Ман" - панель управления хостинга "Хости Ман"

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

Кстати, достигается такой эффект размещением в элементе a атрибута target="_blank".

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

"Спринт Хост" предлагается двух панельную конструкцию управления папками и файлами пользователя хостинга.

Такое решение должно понравится любителям таких программ как Far, Norton Commander, Midnight Commander, Total Commander.

Впрочем, если окно сузить, то двухпанельность автоматом превращается в однопанельность.

Далее, все наши мероприятия для простоты мы будем проводить на одной панели.

Важно!

Первое, что следует сделать - выбрать наш единственный сайт в меню "Переход к сайту".

В результате мы должны оказаться вот в этой папке:
/home/f0630527/domains/f0630527.xsph.ru/public_html/

И все дальнейшие манипуляции с файлами следует производить именно здесь.

А манипуляции эти следующие:

• Создание папок: css, files, html, img, php
• Удалите все автоматически созданые хостингом файлы (Осторожно! Удалять нужно именно из папки public_html).
• Загрузка файлов из локальной папки d:\sites_train\xsph_ru\ на хостинг.

В результате у нас должно получиться примерно следующее:

Собственно, все готово.

Теперь вот в этой строке:
http://f0630527.xsph.ru/

Меняем f0630527 на ваш поддомен и пробуем скопировать в адресную строку браузера.

Работает?

Кстати, я чисто из любопытства попробовал не только свой сайт f0630527, но и довольно много конкурирующих разработок, которые кто-то делал ранее, типа f0630526, f0630525, f0630524, и т.д. вплоть до f0630501.

И что вы думаете? Оказывается, работающий проект тут большая редкость, практически, чудо.

Что ж, надеюсь, что это "чудо" случилось не только у меня, но и у вас тоже.

А если что-то не получилось? Подумайте, что не так. Если это не помогло, то обращайтесь. Будем думать вместе.

Теперь переходим к нашему следующему хостингу. Он будет поинтереснее, все-таки, работает на безопасном протоколе.

"Хости Ман" - личный кабинет.

В личном кабинете "Хости Ман" нажимаем на ссылку "Управление услугой"

Теперь жмем кнопку "Менеджер файлов"

В "Менеджере файлов" жмем кнопку "www"

В папке "www" жмем кнопку "ab.h1n.ru"

В результате мы должны оказаться вот в этой папке:
Корень аккаунта / www / ab.h1n.ru

И все дальнейшие манипуляции с файлами следует производить именно здесь.

А манипуляции эти следующие и они аналогичные тем, что мы делали ранее для предыдущего хостинга:

• Создание папок: css, files, html, img, php
• Удалите все автоматически созданые хостингом файлы (Осторожно! Удалять нужно именно из папки Корень аккаунта / www / ab.h1n.ru).
• Загрузка файлов из локальной папки d:\sites_train\h1n_ru\ на хостинг.

В результате у нас должно получится примерно следующее:

Теперь вот в этой строке:
https://ab.h1n.ru/

Меняем ab на ваш поддомен и пробуем скопировать в адресную строку браузера.

Кстати, обратите внимание.

Если при покупке "настоящего домена" трудно подобрать короткое удачное имя типа car.ru, auto.ru и т.п. (там все места блатные расхватали), то здесь вполне возможно взять хорошее перспективное имя типа car.h1n.ru, auto.h1n.ru и т.п.

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

Давайте, займемся этим благородным делом.

Регистрация новых сайтов в поисковых системах: Гугл, Яндекс и др.

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

С другой стороны, процесс регистрации ускоряет индексацию, в принципе его можно и выполнить вручную.

Сайты, которые мы будем добавлять в индексы поисковых систем.

• http://f0630527.xsph.ru/
• https://ab.h1n.ru/

1. Гугл

Переходим в консоль Гугла по данному урлу:
https://search.google.com/search-console/

Нажимаем "Add Property"

Вводим http://f0630527.xsph.ru/ - именно так, c указанием протокола и закрывающего слэша, причем в правой части формы для ввода.

Нажимаем "CONTINUE" ("ПРОДОЛЖИТЬ").

Далее следует пройти процесс верификации сайта (доказать, что сайт принадлежит человеку, который запустил процесс в Гугле).

Для этого следует загрузить предоставленный файл в корневую папку сайта.

После этого процесс верификации успешно завершается.

Нажимаем кнопку "URL inspection", вводим "http://f0630527.xsph.ru/" и получаем вот такой результат:

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

Что ж, будем работать над этим.

Обратим внимание, что таким образом можно инспектировать не только главную страницу сайта, но и любую внутреннюю страницу.

Давайте, из любопытства проинспектируем собственно наш "Краткий справочник популярных элементов HTML" по адресу "http://f0630527.xsph.ru/html/"

Здесь, по мнению Гугла все хорошо, в т.ч. все хорошо и с мобильными устройствами.

Теперь для главной страницы сайта http://f0630527.xsph.ru/ нажимаем кнопку REQUEST INDEXING и получаем результат:
URL was added to a priority crawl queue.

На этом работа с текущим сайтом для пропихивания его в Гугл закончена.

Повторяем все действия с сайтом https://ab.h1n.ru/

На этом работа с Гуглом закончена.

2. Яндекс

Запускаем панель управления Вебмастер Яндекс по данному урлу:
https://webmaster.yandex.ru/

Нажатием кнопки "+" добавляем наши сайты:

• http://f0630527.xsph.ru/
• https://ab.h1n.ru/

Точно также, как и Гугл, Яндекс предлагает подтвердить собственность на эти сайты, загрузкой специальных файлов.

Делаем это, и в итоге состояние наших сайтов становится вот таким:

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

После того, как мы поработали с Гуглом и Яндексом, заниматься с другими поисковыми системами смысла особого нет, т.к. для России суммарный трафик Гугла и Яндекса состовляет более 90%.

Давайте, просто из чистого любопытства посмотрим не некоторые более-менее полезные поисковые системы из "второго эшелона значимости".

• https://webmaster.mail.ru/ - компания mail.ru известна почтовым сервисом, также имеет неплохую поисковую систему.
• https://www.bing.com/webmasters/about - Microsoft Bing, полезный для вебмастера набор инструментов, включая индексирование сайтов в поисковую систему Bing.

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

Итоги.

Подведем краткие итоги проделанной работы.

• Мы поняли, почему хостинговые компании предоставляют бесплатный хостинг.
• Узнали о главном недостатке бесплатного хостинга и поняли, как этого недостатка можно избежать.
• Создали 2 сайта, один на протоколе http, другой на протоколе https.
• Научились работать с панелями управления на двух сервисах хостинга.
• Изучили процесс добавления сайтов в индексы основных поисковых систем.