SEO 친화적인 블로그 만들기:Nuxt로 시작하기

내 직업 생활에서 나는 검색엔진 최적화에 전문적으로 종사하는 몇 개의 회사와 합작한 적이 있다.몇몇 사람들과 합작한 후에 많은 SEO들이 이동의 목표라는 것을 깨닫게 될 것이다. 모든 분야에서 가장 좋은 실천이 무엇인지 확신하는 사람은 없다.A사는 모든 제품 페이지나 게시물의 경로를 주목한다. B사로 전환할 때 이전 회사의 제안에 따라 설정한 노선을 바꾸게 한다.
검색엔진 인덱스 사이트의 방식은 항상 끊임없이 변화하지만, 특정한 전략을 써서 더 높은 순위를 얻을 수 있고, 당신의 내용에 관심이 있는 사람들이 그것을 찾을 수 있도록 확보할 수 있다.
인터넷 파충류가 현재 페이지의 자바스크립트를 실행하는 것을 알고 있지만, 로봇이 당신의 내용을 얼마나 오래 기다릴지 알 수 없습니다.우리가 알고 있는 것은 마운트 속도가 더 빠른 사이트가 왕왕 더 잘 된다는 것이다. 이것은 비싼 API 호출을 기다리지 않아도 주요 내용을 나타낼 수 있고 사이트의 성능을 향상시킬 수 있다는 것을 의미한다.AJAX를 사용하여 게시물의 댓글을 검색하여 최신 내용을 표시하도록 결정할 수도 있지만, 보통 블로그 댓글 자체를 서버에 표시하거나 정적 내용으로 교부하지 못할 이유가 없습니다.
Nuxt와 같은 프레임워크를 사용하면 정적 생성 사이트를 직접 만들 수 있다.이 자습서의 경우 학습을 계속하려면 Node 버전8.9.0 이상을 설치해야 합니다.이 강좌는 당신이 사용npm에 대한 기본 지식을 이해한다고 가정합니다.만약 당신이 익숙하지 않다면, 나는 당신이 Nodesource: An Absolute Beginner's Guide to Using npm 의 이 글을 읽는 것을 권장합니다.
프로젝트를 구축할 디렉터리에서 먼저 명령npm을 사용하여 package.json 파일을 만듭니다.이 명령은 터미널에서 프로젝트의 기본 설정을 지정하는 마법사를 시작합니다.마법사를 완료하면 다음과 같은 파일이 표시됩니다.

{
  "name": "sample-blog",
  "version": "1.0.0",
  "description": "A sample blog using Nuxt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jessie Barnett",
  "license": "MIT",
  "dependencies": {
    "nuxt": "^2.14.5"
  }
}

다음 단계에서는 명령을 실행하여 Nuxt를 설치합니다.이 명령은 npm init에 추가하고 npm install nuxt 파일을 생성합니다.Nuxt를 설치한 후, 개발 모드에서 프로그램을 실행하고 정적 사이트를 만들 수 있도록 package.json 파일에 두 개의 스크립트를 추가해야 합니다.

{
  "name": "sample-blog",
  "version": "1.0.0",
  "description": "A sample blog using Nuxt",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nuxt",
    "generate": "nuxt generate"
  },
  "author": "Jessie Barnett",
  "license": "MIT",
  "dependencies": {
    "nuxt": "^2.14.5"
  }
}

Nuxt는 미리 정해진 카탈로그 구조를 이용해 웹 사이트를 어떻게 봉합하는지 찾아내는 자기 의견을 고집하는 프레임이다.웹 사이트를 위한 페이지를 만들려면 package-lock.json 디렉터리package.json를 사용해야 합니다.이 디렉터리에 pages 파일을 만들어야 합니다. 이 파일은 웹 사이트의 mkdir pages 경로에서 제공하는 페이지입니다.
현재 로그인 페이지에 기본 템플릿을 만들 것입니다.다음 코드를 포함하도록 파일을 업데이트합니다.

<template>
  <p>Landing Page</p>
</template>

명령index.vue을 실행하고 /으로 이동하면 렌더링된 템플릿이 표시됩니다.이제 블로그 게시물에 동적 경로를 추가합니다.파일 이름 아래에 줄을 그어 시작하는 slug를 만들 것입니다.index.vue 디렉터리에 npm run dev 디렉터리를 만들고 http://localhost:3000 파일을 추가합니다.
동적 페이지의 실행을 보려면 Nuxt에서 제공하는 blog 갈고리를 사용합니다.이 갈고리는 상하문 대상을 받아들인다. 이것은 매우 유용한 속성이 있지만, 우리는 중점적으로 소개할 것이다. pages우리는 _slug.vue에서 경로 파라미터를 얻을 수 있는데, 그 중에서 asyncData는 우리가 부르는 파일을 나타낸다.만약 우리가 파일 route 을 호출했다면, 우리는 context.route.params.slug 을 통해 그것을 해결해야 한다.우리의 갈고리는 이 파라미터를 가진 대상을 되돌려야만 템플릿에 그것을 나타낼 수 있습니다.
다음 코드를 포함하도록 파일을 업데이트합니다.

<template>
  <p>{{ blogPost }}</p>
</template>

<script>
export default {
  asyncData ({route}) {
    return {
      blogPost: route.params.slug
    }
  }
}
</script>

개발 서버가 실행 중이라고 가정하고 slug로 이동하면 페이지에서 URI의 동적 매개 변수가 인쇄되는 것을 볼 수 있습니다.
우리가 해결해야 할 마지막 일은 정적 사이트 생성이다.Nuxt는 파충류 프로그램을 사용하여 생성할 동적 경로를 결정합니다. 이것은 모든 경로를 이해하거나 링크를 추가하기 위해 Nuxt를 수동으로 설정해야 한다는 것을 의미합니다.오늘 우리는 링크를 추가할 것이다._post.vue 파일을 열고 다음 코드를 사용하여 업데이트합니다.

<template>
  <div>
    <h1>Articles</h1>
    <ul>
      <li>
        <nuxt-link to="/blog/cats">Article on Cats</nuxt-link>
      </li>
      <li>
        <nuxt-link to="/blog/dogs">Article on Dogs</nuxt-link>
      </li>
      <li>
        <nuxt-link to="/blog/parrots">Article on Parrots</nuxt-link>
      </li>
    </ul>
  </div>
</template>

이제 명령context.route.params.post을 사용하여 정적 사이트를 생성할 수 있습니다.이 명령의 출력은 _slug.vue 폴더입니다. 이 폴더에는 로그인 페이지와 우리가 로그인 페이지에서 링크한 세 편의 블로그 글이 있습니다.
이 시리즈의 이 부분은 여기까지!다음 부분에서, 우리는 가격 인하, Frontmatter, 상하문 로더를 사용하여 글을 가져오고, 글 목록을 만드는 방법을 토론할 것이다.
최초 발표jessie.codes