Бесплатный хостинг и Создание сайта из шаблона

Бесплатный хостинг и Создание сайта из шаблона

Для нескольких следующих видео нам понадобится сайт в интернете. Можно было бы конечно сделать и на локальном сервере как мы это делали уже неоднократно, но давайте изучим что-нибудь новенькое. Платить за хостинг – это не наш метод, поэтому воспользуемся бесплатным хостингом. Конечно, у него будут ограничения, но нам для наших примеров хватит.
Заходим на любой поисковик и вбиваем Бесплатный хостинг с поддержкой MySQL.  Нам выпадет большое количество разных хостингов. Поищем что-нибудь интересное. Сразу скажу, что я с бесплатными хостингами до этого не работал, поэтому будем разбираться вместе.

Выберем, например вот этот обзор. Вроде он довольно свежий, 2021 год, и присутствую слова бесплатный хостинг и MySQL.
Переходим на сайт и выбираем первый из списка. Сразу говорю, что к этому сайту и к хостингу я никакого отношения не имею и денег за рекламу не получаю. Это просто первый попавшийся выбор.
Копируем название. 000webhost и переходим на их сайт.
Попадаем на страничку бесплатный хостинг и нажимаем Начать. Перед нами открываются разные тарифы. Нам нужен бесплатный.

Откроем и посмотрим, что нам будет предоставлено в бесплатном варианте.

  • 1 сайт,
  • 300 мегабайт дискового пространства,
  • трафик 3 гигабайта,
  • 1 аккаунт для FTP,
  • cron, 
  • 1 база данных MySQL.

Не густо, но нам хватит. Выбираем тариф и приступаем к регистрации.

Регистрация стандартная. Надо указать свою почту и придумать пароль. И тут я столкнулся с первой неожиданностью. Моя почта с Яндекса не подошла. Так как для буржуйского хоста, почта Яндекса не является авторитетной. Ну нечего, используем почту gmail. Нажимаем Зарегистрироваться, и тут получаем вторую ошибку. Браузер от Яндекса не видит капчу. Ну не нравится им всё от Яндекса. Перехожу на FIREFOX, снова ввожу почту, и придуманный пароль. И о чудо. Регистрация проходит успешно.

Теперь надо зайти на почту и подтвердить своё почту. Нажимаем в письме на Подтвердить. Всё регистрация закончена и у нас теперь есть свой сайт. Тут проявляется этот весёлый человечек, и чего-то там пытается нам впарить. Но нам ничего не надо и мы закрываем этого красавца.

Нажимаем стартовать и перед нами открываются варианты. Что мы хотим.
Я выбрал вэб разработку, так как мы всё будем писать сами.

Нажимаем Продолжить , а затем пропустить, ну или если хотите можете установить браузер chrom.
Теперь надо придумать уникальное имя проекта. Это имя будет показано в URL браузера. Придётся постараться, так как многие названия уже заняты и вам придётся придумывать другие. Здесь тоже не обошлось без проблем. Если вы укажете пароль меньше 8 знаков, то проект не будет создан, но вам об этом ничего не скажут, и вы будете много и долго нажимать на кнопку Отправить, но результата не будет.
Добавив к паролю ещё пару символов я думал, что проблемы закончились, но не тут то было. Теперь мне написали что такое имя уже занято, и надо ввести другое.
Я всё исправил, но хостеру не понравилось, что я так часто его беспокоил, и он забанил меня на пару минут. Через 5 минут, наконец-то я  зашёл в настройки своего хостинга.

Здесь три кнопки.

  • Конструктор сайтов,
  • Установка WordPress,
  • и можно загрузить полностью свой сайт, например из локальной версии.

Нажимаем Конструктор сайтов.
Попадаем на страницу Менеджер файлов. Если вы ещё не перевели сайт, то можно это сделать выбрав свой язык из выпадающего списка. Я выбрал русский.

Посмотрим, что ещё можно сделать в Менеджере.

  • Создать новый файл.
  • Создать новую папку.
  • Поиск файла.
  • Загрузка файлов с компьютера.
  • Обновить страницу.
  • Выбор Список или иконки.
  • Выбор языка и выход.

Давайте создадим текстовой файл и посмотрим, что с ним можно сделать.
Создаём Новый файл. Например, я создам текстовой файл с именем 1 txt. Видим, что файл создан. Теперь для работы с ним выбираем его и видим, что у нас появились новые иконки.

  • Открыть файл.
  • Скачать.
  • Переименовать файл.
  • Переместить в другое место.
  • Копировать.
  • Редактировать.
  • Изменить права доступа.
  • Заархивировать, 
  • Удалить.

