← Cloudflare Pages / pages / tutorials

Vytvořte blog pomocí Nuxt.js a Sanity.io na Cloudflare Pages

V tomto tutoriálu vytvoříte blogovou aplikaci pomocí Nuxt.js a Sanity.io a nasadíte ji na Cloudflare Pages. Nuxt.js je výkonný generátor statických webů postavený na front-endovém frameworku Vue.js. Sanity.io je headless CMS nástroj určený pro správu dat vaší aplikace bez nutnosti provozovat databázi.

Předpoklady

Nedávná verze npm ↗ v počítači
A Sanity.io ↗ účet

Vytvoření nového projektu Sanity

Nejprve vytvořte nový projekt Sanity pomocí jedné ze šablon Sanity, konkrétně šablony blogu. Pokud chcete konfiguraci upravit, můžete změnit schéma nebo zvolit vlastní šablonu.

Instalace Sanity a konfigurace vaší datové sady

Vytvořte nový projekt Sanity instalací @sanity/cli klienta z npm a spuštěním sanity init ve svém terminálu:

npm i @sanity/cli

npx sanity init

Při vytváření projektu Sanity si můžete zvolit některé z předdefinovaných schémat. Schémata popisují podobu dat ve vašem datasetu Sanity. Pokud byste zakládali zcela nový projekt, mohli byste schéma inicializovat od nuly, ale pro tuto chvíli vyberte Blog schéma.

Kontrola vašeho schématu

Jakmile je váš projekt vytvořený, přejděte do dané složky a spusťte studio lokálně:

cd my-sanity-project

npx sanity start

Sanity studio je místo, kde můžete vytvářet nové záznamy pro svou datovou sadu. Při lokálním spuštění je studio ve výchozím nastavení dostupné na adrese localhost:3333, přejděte tam a vytvořte si záznam autora. Blogové příspěvky můžete vytvářet také zde.

Vytvoření příspěvku na blogu v dashboardu Sanity Project

Nasazení datové sady

Až budete připraveni nasadit své studio, spusťte sanity deploy a zvolte jedinečnou URL adresu pro své studio. To znamená, že vy (nebo kdokoli další, koho pozvete ke správě blogu) budete moci ke studiu přistupovat na adrese yoururl.sanity.studio domény.

npx sanity deploy

Jakmile máte nasazené své Sanity studio:

Přejděte do administračního panelu Sanity (manage.sanity.io ↗).
Najděte svůj projekt.
Vyberte API.
Přidejte http://localhost:3000 jako povolený CORS origin pro váš projekt.

To znamená, že požadavky na vaši datovou sadu Sanity přicházející z aplikace Nuxt budou zařazeny na seznam povolených.

Vytvoření nového projektu Nuxt.js

Dále vytvořte projekt Nuxt.js. V novém terminálu použijte create-nuxt-app k nastavení nového projektu Nuxt:

npx create-nuxt-app blog

Je důležité zvolit režim vykreslování Universal (SSR / SSG) a cíl nasazení Statický web (statický/JAMStack hosting), během procesu nastavení.

Jakmile dokončíte projekt, cd do nového projektu a spusťte lokální vývojový server pomocí yarn dev (nebo, pokud jste jako správce balíčků zvolili npm, npm run dev):

cd blog

npm run dev

Integrace Sanity.io

Jakmile máte aplikaci Nuxt.js nastavenou, přidejte Sanity @sanity/nuxt plugin do svého projektu Nuxt:

npm i @nuxtjs/sanity @sanity/client

