Выкладка на сервер

Мы опубликовали принципы, но вся эта история доступна только локально. Давайте выложим сайт в интернет. Существует множество способов и все они подходят, но мы выберем виртуальный хостинг от Reg.ru. Нам подойдет самый простой тариф, например Host-0:

Копирование ссылки на репозиторий

Купите хостинг

Купите домен

Выпустите бесплатный SSL-сертификат

Теперь нам нужна сборка сайта или build. Для этого откройте Cursor и выполните команду npm run build. Система запустит процесс превращения вашего проекта из набора исходных файлов, с которыми вы работаете (код, текст, картинки), в готовый, полноценный статический веб-сайт, который можно загрузить в интернет:

Копирование ссылки на репозиторий

Отлично! У нас сгенерировалась папка build, а в ней наши md-файлы превратились в html-файлы, ну и произошли какие-то другие преобразования.

Теперь выложим сборку на сервер. Существует множество разных способов сделать это. Сейчас мы воспользуется ftp-протоколом и выложим build вручную. В следующих главах мы избавимся от ручной выкладки и будем делать это автоматически.

Давайте приступим. Запустите программу FileZilla:

Копирование ссылки на репозиторий

В структуре файлов и папок найдите папку с нашим проектом, а в ней папку build.

Отлично! Теперь нужно подключиться к хостингу по протоколу ftp. Для этого зайдите в личный кабинет Reg.ru, найдите там свой хостинг, перейдите на вкладку Доступы и найдите раздел Доступ к FTP:

Копирование ссылки на репозиторий

Поочередно скопируйте параметры доступа и вставьте в соответствующие поля в программе FileZilla и нажмите Быстрое подключение:

Копирование ссылки на репозиторий

Система подключится к серверу и в правой части FileZilla появится список файлов и папок размещенный на сервере:

Копирование ссылки на репозиторий

Перейдите в папку www, найдите папку со своим доменным именем и откройте ее.

В другой части экрана откройте папку build и просто скопируйте все содержимое папки в папку с вашим доменным именем.

Теперь перейдите в браузер и откройте ваш сайт. Успех! Сайт загружен на сервер и доступен пользователям сети.