Давайте что-нибудь сделаем с файлом, например переименуем. Я изменю расширение с больших букв на маленькие, то же можно сделать и с самим названием. Нажимаем переименовать и смотрим результат.
Теперь напишем что-нибудь в файл. Нажимаем редактировать и пишем какой-нибудь текст. Например ПРИВЕТ.
У нас две кнопку. Сохранить и продолжить, и сохранить и закрыть файл. Если вы пишете большой файл работая онлайн, то советую чаще сохраняться – это поможет не потерять свою работу. Мы же просто нажмём Сохранить и выйти.
Проверим изменения. Для этого нажмём Открыть файл. Видим, что привет есть и мы теперь с Приветом. Закрываем файл и идём дальше.

Здесь вы можете установить права доступа к файлу. Это будет отдельная тема разговора, не сегодня. Так как возможно вам это и не понадобится никогда.
Ну и напоследок скачаем файл на свой компьютер, что бы не потерять этот ценный файл. Это краткое описание как работать с файлами, а есть ещё и другие возможности, но об этом позже.
Теперь перейдём на страницу Мои сайты и нажмём на ссылку снизу. У вас откроется новая вкладка. Это загрузился ваш сайт. По умолчанию здесь стоит страница заглушка, вот вместо неё нам и надо будет вывести свой сайт.

Рассмотрим как же управлять сайтом, для этого нажмём на ссылку Управлять сайтом и перейдём в панель управления. Сегодня я не буду рассказывать все возможности управления. Я это буду делать постепенно по мере необходимости работы с примерами. Это ознакомительное видео.
Нажмём на ссылку Инструменты и перейдём на вкладку с возможностями работы с сайтом.
Переходим на вкладку Менеджер баз данных. В начале у вас не будет ни одной базы. Теперь перейдём в Менеджер почты. Здесь можно настроить перенаправление электронной почты.
Если у вас есть свой собственный домен, то вы можете связать его с этим хостингом и вместо домена третьего уровня использовать свой.
Теперь рассмотрим Настройки сайта. Здесь так же много возможностей.

  • Первая это настройки FTP. Вы можете настроить права доступа к вашим файлам.
  • Вторая. Здесь вы можете видеть название вашего сайта. Это URL сайта по которому можно попасть на сайт.
  • Можно сменить пароль и версию PHP.
  • Указать категорию сайта, выбрав её из списка. Я выбрал Компьютеры.
  • Настроить отправку писем с сайта используя SENDMAIL.
  • Включить или выключить сообщения об ошибках. Это поможет вам при настройке сайта. При работе их лучше отключить.
  • Если у вас порнотень, то надо это указать, а то потом всё равно отключат.
  • Если вы подключили свой домен, то вы можете скрыть надпись, что вы работаете на бесплатном хостинге. Это можно сделать и для бесплатного домена, но это придётся сделать программно. Если интересно, пишите, расскажу как.
  • Функция устранения неполадок и восстановление сайта. Но особо не полагайтесь на неё. Лучше почаще делайте бэкап сайта. 
  • Сброс настроек. Все ваши изменения будут сброшены до первоначальных значений.
  • Ну и последняя – это УДАЛИТЬ САЙТ. Думаю, что это такое объяснять не надо.

