はじめに
Svelte を用いて構築した個人サイトに技術ブログページを追加し、記事を投稿していくことを検討していました。この記事では Zenn の投稿を個人サイトに反映する方法を解説します。
個人サイトに Zenn の投稿を反映
これまで技術ブログは Zenn で投稿しており、その使い勝手が非常に良かったため、今後も Zenn での投稿を続けたいと思っています。そこで、Zenn から RSS フィードを取得し、最新の記事を自動的に個人サイトに反映させる仕組みを導入しました。
![](https://storage.googleapis.com/zenn-user-upload/368b6b249d47-20240720.png)
個人サイトに Zenn の投稿を反映
個人サイト →
GitHub リポジトリ →
これにより、Zenn での新しい投稿が個人サイトにも表示されるようになっています。
技術構成
個人サイトの構築には Svelte(TypeScript)を使いました。以下のような流れで静的なサイトがビルドされるようになっています。
- 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 フィードデータを取得します。
まとめ
個人サイトに Zenn の投稿を表示する事ができました。
まだまだ改善点ばかりなので、引き続き個人サイトのアップデートをしていきたいと思います。
参考資料
https://zenn.dev/catnose99/articles/cb72a73368a547756862#comment-de8c8e9f253aa4
https://zenn.dev/niiharamegumu/articles/8f00cfdf9753d1
https://zenn.dev/zenn/articles/zenn-feed-rss
Discussion