Storyblok CMS와 함께 Nuxt.js를 사용하는 정적 사이트

빠르고 안전한 웹사이트를 구축하고 싶습니까?

이 가이드는 Nuxt.js, Storyblok 및 Tailwind CSS를 사용하여 본격적인 웹사이트를 개발하는 방법을 보여줍니다.

소개

**잼스택이란?

Jamstack은 웹을 더 빠르고, 더 안전하고, 더 쉽게 확장할 수 있도록 설계된 아키텍처입니다. 개발자가 좋아하고 생산성을 극대화하는 많은 도구와 워크플로를 기반으로 합니다.

성능 향상

보안 강화

더 저렴하고 쉬운 확장

개발자 경험 향상

사이트 생성기

**Nuxt.js **는 Vue.js를 기반으로 하는 무료 오픈 소스 JavaScript 라이브러리입니다.

BTW: 배우기 쉽습니다. 마스터하기 쉬움, Zero Configuration, SEO 친화적

헤드리스 CMS

헤드리스 CMS는 콘텐츠 저장소 "본문"이 프레젠테이션 계층 "헤드"에서 분리되거나 분리되는 모든 유형의 백엔드 콘텐츠 관리 시스템입니다. 헤드리스 CMS에 보관된 콘텐츠는 API를 통해 전달되어 다양한 장치에 원활하게 표시됩니다.

스토리블럭

Visual Editor가 포함된 최초의 구성 요소 기반 헤드리스 CMS입니다.

코딩을 시작하자

설치

요구 사항

Nuxt.js v2.14.0
Nodejs v12.3.1
Npm v6.9.0

yarn create nuxt-app my-nuxt-app // npx create-nuxt-app my-nuxt-app
cd my-nuxt-app
yarn dev // npm run dev

나는 실을 선호합니다.

Storyblok 패키지를 설치합니다.

yarn add @storyblok/nuxt //for nuxt v3
yarn add  @storyblok/nuxt-2 //for nuxt-2

다음 단계는 nuxt.config.js의 nuxt 모듈에 추가하는 것입니다.

['@storyblok/nuxt/module', { accessToken: process.env.YOUR_STORYBLOK_API_KEY }],

이 stroyblok API 키를 얻으려면 Storyblok의 공간으로 이동하여 미리보기 api 키를 복사하세요.

*Storyblok 측에서
*

Storyblok에서 공간 만들기

구성 요소 생성

구성 요소 스키마 정의

코드(Nuxt.js)에서
components/Page.vue에서 페이지 구성 요소 생성

<template>
  <div
    v-editable="blok"
    class="px-6">
    <component
      v-for="blok in blok.body"
      :key="blok._uid"
      :blok="blok"
      :is="blok.component" />
  </div>
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      required: true
    }
  }
}
</script>

액세스 구성 요소를 전역으로 만들려면plugins/components.js에 구성 요소 추가

import Page from '~/components/Page.vue'

Vue.component('Page', Page)

그런 다음 이 플러그인을 nuxt.config에 추가합니다.

plugins: ['~/plugins/components']

인덱스 페이지를 만들고 Storyblok에서 콘텐츠를 가져오겠습니다.

<template>
  <div>
    <component :is="story.content.component" v-if="story.content.component" :key="story.content._uid" :blok="story.content" />
  </div>
</template>

<script>
import { useStoryblokBridge } from '@storyblok/nuxt'

export default {
  middleware: 'fetchGlobalLayout',
  asyncData: (context) => {
    const version = context.query._storyblok || context.isDev ? 'draft' : 'published'

    const language = context.app.i18n.locale // this i18n, i will get back this. 

    return context.app.$storyapi
      .get('cdn/stories/home', {
        language,
        version,
      })
      .then((res) => {
        return res.data
      })
      .catch((res) => {
        if (!res.response) {
          context.error({
            statusCode: 404,
            message: 'Failed to receive content from api',
          })
        } else {
          context.error({
            statusCode: res.response.status,
            message: res.response.data,
          })
        }
      })
  },

  mounted() {
    useStoryblokBridge(this.story.id, (newStory) => (this.story = newStory))
  },
}
</script>

계속하려면