Переходим на вкладку Статистика. Так как мы только создали сайт, то и смотреть то пока нечего Потом когда ваш сайт будет в интернете, вы сможете увидеть какая это нужная страница.
На вкладке безопасность Вы можете управлять IP адресами, запретив определённым ip адресам доступ к сайту. Установить защиту hotlink. Запретив другим сайтам напрямую ссылаться на ваши файлы.
Установить пароли на определённые папки, тем самым обеспечите дополнительную защиту.
CRON задания это ещё одна очень полезная функция. Здесь вы можете установить, какие-нибудь действия которые будут происходить в определённое время и в определённые дни. Например делать сохранения сайта каждый день в 0 часов.
Перенаправление или по другому редирект. Вы можете перенаправить одну страницу на другую. Например, при ошибке 404 редирект отправит вас на главную страницу и вы не потеряете клиента.
Логи. Здесь можно посмотреть все действия которые происходили на вашем сайт. Когда, кто и что делал на сайте.
Ну и последнее – это Резервное копирование. Но к сожалению эта возможность не доступна для бесплатной версии и вам придётся реализовать её вручную, или написать скрипт копирования и по крону выполнять его в определённое время.
Теперь разберёмся как здесь работать с базой данных. Здесь тоже нет ничего сложного. Переходим в Инструменты и затем в Менеджер баз данных
Пока у вас нет базы, но это мы сейчас исправим. Нажимаем новая база и нам выпадает вот такое окно. Надо придумать имя базы, Имя пользователя и сложный пароль. Я думаю, что не стоит говорить, что это всё должно быть на латинице и нажимаем Создать.
Мы получили сгенерированные хостером Имя базы, Имя пользователя и пароль. Хост для базы данных localhost. Так что при переносе с локального хоста вам ничего менять не придётся. Теперь смотрим как заполняется бегунок, и как только он дойдёт до конца база будет создана.
У нас появилась кнопка Управлять. Нажав на неё мы видим, что можно открыть PhpMyAdmin, сменить пароль базы или удалить базу. Ниже статистика по базе, её размер и количество таблиц. Нажимаем  PhpMyAdmin и нам открывается уже до боли знакомый по видео про локальный сервер интерфейс. Вводим имя пользователя и пароль и попадаем на страницу базы данных.
Ну а тут для тех кто смотрел все предыдущие уроки про локальный сервер не должно быть никаких затруднений, как создавать таблицы мы это делали много раз.
Ну а теперь самое интересное. Создадим свой первый сайт и выложим его на хостинг. Для начала надо сделать шаблон сайта в HTML. С этим у многих могут возникнуть проблемы, поэтому мы возьмём уже готовый, благо в интернете их тысячи. Этот сайт я создал за 20 минут из которых 10 минут ушло на поиск подходящего шаблона.
Заходим на любой поисковик и набираем Бесплатные шаблоны сайтов. Вам выпадет огромное количество ссылок. Поищите там подходящий для вашей темы и скачайте его. Я выбрал простенький шаблон. Для примера он самый подходящий. Вот так выглядит скаченный шаблон. Он состоит всего из двух файлов и картинок. Первый файл это таблица стилей, мы рассматривали такие файлы когда изучали локальный сервер и страница index, эта страница загружается при переходе на ваш сайт.
А вот так выглядит сайт после моей доработки. Я просто скопировал страницу index и немного её изменил. Как я уже говорил у меня на это ушло минут 10.
Теперь давайте посмотрим как выглядит наш первый, тестовый сайт в работе, а потом перенесём его на хостинг. Тексты размещённый на сайте я просто взял из интернета, так как мне было лень писать свои.
Это всего лишь набросок. При правильном наполнении текстами с картинками сайт будет выглядеть намного симпатичнее. Так что постарайтесь сделать свой сайт интересным, ведь от этого зависти будут ли пользователи смотреть его, или случайно попав на него сразу же закроют его и больше никогда сюда не вернуться. 

На сайте реализованы две системы навигации. Первая, сверху, для перехода на страницы сайта. Вторая, справа, дополнительная навигация. Она может быть индивидуальная для каждой страницы. Так же наверху справа есть блок куда вы можете добавлять информацию о странице или другой текст связанный с этой страницей.
Ну, вроде всё рассказал. Для первого сайта этого вполне достаточно. Теперь настало время выложить всё это в интернет. Для этого переходим на наш хост.
Заходим на хостинг на страницу Мои сайты и выбираем управлять сайтом. Перед нами панель управления. Заходим в Инструменты. Выбираем Менеджер файлов. Ждём когда нас перенаправит на страницу файлового менеджера. Удаляем созданный для тестов текстовой файл.

Чтобы наш сайт заработал, все файлы надо загрузить в папку public html. Так что переходим в эту папку. Так как картинки у нас лежат в папке img, нам надо создать такую папку. Создаём папку img. Переходим в неё и нажимаем иконку Upload Files. Выбираем все файлы-картинки и загружаем на хост. После загрузки файлы пропадают из списка. Ждём когда исчезнет последний и смотрим все ли файлы загрузились. Если все, то выходим из папки и загружаем оставшиеся файлы.  Так же выбираем файлы, но из папки с картинками а файлы с расширением html и css. 
Вот и всё. Наш сайт в интернете. Вы можете зайти по ссылке которая будет в первом комментарии и посмотреть как работает мой файл. Те, кто сделает свой сайт по этому примеру могут выложить ссылки на него в комментариях. Мы все с удовольствием посмотрим.

Как видите ничего сложного нет. Видео получилось очень большим только лишь из-за того, что я пытался как можно подробнее объяснить как найти бесплатный хостинг, зарегистрироваться на  нём. Найти бесплатные шаблоны сайтов и на их основе сделать свой. Напишите получилось ли это у меня. Что бы вы ещё хотели посмотреть из этой тематики. В общем пишите обо всём. Буду ждать и по возможности отвечать.