sbxdの使い方

方法1: 自身のコンピュータ (=ローカル環境) で実行して見る

Node.jsをインストールする (OSによって方法が異なるので詳細は割愛)

sbxdをgit cloneまたはDownload Zipで自身のコンピュータに持ってくる

sbxd.config.jsを編集する

プロジェクトIDを自身のものに変更する

Webサイトのタイトルや全取得ボタンを押したときの日付範囲などもここで変更できる

ターミナルで以下のコマンドを実行する

$ npm install && npm run fetch && npm run build && npm run start

ブラウザでhttp://localhost:3000にアクセスする

方法2: GitHub Pagesを使ってWebで公開する

(まだ持っていなければ) GitHubのアカウントを作成する

sbxdのGitHubリポジトリにあるUse this templateボタンを押して、sbxdをテンプレートにした新しいリポジトリを作る

Include all branchesにはチェックを入れておく

https://gyazo.com/9eb88f637aa548e6d220b63f5dff015a

Settingsタブに移動してGitHub Pagesを有効にする

GitHub Actions (Beta) を選択して、残りのフィールドは空白のままでOK

https://gyazo.com/95e9e9f70575b1a3d215dfa723ad2240

sbxd.config.jsを編集する

GitHub上では、sbxd.config.jsを開いて (例) 鉛筆マークを押すと編集できる

Actionsタブに移動してGitHub Actionsをまず一度手動で実行する

Fetch all data to the contents branchのRun workflowボタンを押す

以降はDeploy Next.js site to pageが毎日実行されて直近3日の日記が取り込まれる

変更をすぐに反映させたい時は手動で実行すると良い

https://gyazo.com/f2b24ec96cb48b675c5f61f6f4f967d5

https://GitHubのユーザー名.github.io/テンプレートから作ったリポジトリ名/にアクセスする

GitHub PagesではURLを独自ドメインのものに変更することも可能