Closed2023/01/03にクローズ10

team-blog-hubをCloudflare Pagesにデプロイ

Motivation

で紹介されたteam-blog-hubを

Cloudflare PagesにDeployする際に、少しごちゃついたので、メモ残しておきます

Local環境の用意

team-blog-hubをfork

Localで作業する

cloneして、以下を編集する

members.ts
public/avatars/
site.config.ts

見た目も色々変更したかったら、好きに変更する

Cloudflare Pages の準備

team-blog-hubをforkしたレポジトリをCloudflare Pagesで連携する

環境変数にNODE_VERSIONを指定

NODE_VERSION
16.13.1

※Node.js 18 にCloudflare Pagesが対応していなかったので、Node.js16を利用

Deployコマンドの設定

静的ページでDeployする

Deploy時に、RSS情報更新したいので、cloudflare pagesデフォルトのコマンドを少し書き換える必要がある

カスタムドメインの設定

必要であれば、カスタムドメインの設定をする

自分は、cloudflareで持っているドメインのサブドメインを作成。サクサクで便利。

投稿一覧を更新するための定期実行

どうやろうか考え中...

自分は、それほど記事更新しないしなぁ...
GitHubActions?Cloudflare?何で行おうか？

Deploy Hooksを、Cloudflare WorkersのCron Triggersで定期実行する

Deploy Hooks

Schedule a CRON trigger to update your website on a fixed timeline

Cron Triggers

結果

https://blog-hub.kiichisugihara.com/

カスタマイズ

個人的にカスタマイズしたことを記述します。

外部リンクの別タブ化

記事やSNSリンクをクリックして、同じタブで開かれると、ポータルサイトに戻りにくいので、別タブで開く。

Close

感想

自分がチーム用に使う場合、エンジニアメンバー以外も含めたい所。ただし、GitHub管理している以上、エンジニアがメンテナンスする必要がある。

spread sheetやnotionなど、何かしらの別のデータ管理場所をcron jobで取得して、データを利用するような方針にしないとメンテナンス出来ないと思う。

このスクラップは2023/01/03にクローズされました