Chcete-li nakonfigurovat plugin v aplikaci Nuxt.js, musíte zadat některé konfigurační údaje. Nejjednodušší způsob je zkopírovat sanity.json složku ze studia do adresáře vaší aplikace (existují ale i jiné metody, například podívejte se na @nuxt/sanity dokumentace ↗.

Přidání sanity.json

cp ../my-sanity-project/sanity.json .

Nakonec přidejte @nuxtjs/sanity jako modul sestavení v konfiguraci Nuxt:

nuxt.config.js

{
	buildModules: ["@nuxtjs/sanity"];
}

Nastavení komponent

Jakmile máte Sanity nakonfigurované ve své aplikaci, můžete ho začít používat k vykreslování svého blogu. Nyní nastavíte několik stránek, které budou načítat data z vašeho Sanity API a vykreslovat je. Pokud se v Nuxt nevyznáte, doporučujeme nejprve projít návod k Nuxtu ↗, který vás naučí základní koncepty tvorby aplikací s Nuxt.

Nastavení indexové stránky

Nejprve aktualizujte index stránka, která se vykreslí při návštěvě kořenové cesty (/). V pages/index.vue:

pages/index.vue

<template>
	<div class="container">
		<div>
			<h1 class="title">My Blog</h1>
		</div>
		<div class="posts">
			<div v-for="post in posts" :key="post._id">
				<h2><a v-bind:href="post.slug.current" v-text="post.title" /></h2>
			</div>
		</div>
	</div>
</template>

<script>
	import { groq } from "@nuxtjs/sanity";

	export default {
		async asyncData({ $sanity }) {
			const query = groq`*[_type == "post"]`;
			const posts = await $sanity.fetch(query);
			return { posts };
		},
	};
</script>

<style>
	.container {
		margin: 2rem;
		min-height: 100vh;
	}
	.posts {
		margin: 2rem 0;
	}
</style>

Vue SFC nebo jednosouborové komponenty, jsou jedinečnou funkcí Vue, která umožňuje zkombinovat JavaScript, HTML a CSS do jediného souboru. V pages/index.vue, template značka, která představuje komponentu Vue.

Důležité je, že v-for se používá jako direktiva, která Vue říká, aby vykreslilo HTML pro každý post v poli posts:

Zkoumání direktivy v-for

<div v-for="post in posts" :key="post._id">
	<h2><a v-bind:href="post.slug.current" v-text="post.title" /></h2>
</div>

Chcete-li naplnit posts pole, asyncData funkce, kterou poskytuje Nuxt pro asynchronní volání (například síťové požadavky) k naplnění dat stránky.

$sanity objekt poskytuje integrace Nuxt a Sanity.js jako způsob, jak odesílat požadavky do vaší datové sady Sanity. Voláním $sanity.fetch, a předáním dotazu můžete z naší datové sady Sanity získat konkrétní data a vrátit je jako data vaší stránky.

Pokud jste Sanity ještě nepoužívali, bude vám GROQ, dotazovací jazyk GRaph Oriented Query, který Sanity poskytuje pro práci s vaší datovou sadou, pravděpodobně neznámý. GROQ je výkonný jazyk, pomocí kterého Sanity API sdělíte, jaká data chcete z datové sady získat. V našem prvním dotazu necháte Sanity načíst všechny objekty v datové sadě s _type hodnotu post:

Základní dotaz GROQ

const query = groq`*[_type == "post"]`;
const posts = await $sanity.fetch(query);

Nastavení stránky blogového příspěvku

Naše index stránka vykreslí odkaz pro každý příspěvek na blogu v naší datové sadě, a to pomocí slug hodnotu k nastavení URL adresy příspěvku na blogu. Pokud například vytvořím příspěvek s názvem „Hello World“ a slug nastavím na hello-world, by moje aplikace Nuxt měla umět zpracovat požadavek na stránku /hello-world, a načtěte odpovídající příspěvek na blogu ze Sanity.

Nuxt má pro tento typ stránek vestavěnou podporu, stačí vytvořit nový soubor v pages ve formátu _slug.vue. V asyncData funkci vaší stránky pak můžete použít params argument pro odkaz na slug:

pages/_slug.vue

<script>
	export default {
		async asyncData({ params, $sanity }) {
			console.log(params); // { slug: "hello-world" }
		},
	};
</script>

S ohledem na to můžete vytvořit pages/_slug.vue a zpracujte příchozí slug hodnotu, odešlete dotaz do Sanity, najděte odpovídající příspěvek na blogu a vykreslete post název příspěvku na blogu:

pages/_slug.vue

<template>
	<div class="container">
		<div v-if="post">
			<h1 class="title" v-text="post.title" />
			<div class="content"></div>
		</div>
		<h4><a href="/">← Go back</a></h4>
	</div>
</template>

<script>
	import { groq } from "@nuxtjs/sanity";

	export default {
		async asyncData({ params, $sanity }) {
			const query = groq`*[_type == "post" && slug.current == "${params.slug}"][0]`;
			const post = await $sanity.fetch(query);
			return { post };
		},
	};
</script>

<style>
	.container {
		margin: 2rem;
		min-height: 100vh;
	}

	.content {
		margin: 2rem 0;
		max-width: 38rem;
	}

	p {
		margin: 1rem 0;
	}
</style>

Při návštěvě například /hello-world, Nuxt převezme příchozí slug hello-world, a vytvořte dotaz GROQ na Sanity pro všechny objekty s _type z post, stejně jako slug, který odpovídá hodnotě /hello-world. Z této množiny můžete získat první objekt v poli (pomocí operátoru indexu pole, který znáte z JavaScriptu, tedy [0]) a nastavte ji jako post v datech vaší stránky.

Vykreslování obsahu blogového příspěvku

Vykreslili jste post název pro náš blog, ale stále chybí obsah samotného příspěvku na blogu. Chcete-li ho vykreslit, importujte sanity-blocks-vue-component ↗ balíček, který využívá Portable Text ↗ formátu a vykreslí jej jako komponentu Vue.

Nejprve nainstalujte balíček npm:

npm i sanity-blocks-vue-component

Po instalaci balíčku vytvořte plugins/sanity-blocks.js, který naimportuje komponentu a zaregistruje ji jako komponentu Vue block-content:

plugins/sanity-blocks.js

import Vue from "vue";
import BlockContent from "sanity-blocks-vue-component";
Vue.component("block-content", BlockContent);

Ve vaší konfiguraci Nuxt, nuxt.config.js, naimportujte tento soubor jako součást plugins direktivu:

nuxt.config.js

{
	plugins: ["@/plugins/sanity-blocks.js"];
}

V pages/_slug.vue, nyní můžete použít <block-content> komponentu pro vykreslení vašeho obsahu. Má podobu vlastní HTML komponenty a přijímá tři argumenty: :blocks, který určuje, co se má vykreslit (v našem případě child), v-for, který přijímá iterátor určující, odkud načíst child od (v našem případě post.body), a :key, který pomáhá Vue sledovat stav vykreslování ↗ zadáním jedinečné hodnoty pro každý příspěvek, tedy _id hodnota.

pages/_slug.vue

<template>
	<div class="container">
		<div v-if="post">
			<h1 class="title" v-text="post.title" />
			<div class="content">
				<block-content
					:blocks="child"
					v-for="child in post.body"
					:key="child._id"
				/>
			</div>
		</div>
		<h4><a href="/">← Go back</a></h4>
	</div>
</template>

<script>
	import { groq } from "@nuxtjs/sanity";

	export default {
		async asyncData({ params, $sanity }) {
			const query = groq`*[_type == "post" && slug.current == "${params.slug}"][0]`;
			const post = await $sanity.fetch(query);
			return { post };
		},
	};
</script>

<style>
	.container {
		margin: 2rem;
		min-height: 100vh;
	}

	.content {
		margin: 2rem 0;
		max-width: 38rem;
	}

	p {
		margin: 1rem 0;
	}
</style>

V pages/index.vue, můžete použít block-content komponentu pro vykreslení souhrnu obsahu tak, že vezme první blok obsahu vašeho příspěvku na blogu a vykreslí ho:

pages/index.vue

<template>
	<div class="container">
		<div>
			<h1 class="title">My Blog</h1>
		</div>
		<div class="posts">
			<div v-for="post in posts" :key="post._id">
				<h2><a v-bind:href="post.slug.current" v-text="post.title" /></h2>
				<div class="summary">
					<block-content
						:blocks="post.body[0]"
						v-bind:key="post.body[0]._id"
						v-if="post.body.length"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import { groq } from "@nuxtjs/sanity";

	export default {
		async asyncData({ $sanity }) {
			const query = groq`*[_type == "post"]`;
			const posts = await $sanity.fetch(query);
			return { posts };
		},
	};
</script>

<style>
	.container {
		margin: 2rem;
		min-height: 100vh;
	}
	.posts {
		margin: 2rem 0;
	}
	.summary {
		margin-top: 0.5rem;
	}
</style>

Ve schématu blogu existuje mnoho dalších prvků, které můžete do projektu přidat. Jako cvičení zkuste některý z následujících kroků, abyste si prohloubili znalosti práce s headless CMS:

Vytvořit pages/authors.vue, a vykreslete seznam autorů (podobně jako pages/index.vue, ale pro objekty s _type == "author")
Přečtěte si dokumentaci Sanity k použití referencí v GROQ ↗, a použijte jej k vykreslení informací o autorovi na stránce příspěvku na blogu

Publikování pomocí Cloudflare Pages

Publikování projektu přes Cloudflare Pages probíhá ve dvou krocích: nejprve projekt nahrajete na GitHub a poté si v dashboardu Cloudflare Pages založíte nový projekt na základě tohoto repozitáře GitHub. Pages při každém publikování nasadí novou verzi vašeho webu a při otevření nového pull requestu dokonce automaticky vytvoří náhledové nasazení.

Chcete-li nahrát svůj projekt na GitHub, vytvořte nový repozitář ↗, a postupujte podle pokynů pro odeslání lokálního repozitáře Git na GitHub.

Jakmile nahrajete projekt na GitHub, nasaďte web do Pages:

V dashboardu Cloudflare přejděte na Workers & Pages stránce.
Přejděte na Workers & Pages ↗
Vyberte Vytvoření aplikace > Pages > Importujte existující repozitář Git.
Vyberte nově vytvořený repozitář GitHub a vyberte Zahájit nastavení.
V Nastavení sestavení a nasazení sekci, v části Nastavení sestavení > Přednastavení frameworku, vyberte Nuxt. Pages za vás automaticky nastaví správná pole.

Jakmile bude váš web nasazen, obdržíte jedinečnou URL adresu, na které si jej prohlédnete v produkci.

Abyste projekt automaticky nasadili při každé změně dat v Sanity.io, můžete použít Deploy Hooks. Vytvořte novou URL adresu Deploy Hook ve svém Projekt Pages > Nastavení. Na stránce Settings svého projektu Sanity najděte Webhooks sekci a přidejte URL adresu Deploy Hook, jak je znázorněno níže:

Přidání URL adresy Deploy Hook na dashboardu Sanity

Když nyní provedete změnu ve své datové sadě Sanity.io, Sanity odešle požadavek na vaši jedinečnou URL Deploy Hook, čímž spustí nové nasazení Cloudflare Pages. Díky tomu zůstane vaše Pages aplikace aktuální při přidávání nových nebo úpravě stávajících příspěvků na blogu.

Závěr

Dokončením tohoto návodu jste úspěšně nasadili vlastní blog postavený na Nuxt, Sanity.io a Cloudflare Pages. Zdrojový kód obou částí najdete na GitHubu:

Frontend blogu: https://github.com/signalnerve/nuxt-sanity-blog ↗
Sanity dataset: https://github.com/signalnerve/sanity-blog-schema ↗

Pokud se vám tento tutoriál líbil, možná vás bude zajímat, jak pomocí Cloudflare Workers, naší výkonné platformy pro bezserverové funkce, rozšířit svůj stávající web. Přečtěte si Tutoriál Vytvoření API pro frontend pomocí Pages Functions a zjistěte více.