← Cloudflare Pages / pages / framework-guides

Gatsby

Gatsby ↗ je open-source framework React pro tvorbu webů a aplikací. V tomto návodu vytvoříte novou aplikaci Gatsby a nasadíte ji pomocí Cloudflare Pages. Použijete gatsby CLI k vytvoření nového webu Gatsby.

Nainstalujte Gatsby

Nainstalujte gatsby CLI spuštěním následujícího příkazu v terminálu:

npm install -g gatsby-cli

Vytvořte nový projekt

Po nainstalování Gatsby můžete vytvořit nový projekt pomocí gatsby new. new příkaz přijímá adresu URL na GitHub pro použití existující šablony. Jako příklad použijte gatsby-starter-lumen šablonu spuštěním následujícího příkazu v terminálu. Další informace najdete v Sekce Starters v Gatsby ↗:

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

Než budete pokračovat

Všechny průvodce frameworky předpokládají, že již máte základní znalosti Git ↗. Pokud s Gitem začínáte, podívejte se na tento shrnutá příručka ke Gitu ↗ jak nastavit Git na svém lokálním počítači.

Pokud klonujete přes SSH, musíte vygenerujte SSH klíče ↗ na každém počítači, který používáte pro push nebo pull z GitHubu.

Viz dokumentace GitHub ↗ a Dokumentace Git ↗ s dalšími informacemi.

Vytvořte repozitář GitHub

Vytvořte nový repozitář GitHub na repo.new ↗. Po vytvoření nového repozitáře přejděte do adresáře nově vytvořeného projektu a v terminálu spusťte následující příkazy, kterými připravíte a odešlete svou místní aplikaci na GitHub:

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

Nasadit pomocí Cloudflare Pages

Chcete-li nasadit svůj web do Pages:

V dashboardu Cloudflare přejděte na Workers & Pages stránce.
Přejděte na Workers & Pages ↗
Vyberte Vytvoření aplikace.
Vyberte Pages kartě.
Vyberte Importujte existující repozitář Git.
Vyberte nově vytvořený repozitář GitHub a poté vyberte Zahájit nastavení.
V Nastavení sestavení sekci vyberte Gatsby jako Přednastavení frameworku. Váš výběr poskytne následující informace:

Konfigurační možnost	Hodnota
Produkční větev	`main`
Příkaz sestavení	`npx gatsby build`
Adresář sestavení	`public`

Po nakonfigurování webu můžete spustit první nasazení. Měli byste vidět, jak Cloudflare Pages instaluje gatsby, závislosti projektu a sestavuje web, než ho nasadí.

Po nasazení webu získáte pro svůj projekt jedinečnou subdoménu na *.pages.dev. Pokaždé, když do svého webu Gatsby committnete nový kód, Cloudflare Pages automaticky znovu sestaví váš projekt a nasadí ho. Získáte také přístup k náhledová nasazení u nových pull requestů, takže si můžete prohlédnout, jak změny na vašem webu vypadají, než je nasadíte do produkce.

Dynamické trasy

Pokud používáte dynamické trasy ↗ ve svém projektu Gatsby nastavte proxy přesměrování aby se tyto trasy projevily.

Pokud máte dynamickou trasu, například /users/[id], vytvořte přesměrování proxy podle následujícího příkladu:

/users/* /users/:id 200

Zjistit více

Dokončením tohoto návodu jste úspěšně nasadili svůj web Gatsby na Cloudflare Pages. Chcete-li začít s dalšími frameworky, podívejte se na seznam návodů pro frameworky.