컨텐츠로 건너뛰기

RSS 피드 추가

요구 사항

  • 웹 사이트에 대한 RSS 피드를 생성하기 위한 Astro 패키지를 설치
  • RSS 피드 리더가 구독하고 읽을 수 있는 피드 생성

Astro의 RSS 패키지 설치

섹션 제목: Astro의 RSS 패키지 설치

Astro는 여러분의 웹사이트에 RSS 피드를 신속하게 추가할 수 있는 맞춤형 패키지를 제공합니다.

이 공식 패키지는 Feedly, The Old Reader 등과 같은 피드 리더가 읽을 수 있는 모든 블로그 게시물에 대한 정보가 포함된 비 HTML 문서를 생성합니다. 이 문서는 사이트가 재빌드될 때마다 업데이트됩니다.

개인은 피드 리더에서 피드를 구독할 수 있으며 사이트에 새 블로그 게시물을 게시하면 알림을 받을 수 있으므로 인기 있는 블로그 기능이 됩니다.

  1. Astro 개발 서버를 종료하고 터미널에서 다음 명령을 실행하여 Astro RSS 패키지를 설치하세요.

    Terminal window
    npm install @astrojs/rss

  2. Astro 프로젝트 작업을 다시 시작하려면 개발 서버를 다시 시작하세요.

    Terminal window
    npm run dev

.xml 피드 문서 만들기

섹션 제목: .xml 피드 문서 만들기

  1. rss.xml.js라는 새 파일을 src/pages/에 만듭니다.

  2. 다음 코드를 이 새 문서에 복사합니다. title 및 description 속성을 맞춤설정하고, 필요한 경우 customData에 다른 언어를 지정하세요.

    src/pages/rss.xml.js
    import rss, { pagesGlobToRssItems } from '@astrojs/rss';
    

    export async function GET(context) {
      return rss({
        title: 'Astro Learner | Blog',
        description: 'My journey learning Astro',
        site: context.site,
        items: await pagesGlobToRssItems(import.meta.glob('./**/*.md')),
        customData: `<language>en-us</language>`,
      });
    }

  3. 사이트 고유의 Netlify URL을 사용하여 Astro 구성에 site 속성을 추가하세요.

    astro.config.mjs
    import { defineConfig } from "astro/config";
    

    export default defineConfig({
      site: "https://example.com"
    });

  4. 이 rss.xml 문서는 사이트가 빌드될 때만 생성되므로 개발 중에는 브라우저에서 이 페이지를 볼 수 없습니다. 개발 서버를 종료하고 다음 명령을 실행하여 먼저 사이트를 로컬로 빌드한 다음 빌드 미리보기를 확인하세요.

    Terminal window
    npm run build
    

    npm run preview

  5. http://localhost:4321/rss.xml을 방문하여 각 .md 파일에 대한 item이 포함된 페이지에서 (형식화되지 않은) 텍스트를 볼 수 있는지 확인하세요. 각 항목에는 title, url, description과 같은 블로그 게시물 정보가 포함되어야 합니다.

  6. 사이트를 개발 모드에서 다시 보려면 미리보기를 종료하고 개발 서버를 다시 시작하십시오.

체크리스트

섹션 제목: 체크리스트

참고 자료

섹션 제목: 참고 자료