Создать лендинг сайт с нуля: загружаем и публикуем проект на хостинге #17

В данной статье я подробно рассмотрю процесс размещения нашего лендинга на хостинге на примере хостинг-провайдера Jino.

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

Полезные ссылки:

• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Подписывайтесь на мой Дзен канал

Выбираем тариф для хостинга

После регистрации на jino.ru вам будет доступна возможность создать новый контейнер хостинга с выбором опций.

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

В данном примере я выбрал самый дешевый тариф из всех возможных.

Сборка проекта

Открываем наш проект в VS Code и в командной строке вводим.

npm run build

Проект будет собран в папке /out

Находим данную папку и запаковываем ее в zip архив

Загружаем и распаковываем на хостинге

В меню Jino зайдите в раздел «Хостинг» и выберите «Файловый менеджер», мы могли бы использовать FTP-доступ и залить файлы напрямую, но это тема отдельной статьи, а сейчас будем пользоваться самым простым способом.

Зайдите в папку /domains и выберите папку с необходимым доменным именем, в нее мы и будем загружать файлы.

Нажмите кнопку «Загрузить» и выберите наш созданный ранее архив out.zip

Кликнув по архиву правой кнопкой мыши, выберите пункт «Распаковать»

Далее заходим в папку /out

Выделяем все файлы в папке и нажимаем «Переместить»

Нам необходимо выбрать путь до папки нашего домена

Теперь мы можем удалить файл out.zip и папку /out

Не забудьте перейти в настройки домена и подключить SSL-сертификат, а затем включить перенаправление всех запросов на https-соединение.

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

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