Vytvořte si blog pomocí Contentful a Sveltekit

Vím, že se divíte, proč další "vytvořit blogový tutoriál", ale to je ten nejjednodušší projekt, který jsem pro tento tutoriál mohl vymyslet. Potřeboval jsem také další záminku k šíření štíhlého evangelia všem tam venku. Vzhledem k tomu, že v současné době není k dispozici žádný další výukový program Contentful a sveltekit (samozřejmě v době psaní tohoto článku), jsem tu, abych zachránil situaci se svými špatnými schopnostmi psaní.

Contentful je první obsahová platforma API pro vytváření digitálních zážitků (samozřejmě podle popisu jejich webu). Pokud se potřebujete pouze podívat na kód, aniž byste museli číst celý tento blog, můžete živě nasazený web najít zde a repo pro referenci zde

Jiné systémy pro správu obsahu

  1. Strrapi – open source Nodejs Headless CMS, který poskytuje REST i GraphQL.
  2. Wordpress – Jeden z nejpopulárnějších CMS a tvůrců webových stránek.]
  3. Optimizely – Nemám ponětí, co dělá, ale společnost se objevila, když jsem provedl svůj průzkum.
  4. Samozřejmě obsahově

Šel jsem s spokojeným, protože to byl první, který jsem našel po několika hledáních a v té době se zdál nejjednodušší na použití.

Předpoklady

  1. Účet s obsahem, klíč API a tajný klíč
  2. Textový editor nebo kódovací prostředí JavaScript
  3. Čas
  4. Znalost HTML, CSS a JavaScript (ES6+),
  5. Node.js a npm nainstalované na vašem vývojovém počítači.
  6. Základní znalost štíhlého a štíhlého kitu

Počáteční nastavení

Můžete použít codesandbox nebo štíhlé hřiště pro obyčejnou štíhlou aplikaci, abyste si mohli hrát s Contentful (samozřejmě bez směrování) nebo vytvořit místní aplikaci štíhlé sady pro dynamické trasy. Otevřete nový terminál a spusťte následující příkaz:

    npm init svelte@next content-kit

Přijměte výzvu k pokračování a poté vyberte kostru projektu, protože nechceme mít mnoho demo dat. Po zobrazení výzvy, zda chcete použít TypeScript, aktivovat ESLint, aktivovat Prettier a deaktivovat testování, vyberte ne, protože se nebudeme zabývat testováním.

Přejděte do nově vytvořené složky projektu a nainstalujte závislosti lokálně pomocí:

    cd content-kit
    npm i

Budete také muset nainstalovat Contentful SDK pomocí:

    npm install contentful

Spusťte vývojový server pomocí:

    npm run dev 

Dev server bude naslouchat z adresy http://localhost:3000. Jakékoli změny provedené v aplikaci budou automaticky přestavěny a znovu načteny pomocí Vite do spuštěné aplikace, dokud bude vývojový server stále spuštěn.

Nastavení obsahu

Šel bych do podrobností o tom, jak vytvořit účet a nastavit vaše obsahové API, ale to by pro ně byl bezplatný marketing a to zde neděláme. Pokusím se však co nejlépe vysvětlit, jak to lze snadno provést pomocí snímků obrazovky.

Na stránce modelu obsahu na řídicím panelu vytvořte nový model obsahu, který bude hostit strukturu, jak bude váš blog vypadat, a pojmenujte jej blog.

Přidejte pole, jak je uvedeno níže, učiňte je povinnými a nakonfigurujte dateField tak, aby obsahovalo pouze datum. Také se ujistěte, že je pole slugField automaticky generováno z názvu pro účely SEO.

Na stránce s obsahem budete přidávat ukázkové blogové příspěvky, abychom měli data, se kterými si můžeme hrát. Takže přidejte jeden příspěvek a další.

Na stránce nastavení zkopírujte klíč API a ID prostoru a vložte je na bezpečné místo, za chvíli je přidáme do projektu sveltekit.

