Работа с хостингом для начинающих. Бесплатный хостинг.
Начинающие разработчики часто сталкиваются с комплексом новых задач, которые бывает не так просто решить с первого раза. Одна из таких задач – работа с сервером или хостингом. И если для бэкенд-разработчиков деплой более или менее входит в стартовый набор навыков, то фронтендеры могут столкнуться с этой частью работы уже на более поздних этапах обучения.
Деплой (от англ. deploy — развёртывать) — это процесс вывода готового программного обеспечения (ПО) из среды разработки или тестирования в рабочую среду, где с ним могут работать конечные пользователи.
Итак, хостинг – это услуга по размещению вашего сайта на серверах с постоянным доступом пользователей к их содержимому. Условно, хостить можно и со своего компьютера, при условии наличия статического IP, но для этого нужно будет всегда держать компьютер включённым.
В этой статье я покажу простейшую инструкцию для новичков на примере бесплатной услуги от sprinthost. А после нее будет инструкция для более продвинутых разработчиков, которые уже знакомы с git и git-хостингами.
CASHGOK20 – промокод 20% кэшбек на аккаунт хостинга при первом пополнении
Бесплатный хостинг для новичков
Подготовка
Если вы только создали html-страницу и готовы показать ее всему миру – эта секция для вас. Начнём с небольшого пояснения о том, как работают хостинги.
Любой сайт имеет стартовую страницу или “точку входа” – так обычно называют базовый файл который открывается по самой простой ссылке без пути, например для Яндекса это ya.ru/
По умолчанию, все сервера воспринимают точкой входа index.html. Поэтому, запустив локально liveserver вы увидите, что он откроет именно тот файл, который называется index.html.
Также работают и другие сервера, они “цепляются” за слово index и начинают воспринимать это стартовой страницей. Поэтому, если у вас есть какой-то код и в нем нет index-файла, скорее всего сервер никак его не отобразит без дополнительной настройки
Итак, для того чтобы загрузить наш сайт на сервер нам нужно подготовить этот файл. Если вы пишите на html+css+js – это не составит труда, достаточно переименовать тот файл что у вас является стартовым в index.html (скорее всего он у вас уже так и называется).
Если же вы используете фреймворки, вам нужно будет собрать проект для деплоя. Как правило это:
Vue:
- Команда:
npm run build - Название итоговой папки:
dist
React:
- Команда:
npm run build - Название итоговой папки:
build/client/
После этого мы обычно получаем полностью готовую к выкладке на хостинг папку.
Регистрация
Как правило, для использования 99% хостингов нужно зарегестрироваться. Я покажу на примере бесплатной версии хостинга sprinthost. Это именно что бесплатная версия, а не пробник с оплатой после периода. Инструкция подходит и для других хостингов – план действий везде примерно одинаковый.
Итак, заходим на страницу и жмем “получить хостинг бесплатно”. Откроется окно регистрации где можно выбрать Яндекс, Вк или Гугл.
Загрузка
После подтверждения регистрации через сервис вас сразу перекинет в панель управления:
Она такая же как и в платной версии.
Затем нужно перейти на вкладку “Сайты”:
Скорее всего, у вас уже будет сайт по-умолчанию, такого вида:
Если его не будет, вы можете нажать “+”, ввести домен и приобрести его. Обычно стоимость домена .ru не превышает 300р/год, но для регистрации придется ввести личные данные в том или ином виде, это требование законодательства РФ.
Домен по умолчанию – технический. Такие домены на самом деле принадлежат хостинг-провайдеру – он просто предоставляет вам доступ для проверки работоспособности сайта. Поэтому на таких доменах не рекомендуется выкладывать реальные проекты для пользователей.
Если вы перейдёте по ссылке этого сайта – получите стандартную заглушку хостинг-провайдера:
Примерно такие же страницы по умолчанию создают все провайдеры, после того как вы создали новый сайт, чтобы не дезориентировать вас.
Теперь перейдём во вкладку “Файлы” на панели управления:
Это буквально файловый менеджер вашего мини-сервера. Тут хранятся системные файлы для работы сайта, а также файлы, которые будут отображаться пользователю.
Сверху можно увидеть панель управления файлами. Она интуитивно понятная. Корзина для удаления, стрелочка вверх для загрузки и тд.
Все ваши сайты хранятся в папке domains (у других провайдеров такая папка может также называться www):
Далее кликаем на папку нашего домена, а затем на папку public_html/. Важно положить файлы именно в эту папку, потому что только там они будут отображаться. Положить просто в папку домена – будет бесполезно (но у других хостинг-провайдеров может не быть папки public_html, тогда будет достаточно положить файлы в папку домена).
Тут и хранится файл отображаемой заглушки:
Его смело можно удалить, так как именно сюда мы и положим наши файлы из папки проекта или сборки на vue/react. Удаляем файл и загружаем наши файлы с помощью кнопки загрузки или перетаскиванием:
Важно при этом сохранять структуру папок вашего проекта – поэтому если есть папка, создаём ее на хостинге и загружаем файлы в нее.
И – о магия, обновляем страницу нашего технического домена и видим изменения:
Собственно, если захочется разместить что-то другое, просто удаляем файлы и загружаем новые.
Бесплатный хостинг для более продвинутых
СКОРО БУДЕТ