Zennの投稿をブログに取り込む（svelte）

はじめに

Svelte を用いて構築した個人サイトに技術ブログページを追加し、記事を投稿していくことを検討していました。この記事では Zenn の投稿を個人サイトに反映する方法を解説します。

個人サイトに Zenn の投稿を反映

これまで技術ブログは Zenn で投稿しており、その使い勝手が非常に良かったため、今後も Zenn での投稿を続けたいと思っています。そこで、Zenn から RSS フィードを取得し、最新の記事を自動的に個人サイトに反映させる仕組みを導入しました。

個人サイトに Zenn の投稿を反映
個人サイト →
GitHub リポジトリ →

これにより、Zenn での新しい投稿が個人サイトにも表示されるようになっています。

技術構成

個人サイトの構築には Svelte（TypeScript）を使いました。以下のような流れで静的なサイトがビルドされるようになっています。

1. Zenn の RSS の URL から投稿データのフェッチする
2. 投稿データの整形
3. データの定期取得

Zenn の RSS の URL から投稿データのフェッチする

getArticles.tsというファイルの中で Zenn の RSS の URL を登録しています。
ここではrss-parserというパッケージを使っています。

import Parser from "rss-parser";

const parser = new Parser();
const ZENN_RSS_URL = "https://zenn.dev/shige99/feed";

parser.parseURL(ZENN_RSS_URL)を使用して、指定された Zenn の RSS フィード URL からデータを取得します。これは HTTP リクエストを送信し、XML 形式の RSS フィードデータを取得します。

以下、https://zenn.dev/zenn/articles/zenn-feed-rss　引用

デフォルトではフィードに出力される投稿（記事・本）の数は 20 ほどに制限されています。すべての公開された投稿を出力したい場合はhttps://zenn.dev/ユーザー名/feed?all=1のようにall=1というクエリ文字列を指定します。
:::

投稿データの整形

feed.items.map(item => { ... })で各記事の情報を整形し、新しいオブジェクトの配列として返します。

export async function getArticles() {
  try {
    const feed = await parser.parseURL(ZENN_RSS_URL);
    return feed.items.map((item) => ({
      id: item.guid || item.link,
      title: item.title,
      link: item.link,
      pubDate: item.pubDate ? new Date(item.pubDate) : null,
      description: item.contentSnippet,
    }));
  } catch (error) {
    console.error("RSSフィードの取得に失敗しました:", error);
    return [];
  }
}

データの定期取得

setIntervalを使用して、getArticles 関数を 10 分（600000 ミリ秒）ごとに実行します。

setInterval(async () => {
  const articles = await getArticles();
}, 600000);

Cloudflare Pages で自動ビルド設定

2024/7/21 追記
Cloudflare Pages で Svelte ファイルを自動ビルドする設定を行うには、Cloudflare Workers を使用してスケジュールされたデプロイフックを設定します。
次の記事を参考にして簡単に設定できたので参考にしてみてください。
https://www.codemzy.com/blog/scheduling-builds-cloudflare

まとめ

個人サイトに Zenn の投稿を表示する事ができました。
まだまだ改善点ばかりなので、引き続き個人サイトのアップデートをしていきたいと思います。

参考資料

https://zenn.dev/catnose99/articles/cb72a73368a547756862#comment-de8c8e9f253aa4
https://zenn.dev/niiharamegumu/articles/8f00cfdf9753d1
https://zenn.dev/zenn/articles/zenn-feed-rss