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」で具体的なプロセスや異常を確認できます。