云野阁

Build an Online RSS Reader Using OsmosFeed on GitHub (No Server Required)#

Introduction#

What is RSS? Let's talk about it.

By subscribing to RSS and using an RSS reader, you can directly see the latest articles related to blogs. So, let's focus on the RSS reader. There are many types of RSS readers, whether self-built or ready-made, such as browser extensions, mobile apps, desktop programs, and web-based options. Building a web-based one is convenient, hassle-free, and less dependent on the terminal.

OsmosFeed is an open-source web-based RSS reader on GitHub that can be hosted using GitHub Pages and utilizes GitHub Actions for regular automatic content updates, with customizable themes.

Setup Process#

Create a Repository#

1. Visit the configuration tutorial for OsmosFeed, click on the first step in "Create a new repository" which says "Create a repository using the osmosfeed-template official template." The page will redirect to the new repository creation interface. Set the repository name and set visibility to Public, then click the Create repository button.

2. Enter the newly created repository, navigate to the directory .github/workflows, and modify the update-feed.yaml file to the following content.

name: Build site on schedule or main branch update

on:
  push:
    branches:
      - main
  schedule:
    # Adjust refresh schedule here. By default, it runs once per day.
    # Syntax reference: https://docs.github.com/en/actions/reference/events-that-trigger-workflows#schedule
    # Recommended tool: https://crontab.guru/
    - cron: "0 11 * * *"    # Set execution time period

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 is the Actions secret set, which will be discussed later
          publish_dir: ./public

3. Enter the newly created repository, modify the osmosfeed.yaml file in the root directory by removing the # before the cacheUrl: line, changing GITHUB_USERNAME to your GitHub username, and REPO_NAME to the name of this repository. The - href: under sources is for the RSS/Atom feeds.

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

Set Up Authentication Token#

1. Click on your avatar, select “Settings” -> “Developer settings” -> “Personal access tokens” -> “Tokens (classic)”, click “Generate new token”, choose “Generate new token (classic)”, verify, specify a descriptive name, select the token's expiration time, and choose the scopes or permissions to grant this token. You only need to select the repo option. Click “Generate token” to complete the creation.

2. After creation, copy and save the token for later use.

3. Enter the newly created repository, go to “Settings” -> “Secrets and variables” -> “Actions”. Click “New repository secret” under “Repository secrets”, enter the name for the Actions secret as action_token (keeping it consistent with the update-feed.yaml file), and paste the token copied in step 2 into the Secrets box, then click “Add secret” to save.

Deploy GitHub Pages#

1. Go to the repository’s “Settings” -> “Pages”, select “gh-pages” in the Branch, choose “/(root)” for the directory, and click “save” to save.

2. Refresh the page until you see the confirmation message Your site is published at https://github_username.github.io/repo_name (it may take 1-3 minutes). Once you see this, you can leave. The deployment is complete. You can check the detailed process and any exceptions in the repository’s “Actions”.