はじめに

GitHubPages + GitHub Actions でコンテンツを自動的に更新するWebサイトをつくってみました.GitHub Trending に登場したリポジトリに付与されていた topics を一覧表示するサイトです.言語ごとの用途がざっくりとした感じでみることができます.

Topics in GitHub Trending - GitHub

今回,勉強も兼ねてフロントエンドとデータのクローリング処理共に Elm で記述しました.

GitHub Actions によるバッチ処理の定刻実行

GitHub Actionsによって定刻実行されるバッチ処理はは以下の3つのジョブからなります.

  • build
  • crawl
  • push

それぞれ,クローリングスクリプトのビルド,データのクローリング,データのリポジトリへのプッシュを行います.設定の詳細はこちらを参考にしてください.

CLIプログラムを Elm で書く

crawlジョブではElmで記述されたCLIプログラムを実行してデータの取得を行います.ElmはWebフロントエンドを記述することに特化している言語です.そのため,CLIプログラムの開発に必要な,コマンドライン引数の処理といった機能がサポートされいません.そこで,今回は以下のパッケージを持ちました.

pdillonkearns/elm-cli-options-parser

こちらのパッケージを用いると,Flagを用いてコマンドライン引数へのアクセスが可能となります.今回のプログラムでは,以下の様にgithubTokenlanguagedataRange とを引数から受け取っています.

init : Flags -> TrendingApiOptions -> ( Model, Cmd Msg )
init { githubToken } { language, dateRange } =
    ( { githubToken = githubToken }
    , attemptApi TrendingApiResponse (fetchTrending githubToken language dateRange)
    )

また,GitHub Tredingsの取得は以下のAPIを利用させていただきました.

github-trending-api

クローリング結果の保存

今回,GitHub PagesのみでWebサイトをホスティングするため,データベースを使用することはできません.そのため,クローリング結果はJSONに整形されたのちに,直接GitHub Pagesのリポジトリにプッシュされます.

topics

この,JSONをフロントエンドから取得することで動的なコンテンツ更新を実現します.

Elmによるフロントエンド開発

特筆すべきことはありません.Elmは本当に書きやすい言語でした.

所感

Elmの勉強としてはちょうど良い分量でした.GitHub PagesとGitHub Actionsで結構なことができる印象なので,また何かチャレンジしたいですね.