GitHub PagesでRSSフィードを購読する

スマホをAndroidに変えてからRSSリーダー難民です。iOSではReederを、LinuxではNewsboatを使用していたのですが、Androidだと自分の気に入ったアプリがなかなか見つかりません。また、ReederともNewsboatとも連携が取れず不便です。ということでWebから確認できるRSSリーダーを作っていきます。

仕組み

1. GitHubリポジトリにRSSフィードのリンクを記載したテキストファイルをコミット
2. GitHub Actionsを定期的に実行し、記載されたリンクから最新のRSSを取得
3. 取得したRSSをパースし、Pagesの記事としてコミット
4. Pagesの記事として公開する

です。

ローカルに動作環境を作る

GitHub PagesでWebサイトを公開するために、Webサイトのフレームワーク、Hugoを使用していきます。

gohugo.io

インストール方法はこちらを参考にしてください。

手順はQuick startを参考に進めていきます。

$ hugo new site rss-reader
$ cd rss-reader
$ git init
$ git commit -m 'first commit' --allow-empty

テーマはこちらからsmigleを選定しました。特に理由はありません。

$ git submodule add https://gitlab.com/ian-s-mcb/smigle-hugo-theme.git themes/smigle
$ echo "theme = 'smigle'" >> hugo.toml

hugoコマンドをサーバーモードで起動して、正しく動くか確認します。

$ hugo server

ブラウザでhttp://localhost:1313にアクセスして正しく動作しているか確認します。

まだコンテンツを入れていないので空のページが表示されます。

コンテンツを入れていく

本当はRSSをパースしてコンテンツを追加していくのですが、まず先に正しく動くか見てみましょう。hugoコマンドでコンテンツを追加できます。

$ hugo new content content/posts/hello.md
Content "/Users/ttanaka/rss-reader/content/posts/hello.md" created

$ cat content/posts/hello.md
+++
title = 'Hello'
date = 2024-09-18T14:27:52+09:00
draft = true
+++

Helloというタイトルでポストが作成されましたが、draft = trueとなっているのでまだ公開されていません。本文もないので少し修正します。

diff --git a/rss-reader/content/posts/hello.md b/rss-reader/content/posts/hello.md
index fa7450f..5b7318d 100644
--- a/rss-reader/content/posts/hello.md
+++ b/rss-reader/content/posts/hello.md
@@ -1,5 +1,6 @@
 +++
 title = 'Hello'
 date = 2024-09-18T14:27:52+09:00
-draft = true
 +++
+
+Hello world!

このように修正してみました。hugo serverで確認します。

Helloというポストが見えれば成功です。

GitHub Pages公開する

ここまでの手順で作成したWebサイトをGitHub Pagesで公開します。

gohugo.io

手順はこちらにある通りです。

1. リポジトリを作成
2. Step 6の通り、.github/workflows/hugo.yamlを作成
3. Hugoで作った一式をコミット＆プッシュ
4. リポジトリの Settings > Pages > Github Actionsを選択

うまく設定できているとhttps://<github-user-name>.github.io/<repository-name>にアクセスすれば、先ほどhugo serverで確認したWebサイトと同じものが表示されます。

RSSをパースする

最後にメインの機能を実装します。

github.com

このツールを実行すると、 urlsからリンクを1行読み込みcontent/posts/<titleのhash>.mdというファイルを出力します。

出力されたファイルをGitHub Actionsからコミットすれば、先ほどのWebサイト上でRSSが閲覧できる状態となります。

GitHub Actionsで自動化

.github/workflows/hugo.yamlに処理を追加します。

diff --git a/.github/workflows/hugo.yaml b/.github/workflows/hugo.yaml
index c505eb5..8b133b4 100644
--- a/.github/workflows/hugo.yaml
+++ b/.github/workflows/hugo.yaml
@@ -28,9 +28,34 @@ defaults:
     shell: bash

 jobs:
+  # Update contents job
+  update:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - name: Install modules
+        run: npm ci
+      - name: Run script
+        run: node main.js
+      - name: Commit files
+        run: |
+          git config user.name github-actions
+          git config user.email github-actions@github.com
+          git add content/posts
+          git commit -m "generated"
+          git push
+
   # Build job
   build:
     runs-on: ubuntu-latest
+    needs: update
     env:
       HUGO_VERSION: 0.128.0
     steps:

この変更をGitHubにPushすると、RSSがGitHub Pagesで確認できるようになります。

ただし、このままでは変更をPushしないとRSSが更新されないので、GitHub Actionsの定期実行を設定します。

diff --git a/.github/workflows/hugo.yaml b/.github/workflows/hugo.yaml
index 8b133b4..2063463 100644
--- a/.github/workflows/hugo.yaml
+++ b/.github/workflows/hugo.yaml
@@ -10,6 +10,10 @@ on:
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

+  # Runs every hour at 0 minutes
+  schedule:
+    - cron: '0 * * * *'
+
 # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read

この設定では毎時0分にGitHub Actionsが実行されます。ここの設定をあまり短く設定するとRSSを発行しているサイトにもGitHubにも迷惑をかけるので気をつけましょう！

微調整

GitHub PagesのURLはリポジトリ名がパスに入ってしまうので、tagsなどのリンクがうまく動かないかもしれません。私の環境ではtagをクリックすると/にリダイレクトされ、うまく動きませんでした。そこでhugo.tomlに以下の設定を追加します。

• https://gohugo.io/content-management/urls/#relative-urls
• https://gohugo.io/content-management/urls/#canonical-urls

diff --git a/hugo.toml b/hugo.toml
index 93b8b46..b97c18f 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1,4 +1,6 @@
 baseURL = 'https://virtualtech-devops.github.io/rss-reader/'
+relativeURLs = true
+canonifyURLs = true
 languageCode = 'ja-jp'
 title = 'My RSS Reader'
 theme = 'smigle'

まとめ

ここまでの設定はサンプルとして公開してあります。

github.com

Demoサイトはこちら

virtualtech-devops.github.io

スマホでみるとこんな感じ

タグで絞ってもいい感じ

Hugoは色々カスタムできるので、見やすいテーマを設定し自分なりにカスタムしてみても面白そうです。

今回のサンプルではRSS化したポストが無限に溜まり続けるので、この辺は改善が必須だと思います。改善しよう・・・