GithubでOsmosFeedを使用してオンラインRSSリーダーを構築する（サーバー不要）

GitHub で OsmosFeed を使用してオンライン RSS リーダーを構築する（サーバー不要）#

前言#

RSS とは何でしょうか？まずはお話ししましょう。

🔜RSS🔚

RSS の正式名称は Really Simple Syndication（本当にシンプルな配信）で、XML（拡張マークアップ言語）に基づくコンテンツ配信プロトコルです。これにより、ユーザーはニュースやブログ記事など、ウェブサイトのコンテンツ更新を購読することができます。別の呼び方として Rich Site Summary（サイトコンテンツの要約）や RDF Site Summary（リソース記述フレームワークサイトの要約）もありますが、実際には購読フィードから更新されたコンテンツを取得し、それを統合して表示し、ユーザーが確認しやすくすることを説明しています。

インターネット上には RSS に関する多くの紹介がありますので、興味があれば検索してみてください。

RSS を購読すれば、RSS リーダーと組み合わせることで、ブログに関する最新の記事を直接見ることができますので、ここでは RSS リーダーに重点を置きます。RSS リーダーには、自分で構築するものや既製品を使用するものがあり、ブラウザの拡張機能、モバイルアプリ、デスクトップアプリ、ウェブアプリなど、さまざまなタイプがあります。ウェブアプリを構築することで、便利で手間がかからず、端末への依存度も低くなります。

OsmosFeedは GitHub 上のオープンソースの Web 版 RSS リーダーで、GitHub Pages を利用してホスティングでき、GitHub Actions を使用して定期的に自動更新が可能で、テーマもカスタマイズできます。

構築プロセス#

リポジトリの作成#

OsmosFeed リポジトリの設定チュートリアルにアクセスし、チュートリアルの「新しいリポジトリを作成」の最初のステップ「osmosfeed-template 公式テンプレートを使用してリポジトリを作成」をクリックします。ページが新しいリポジトリ作成画面に移動し、リポジトリ名を設定し、可視性を Public に設定して、「Create repository」ボタンをクリックして新しいリポジトリを作成します。

作成したばかりのリポジトリに入り、.github/workflowsディレクトリに移動し、update-feed.yamlファイルを以下の内容に変更します。

name: Build site on schedule or main branch update

on:
  push:
    branches:
      - main
  schedule:
    # ここでリフレッシュスケジュールを調整します。デフォルトでは、1日1回実行されます。
    # 構文の参照: https://docs.github.com/en/actions/reference/events-that-trigger-workflows#schedule
    # 推奨ツール: https://crontab.guru/
    - cron: "0 11 * * *"    # 設定した実行時間周期

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js environment
        uses: actions/[email protected]
        with:
          node-version: "20"
      - name: Install dependencies
        run: npm i
      - name: Build the feed
        run: npm run build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.action_token }}   # action_tokenは設定したActions secretsです。後で説明します。
          publish_dir: ./public

作成したばかりのリポジトリに入り、ルートディレクトリの osmosfeed.yaml ファイルを変更し、cacheUrl:行の前の#を削除し、GITHUB_USERNAMEを自分の GitHub 名に、REPO_NAMEをこのリポジトリの名前に変更します。sourcesの下の- href:は RSS/Atom ソースです。

cacheUrl: https://GITHUB_USERNAME.github.io/REPO_NAME/cache.json
sources:
  - href: https://css-tricks.com/feed/
  - href: https://www.freecodecamp.org/news/rss/
  - href: https://daverupert.com/atom.xml

認証トークンの設定#

自分のアバターをクリックし、「Settings」->「Developer settings」->「Personal access tokens」->「Tokens（classic）」を選択し、「Generate new token」をクリックします。「Generate new token（classic）」を選択し、認証後、説明的な名前を指定し、トークンの有効期限を選択し、このトークンに付与する範囲または権限を選択します。repo の項目だけを選択すれば大丈夫です。「Generate token」をクリックして作成を完了します。

作成が完了したら、トークンをコピーして保存します。後で使用します。
作成したばかりのリポジトリに入り、リポジトリの「Settings」->「Secrets and variables」->「Actions」に移動します。「Repository secrets」の「New repository secret」をクリックし、Actions secrets の名前を action_token（update-feed.yaml ファイルと一致させる）として入力し、2 ステップでコピーしたトークンを Secrets ボックスに貼り付け、「Add secret」をクリックして保存します。

GitHub Pages のデプロイ#

リポジトリの「Settings」->「Pages」に移動し、Branch で「gh-pages」を選択し、ディレクトリで「/(root)」を選択し、「save」をクリックして保存します。

ページを更新し、画面に Your site is published at https://githubユーザー名.github.io/リポジトリ名 の確認メッセージが表示されるまで待ちます（最大 1〜3 分）。これでデプロイが完了です。デプロイの詳細なプロセスは、リポジトリの「Actions」で具体的なプロセスや異常状況を確認できます。