Projekt Sveltekit

Protože se nejedná o stylingový tutoriál, vytvoříme velmi základní uživatelské rozhraní, nebo pokud chcete, můžete použít rozvržení z tohoto repozitáře (ano, bezostyšně inzeruji vlastní repozitáře) a vyladit jej na podle vašich představ.

Vytvořte soubor .env v kořenovém adresáři svého projektu a přidejte svůj klíč API a ID prostoru, jak je uvedeno níže.

VITE_CONTENTFUL_DELIVERY_API_TOKEN=<insert_contentful_api_key_here>
VITE_CONTENTFUL_SPACE_ID=<insert_contentful_space_id_here>

Pokud potřebujete rychlé vysvětlení toho, co všechny složky a soubory představují, nebo pokud s štíhlou sadou teprve začínáte, můžete si ji zde objednat.

Vytvoříme složku lib uvnitř složky src, která bude obsahovat všechny komponenty a soubory knihoven, které budeme vyžadovat.

Vytvořte contentfulClient.js uvnitř lib složku pro inicializaci obsahu SDK.

import contentful from 'contentful';

export const client = contentful.createClient({
    space: import.meta.env.VITE_CONTENTFUL_SPACE_ID,
    accessToken: import.meta.env.VITE_CONTENTFUL_DELIVERY_API_TOKEN
});

Vytvořte data.json.js soubor ve složce routes. Tento soubor bude obsahovat logiku, která získává data z obsahového CMS. Načtené blogy jsou pak předány do těla souboru index.svelte.

import { client } from '$lib/contentfulClient';

export async function get() {
    // get all blogs from Contentful
    const blogs = await client.getEntries({
        content_type: 'blog'
    });

    if (blogs) {
        return {
            status: 200,
            body: {
                blogs
            }
        };
    }

    return {
        status: 404
    };
}

content_type lze nalézt na postranním panelu modelu obsahu vpravo označeného jako ID TYPU OBSAHU. To bude použito k vrácení všech položek v modelu typu obsahu, který jste vytvořili.

Složka routes obsahuje trasy, proto web index.svelte představuje kořenovou cestu.

Odstraňte vše v souboru index.svelte a přidejte následující.

<script context="module">
    export async function load({ fetch }) {
        const [{ blogs }] = await Promise.all([fetch('/data.json').then((r) => r.json())]);
        return {
            props: {
                blogs
            }
        };
    }
</script>

<script>
    import { base } from '$app/paths';
    export let blogs;
</script>

