В данной статье я подробно рассмотрю процесс размещения нашего лендинга на хостинге на примере хостинг-провайдера Jino.
Это не реклама данного хостинга, у меня есть ряд претензий к его работе, но это обычный хостинг по доступной цене, который похож на сотни других.
Полезные ссылки:
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Выбираем тариф для хостинга
После регистрации на jino.ru вам будет доступна возможность создать новый контейнер хостинга с выбором опций.
Плюс нашего лендинга в том, что для его работы нет необходимости подключать какие-либо дополнительные услуги, и можно просто всё отключить и не платить за это.
В данном примере я выбрал самый дешевый тариф из всех возможных.
Сборка проекта
Открываем наш проект в VS Code и в командной строке вводим.
npm run build
Проект будет собран в папке /out
Находим данную папку и запаковываем ее в zip архив
Загружаем и распаковываем на хостинге
В меню Jino зайдите в раздел «Хостинг» и выберите «Файловый менеджер», мы могли бы использовать FTP-доступ и залить файлы напрямую, но это тема отдельной статьи, а сейчас будем пользоваться самым простым способом.
Зайдите в папку /domains и выберите папку с необходимым доменным именем, в нее мы и будем загружать файлы.
Нажмите кнопку «Загрузить» и выберите наш созданный ранее архив out.zip
Кликнув по архиву правой кнопкой мыши, выберите пункт «Распаковать»
Далее заходим в папку /out
Выделяем все файлы в папке и нажимаем «Переместить»
Нам необходимо выбрать путь до папки нашего домена
Теперь мы можем удалить файл out.zip и папку /out
Не забудьте перейти в настройки домена и подключить SSL-сертификат, а затем включить перенаправление всех запросов на https-соединение.
После всех проделанных манипуляций мы сможем увидеть результат, введя в браузер наше доменное имя.
На этом серия статей про лендинг подошла к концу, в будущих статьях я буду более подробно разбирать некоторые моменты и, возможно, добавлю новый функционал к данному проекту.
Если появятся вопросы, пишите их в комменты, я постараюсь на них ответить, если эта серия уроков была вам полезна, то можете поставить лайк и накидать звезд в GitHub.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.