← Cloudflare Pages / pages / framework-guides

Gatsby

Gatsby ↗ это фреймворк для React с открытым исходным кодом для создания сайтов и приложений. В этом руководстве вы создадите новое приложение Gatsby и развернёте его с помощью Cloudflare Pages. Вы будете использовать gatsby CLI для создания нового сайта на Gatsby.

Установите gatsby CLI, выполнив в терминале следующую команду:

npm install -g gatsby-cli

После установки Gatsby можно создать новый проект с помощью gatsby new. new команда принимает URL-адрес GitHub для использования существующего шаблона. В качестве примера используйте gatsby-starter-lumen шаблон, выполнив следующую команду в терминале. Подробнее см. в раздел Starters на сайте Gatsby ↗:

npx gatsby new my-gatsby-site https://github.com/alxshelepenok/gatsby-starter-lumen

Все руководства по фреймворкам предполагают, что у вас уже есть базовое понимание Git ↗. Если вы новичок в Git, обратитесь к этому краткое руководство по Git ↗ о том, как настроить Git на локальном компьютере.

Если вы клонируете по SSH, необходимо сгенерировать ключи SSH ↗ на каждом компьютере, с которого вы отправляете или получаете данные из GitHub.

См. документация GitHub ↗ и Документация Git ↗, где это описано подробнее.

Создайте новый репозиторий GitHub, перейдя по адресу repo.new ↗. После создания нового репозитория перейдите в каталог только что созданного проекта, чтобы подготовить локальное приложение и отправить его в GitHub, выполнив в терминале следующие команды:

git remote add origin https://github.com/<your-gh-username>/<repository-name>
git branch -M main
git push -u origin main

Чтобы развернуть сайт в Pages:

1. На панели управления Cloudflare перейдите к разделу Workers & Pages страницу.

   Перейдите в Workers & Pages ↗

2. Выберите Создать приложение.

3. Выберите Pages на вкладке.

4. Выберите Импорт существующего репозитория Git.

5. Выберите созданный вами новый репозиторий GitHub, а затем нажмите Начало настройки.

6. В Настройки сборки разделе выберите Gatsby как ваш Framework preset. Ваш выбор предоставит следующую информацию:

После настройки сайта вы можете запустить первый деплой. Вы увидите, как Cloudflare Pages устанавливает gatsby, зависимостей вашего проекта и сборку сайта, прежде чем развернуть его.

После деплоя сайта вы получите уникальный поддомен для своего проекта на *.pages.dev. Каждый раз, когда вы фиксируете новый код в своем сайте Gatsby, Cloudflare Pages автоматически пересоберет ваш проект и развернет его. Вы также получите доступ к развёртывания предпросмотра для новых pull request, чтобы вы могли увидеть, как изменения выглядят на сайте, прежде чем разворачивать их в продакшен.

Если вы используете динамические маршруты ↗ в вашем проекте Gatsby настройте прокси-редирект чтобы эти маршруты вступили в силу.

Если у вас есть динамический маршрут, например /users/[id], создайте прокси-редирект по следующему примеру:

/users/* /users/:id 200

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