<div class="row">
    {#each blogs.items as blog}
        <div class="column">
        <a href={`${base}/${blog.fields.slugField}`}>
            {blog.fields.title}
        </a>
        <p>{blog.fields.datePublished}</p>
        </div>
    {/each}

</div>

<style>
</style>

Ve skriptu modulu načteme proměnnou blogy, kterou jsme vytvořili z data.json.js soubor. <script context="module"> je nutné, protože načítání probíhá před vykreslením komponenty. Kód, který je instancí každé komponenty, by měl jít do druhého <script> tag.

SlugField bude použit k jedinečné identifikaci konkrétního blogového příspěvku při zachování SEO pro celý web. Nyní potřebujeme způsob, jak získat přístup ke konkrétnímu příspěvku na blogu a získat obsah z rozhraní API jako markdown, který bude vykreslen jako HTML.

Pro vykreslení budeme muset nainstalovat další balíček. Budeme potřebovat

  • marked – nízkoúrovňový kompilátor markdown pro analýzu markdown bez ukládání do mezipaměti nebo blokování po dlouhou dobu.**
npm i marked

Vytvořte složku s názvem components uvnitř lib složku, která bude obsahovat různé součásti. Poté vytvořte soubor RichContent.svelte který bude obsahovat kód nezbytný pro převod formátovaného textu do HTML.

<script>
    import { marked } from 'marked';
    export let richContent = '';
    const renderer = new marked.Renderer();
    $: pageContent = marked(richContent, { renderer });
</script>

<div>{@html pageContent}</div>

Budeme potřebovat způsob, jak štíhlá sada načíst dynamický obsah na základě trasy. Vytvoříme [slug].json.js soubor ve složce tras, který nám umožní načíst dynamický obsah na základě navštívené trasy.

import { client } from '$lib/contentfulClient';

export async function get({ params }) {
    // the `slug` parameter is available because this file
    // is called [slug].json.js
    const blog = await client.getEntries({
        'fields.slugField': params.slug,
        content_type: 'blog'
    });

    if (blog) {
        return {
            body: {
                blog
            }
        };
    }

    return {
        status: 404
    };
}

Kód je téměř podobný kódu v data.json.js ale načte se pouze jeden příspěvek, protože porovnáváme příspěvky s polem slugField, které je podobné navštívené adrese URL. Vytvoříme [slug].svelte soubor, který bude použit k definování způsobu vykreslování stránky a k použití obsahu načteného z Contentful CMS.

<script context="module">
    export async function load({ fetch, params }) {
        const url = `/${params.slug}.json`;
        const res = await fetch(url);

        if (res.ok) {
            const { blog } = await res.json();

            return {
                props: {
                    blog: blog.items[0]
                }
            };
        }

        return {
            status: res.status,
            error: new Error(`Could not load ${url}`)
        };
    }
</script>

<script>
    import RichContent from '$lib/components/RichContent.svelte';

    export let blog;
</script>

<div class="container application-form">
    <div class="row">
        <div class="col-lg-12">
            <h1>Course: {blog.fields.title}</h1>
            <p>Date From: {blog.fields.datePublished}</p>

            <RichContent richContent={blog.fields.content} />
        </div>
    </div>
</div>

<style>
</style>

Importujeme naše RichContent.svelte komponentu a použít ji k převodu formátovaného textu do html. Web je nyní připraven k testování a nasazení.

Nasazení bude provedeno na netlify, protože je to jedno z nejjednodušších a nejjednodušších k použití. Stránku můžete nasadit na Github, Gitlab a/nebo Bitbucket, což umožní automatické nasazení, kdykoli budete tlačit do svého hostovaného úložiště. Budete potřebovat účet, netlify.toml za účelem nasazení webu. Další pokyny naleznete v souboru README pro adaptér netlify GitHub

Nejprve nainstalujme adaptér Svelte Kit netlify a upravíme konfigurační soubor Svelte.

npm i -D @sveltejs/adapter-netlify@next

Změňte svelte.config.js soubor použít netlify adaptér místo výchozího adapter-auto. svelte.config.js by měl vypadat nějak takto:

import adapter from '@sveltejs/adapter-netlify';
import { join } from 'path';
import { readFileSync } from 'fs';
import { cwd } from 'process';

const pkg = JSON.parse(readFileSync(join(cwd(), 'package.json')));

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            split: false
        }),
        vite: {
            ssr: {
                noExternal: Object.keys(pkg.dependencies || {})
            }
        }
    }
};

export default config;

Poté vytvořte netlify.toml soubor v kořenové složce vaší aplikace.

[build]
  command = "npm run build"
  publish = "build/"
  functions = "functions/"

Nezapomeňte přidat své proměnné prostředí do podsekce prostředí v sekci sestavení a nasazení na Netlify, abyste zajistili svůj token API a zároveň zajistili, že vaše aplikace bude mít přístup k proměnným prostředí.

A voilà, jsme připraveni se připojit k netlify a nasadit tuto aplikaci. Vše, co potřebujete, je postupovat podle pokynů na webu netlify a po dokončení sestavení budete mít svůj web v provozu.

Děkujeme vám za váš čas, jakékoli komentáře, recenze, zprávy a kritiky budou velmi oceněny. Do příště.