云野阁

Build an Online RSS Reader with 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 from blogs. So, let's focus on the RSS reader. There are many types of RSS readers, whether self-built or pre-made, including browser extensions, mobile apps, desktop programs, and web-based options. Building a web-based one is convenient, hassle-free, and has low dependency on the terminal.

OsmosFeed is an open-source web-based RSS reader on GitHub that can be hosted using GitHub Pages, utilizing GitHub Actions for regular automatic content updates, and the theme can be customized.

Setup Process#

Create a Repository#

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

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, and change GITHUB_USERNAME to your GitHub username and REPO_NAME to the name of this repository. The - href: under sources is for the RSS/Atom feed.

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”, select “Generate new token (classic)”, verify, specify a descriptive name, choose the token's expiration time, and select the scope 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 the confirmation message Your site is published at https://github用户名.github.io/仓库名 appears (it may take 1-3 minutes). You can then leave. The deployment is complete. For detailed deployment processes, you can check the repository's “Actions” to see specific processes and any exceptions.