JavaScript 및 Netlify 함수를 사용하여 블로그에 RSS Feed를 생성하는 방법

내가 Contentful로 첫 번째 프로젝트를 구축한 후에 사람들이 정말로 그들이 가장 좋아하는 RSS 리더를 사용하여 나의 내용을 주목하고 싶어 할지 몰랐다. (고맙습니다. Stefan Judis그래서 나는 나의 웨이보를 위해 전단 프레임워크가 없는 RSS 요약을 만드는 법을 배우기 시작했다.

RSS, 설명

RSS(RDF Site Summary 또는 Really Simple Syndication)는 1999년 3월 처음 발표됐다.그것은 사람들이 웹 사이트나 채널을 수동으로 볼 필요가 없도록 RSS 리더를 통해 새로 발표된 내용을 구독할 수 있게 한다.2021년에는 다양한 콘텐츠 소비 방식이 콘텐츠와 감각적 과부하를 초래할 수 있기 때문에 RSS 리포트가 대단하다. 스테판 주디스(Stefan Judis)는 최근 기사Web Weekly newsletter에서 RSS의 현대적 장점을 강조했다.

”[With RSS] there’s no algorithm “curating” the articles, and I can catch up in my own time. It’s beautiful!” – Stefan Judis

RSS Feed는 HTML처럼 정의된 컨텐트와 태그로 구성된 표준 XML(확장형 태그 언어) 파일 형식을 사용합니다.XML은 인간과 기계가 읽을 수 있는 것이다.그것의 목표는 유니버설 네트워크의 단순성과 가용성을 강조하는 것이다.Check out the Contentful blog’s RSS feed here - 풍부한 콘텐츠!

우리 하나 짓자!

다양한 플러그인을 사용하여 다양한 플랫폼과 프레임워크에 사용할 수 있으며, 사용자의 내용에서 RSS Feed를 생성할 수 있습니다.제 첫 번째 만족 프로젝트thingoftheday.xyz의 무구조 이념에 충실하기 위해 저는 구축 기능을 모색하고 싶습니다.
참고: 이 설명서는 Netlify에서 Microsoft를 호스팅하고 사용할 수 있다고 가정합니다Netlify functions.
Thingoftheday는 정적 클라이언트 프로그램으로 페이지가 요청할 때 데이터를 채웠다는 것을 의미합니다.간단하게 보기 위해서, 나는 RSS 프롬프트와 같은 방법을 선택했고, 실행할 때 XML 파일을 채웠다.나는 내 단일 페이지에 불필요한 루트를 설정하지 않고, XML 파일을 생성하고 브라우저나 RSS 리더에게 제공할 때 지정한 URL에서 실행할 Netlify 함수를 구축하기로 결정했다.

RSS XML 파일의 빌드 블록

RSS Feed에는 채널 태그(제목, 링크 및 설명 필수)와 프로젝트 태그(적어도 제목 또는 설명 필수)가 포함되어야 합니다.우리는 this article from cyber.harvard.edu를 우리가 어떤 내용을 포함할 수 있는지에 대한 지침으로 사용한다.
RSS Feed의 가장 간단한 형태는 다음과 같습니다.

<rss version="2.0">
  <channel>
    <title>thingoftheday.xyz</title>
    <link>https://thingoftheday.xyz</link>
    <description>thingoftheday is a lightweight microblogging site powered by Contentful and vanilla HTML, CSS and JavaScript.
    </description>
  </channel>

  <item>
    <title>This is my RSS feed!</title>
  </item>
</rss>  

RSS Feed 구축

완성된 코드click here에 직접 들어가고 싶다면.
나는 운 좋게도 Shy와 우리 first ever Contentful live stream together 에서 합작하여 RSS를 이해하고 방법을 결정했다.응용 프로그램의 무프레임 정신에 따라, 나는 Netlify 함수 코드에서 Node의 원본 HTTP 기능을 사용하기 시작했는데, 이것은 XML 파일을 생성할 것이다.우리의 뇌는 엉망이 되었지만 데이터 흐름이 끝나기 전에 데이터를 얻을 수는 없었다. 그러나 다음날 나는 조금도 낙담하지 않고 앞으로 걸어갔다. 이 과정에서 나는 뭔가를 배웠다.

Netlify 기능을 사용하도록 파일 설정

프로젝트의 루트 디렉터리에functions 디렉터리를 만들고 rss라는 새 파일을 추가합니다.js.

함수를 저장하는 디렉터리를 덮어쓰려면netlify를 사용하십시오.toml 파일은 프로젝트의 루트 디렉터리에 있지만 기본값을 사용합니다.Read more about Netlify functions .
이러한 파일을 저장소로 밀어넣으면 https://{hostname}/.netlify/functions/rss로 이동하여 이 기능을 실행할 수 있습니다.나중에 생성된 XML 파일을 찾을 수도 있습니다.

JavaScript를 사용하여 XML 문서 작성

RSS는 XML입니다.노드의 서버 함수에서js에서 문자열을 만들 것입니다. "text/xml"내용 형식으로 브라우저를 되돌려줍니다.이리 와봐:

// Netlify functions require the exports.handler function wrapper
exports.handler = async function (event, context) {

  // Construct the required building blocks
  const rssFeed = `<?xml version="1.0"?>
  <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
  <channel>
    <title>thingoftheday.xyz</title>
    <link>https://thingoftheday.xyz</link>
    <description>thingoftheday is a lightweight microblogging site powered by Contentful and vanilla HTML, CSS and JavaScript.</description>

// We’ll get to this bit later!
  ${buildRssItems(await getPosts())}

 </channel>
</rss>`;

  // Return the string in the body as type “text/xml”
  return {
    statusCode: 200,
    contentType: "text/xml",
    body: rssFeed,
  };
};

노드https를 사용하여 마이크로 블로그 데이터 얻기

요약에 필요한 데이터만 요청하는 내용의 GraphQL API를 사용하여 마이크로 블로거를 가져오는 함수가 있습니다.

const https = require("https");

async function getPosts() {
  return new Promise((resolve, reject) => {
    // Copy the GraphQL query from the main application code
    // Remove irrelevant data

    const query = `
    query {
      microblogCollection {
        items {
          sys {
            firstPublishedAt
            id
          }
          text
          link
          linkText
        }
      }
    }
    `;
    // Construct https options

    const options = {
      protocol: "https:",
      hostname: "graphql.contentful.com",
      path: "/content/v1/spaces/{SPACE_ID}", //add your space ID
      method: "POST",
      headers: {
        Authorization: "Bearer {ACCESS_TOKEN}", //add your access token
        "Content-Type": "application/json",
      },
    };

    let posts = "";

    const req = https.request(options, (res) => {
      res.on("data", (data) => {
        posts += data;
      });

      res.on("end", () => {
        const parsedPosts = JSON.parse(posts);
        resolve(parsedPosts.data.microblogCollection.items);
      });
    });

    req.on("error", (e) => {
      console.error(e);
    });

    req.write(JSON.stringify({ query }));
    req.end();
  });
}

RSS 프로젝트 구축

데이터를 가져온 후, 우리는 게시물을 XML 항목을 문자열로 연결하고 exports.handler 함수에 만든 문자열에 삽입하기 위해 교체합니다.
앞에서 말한 바와 같이 프로젝트에 유일하게 필요한 데이터는 제목이나 설명이다.우리는 author, link, pubDate와 guid를 추가하기로 선택했다.

2022년 업데이트:

내가 이 블로그를 처음 발표했을 때, pubDate 라벨은 무효였다.GitHub 저장소의 코드가 업데이트되었습니다. 아래의 코드 세션도 약간의 논평이 있습니다.RSS Feed의 유효한 RFC-822 날짜 및 JavaScript를 사용하여 이러한 날짜를 구성하는 방법에 대한 자세한 내용은 How to format dates for RSS feeds (RFC-822) 게시물을 참조하십시오.

function buildRFC822Date(dateString) {
  // See GitHub for full code
}

function buildRssItems(items) {
  return items
    .map((item) => {
      return `
        <item>
          <title>${item.text}</title>
          <author>[email protected] (whitep4nth3r)</author>
          <link>https://thingoftheday.xyz#${item.sys.id}</link>
          <guid>https://thingoftheday.xyz#${item.sys.id}</guid>
          <pubDate>${buildRFC822Date(item.sys.firstPublishedAt)}</pubDate>
        </item>
        `;
    })
    .join("");
}

브라우저에서 개요 보기

데이터를 가져오고, 문자열을 구축하고, XML 문서를 만들어 브라우저에 텍스트/XML로 보내면 두 가지 방법으로 Netlify 함수를 테스트할 수 있습니다.

코드를 저장소에 전송하여 Netlify에 1분 동안 배치한 다음 브라우저에서 함수의 URL (https://{hostname}/.netlify/functions/rss 을 클릭합니다.

Netlify CLI가 설치된 경우 프로젝트 루트 디렉토리의 터미널에서 실행netlify dev합니다.이것은 개발 서버를 시작합니다. 이 서버에서 Netlify 기능을 실행할 수 있습니다. 예를 들어 http://localhost:8888/.netlify/functions/rss.

다음은 브라우저의 모양새에 대한 요약입니다.

RSS 소스 링크 배달!

이제 XML 파일을 생성하는 URL에 대한 링크를 제공하여 RSS 리더를 통해 사용자를 따라갈 수 있습니다.Check out the RSS feed for thingoftheday here . 마지막으로 Feedly RSS 리더에서thing of theday RSS가 제시한 외관입니다.

RSS Feed, 웹 사이트 맵 또는 다른 파일은 Contentful 등 API에서 되돌아오는 데이터로 생성할 수 있음을 기억하십시오. 데이터를 가져오거나 문자열을 생성하고 요청할 때 문서를 제공하거나 디스크에 파일을 쓸 수 있습니다.너는 모든 것을 통제했다.

추가 내용: RSS Feed를 자동으로 발견

RSS 자동 검색은 RSS feeder를 통해 구독하려는 사용자가 사이트 URL을 RSS 리더에 입력할 수 있도록 하고 XML 파일에 대한 정확한 링크를 찾을 필요가 없다는 것을 의미합니다.
RSS Feed에 자동 검색을 설정하려면 인덱스<head>에 코드 소절을 추가할 수 있습니다.html 파일은 다음과 같이 프롬프트 URL로 안내합니다.

<link
      rel="alternate"
      type="application/rss+xml"
      title="RSS Feed for thingoftheday.xyz"
      href="https://thingoftheday.xyz/.netlify/functions/rss"
    />

RSS가 가치가 있다고 생각합니까?아주 확실합니다.만약 내가 더 많은 사람들로 하여금 그들이 선택한 어떤 방식으로든 나의 내용을 방문하게 할 수 있다면 RSS가 이긴 사람이다.나는 반드시 나의 미래의 모든 내용 항목에 RSS 구독원을 추가할 것이다. 길을 가르쳐 주셔서 다시 한 번 감사합니다, 스토퍼!
Check out the full Netlify function file on GitHub .
물건을 창조하고 배우며 당신이 하는 일을 사랑한다는 것을 기억하라.