Разместите свой веб-сайт бесплатно с помощью Cloudflare Pages и GitHub!

Чтобы сделать ваш веб-сайт доступным в Интернете, вам нужен веб-сервер. В этом видео вы пошагово и бесплатно научитесь настраивать веб-сервер.

Веб-серверы - это компьютеры, на которых файлы веб-сайта могут храниться онлайн, что позволяет получать доступ к веб-сайту с любого компьютера, имеющего доступ в Интернет. Плата за хостинг веб-серверов является обычной, но статические веб-сайты теперь можно размещать на таких платформах, как Cloudflare Pages.

Чтобы развернуть front of Mentor Challenge, вам необходимо разместить файлы вашего веб-сайта в репозитории GitHub. Спикер уже создал панель управления социальными сетями с переключателем dark/light и загрузил ее локально для демонстрации.

Чтобы создать бесплатную учетную запись Cloudflare Pages, подключите свою учетную запись GitHub и зарегистрируйтесь, указав адрес электронной почты и пароль. После входа в систему создайте новый проект, развернув код из репозитория GitHub. Авторизуйте страницы Cloudflare для доступа ко всем репозиториям с разрешениями на чтение и запись.

Настройте сборку и развертывание, назвав проект, выбрав основную ветку и запустив gulp на сервере Cloudflare Pages. Разверните обычные файлы вместо скомпилированных или сгенерированных файлов, чтобы избежать конфликтов слияния при работе с другими разработчиками. Журналы показывают, что пакеты npm были установлены из файла package.json, сценарий сборки gulp был успешно выполнен, и сайт был развернут.

Веб-сайт тестируется на скорость с использованием протокола quick transport protocol. Страница загружается менее чем за секунду, последовательно, а время первого байта составляет 39 миллисекунд, что указывает на высокую скорость веб-сервера.

Веб-аналитику в Cloudflare dashboard можно включить в настройках проекта. Она бесплатно предоставляет информацию о просмотрах страниц, местоположении посетителей, ссылающихся доменах и другие данные о посетителях.

Cloudflare Pages предлагает функции совместной работы для командных проектов, позволяя легко приглашать участников и неограниченно добавлять новых участников. Он также создает ссылку предварительного просмотра для промежуточных сред для внутреннего просмотра сайта перед запуском в производство. Доступ к ссылке предварительного просмотра можно контролировать, ограничивая его только участниками проекта.

Создание ссылки предварительного просмотра для внутреннего просмотра Чтобы создать ссылку предварительного просмотра для внутреннего просмотра, мы вносим изменения в код в VS Code, изменяя файл index.html, а затем фиксируем его на GitHub. Это запускает страницы Cloudflare, которые автоматически обнаруживают изменение кода, создают новую среду и предоставляют нам ссылку предварительного просмотра из этого коммита.

Объединение ветви объектов в основную ветвь После внесения изменений в функциональную ветку мы создаем запрос на загрузку на GitHub для проверки командой. После утверждения или объединения в основную ветку Cloudflare Pages автоматически обнаруживает это слияние и развертывает его как часть производственного сайта.