morethan-logをCloudflare pagesに構築する

keywords

morethan-log,log,morethan,more,than,cloudflare,Cloudflare,pages,Pages,deploy,Deploy,でぷろい,デプロイ

date

Mar 19, 2023

slug

morethanlog-cfpages

author

status

Public

前提

cloudflareのアカウントを持っていること(ない場合は作ってね

githubのアカウントを持ってること(ない場合は作ってね

notionのアカウントを持っていること(ない場合は作ってね

構築

githubでmorethan-log-cfpageをforkする(画像は使いまわしなのでお気になさらず)

これを押してCreate forkを押す

終わったら自分のforkしたリポジトリに飛ばされるので site.config.js をクリックして鉛筆ボタンを押す

押すと編集できるようになるので編集するべきとこを編集する

profile: の中とblog:は目を通して編集するのを推奨

blogの中のlinkは確実に変えること

変えたら Commit changes を押してもう一回出てくるからもう一回押しておしまい

終わったらここのnotionのやつを複製する

複製の仕方は複製ボタンを押す

複製出来たら共有を押して Webで公開を押してウェブ公開リンク用コピーを押す。

https://<なんかしら>.notion.site/<ここを使う>?v=<なんか文字列>

上のようなURLができるのでここを使うになっているところをコピーして使ってください

例えば僕の場合は

https://mattyatea.notion.site/a93907fcad6f43a3bbabcb6aaf7b78a7?v=368cd6bee5bb46e5aa85107a80730e5d

僕の場合はこのリンクの a93907fcad6f43a3bbabcb6aaf7b78a7 の部分を使うよってことかも

cloudflare dashboard を開いて Pages をぽちー

Create a project → Connect to Git をぽちーしてgithubと連携するようにでるので連携する

morethan-log-cfpagesを選択して Begin setup を押す。

Project nameは必ず変えることを推奨するかも(urlに含まれるようになるから)

Build settings の Framework preset は Next.js (Static HTML Export) にする

そして Environment variables(advanced) の

VARIABLE_NAME にNODE_VERSION

Valueのほうにv16.16.0

と入力、

Add variable を押して

新しい枠ができるので

VARIABLE_NAME にNOTION_PAGE_ID　

Valueのほうにさっきメモした英数字の羅列

をコピペする

空白の判定がとても厳しいので余分な空白が入ってないか要注意

画像のようになっていればよいかも

入力できたことを確認したら Save and Deploy を押す

build and deploy が終わるまで待つ

2分くらいかかるかも

Q. faviconとかアイコンとか変えられないんですか？

A.変えられます。詳しい方法は

githubに行きます。

自分のmorethan-logを開きます。

publicにある

favicon.ico と apple-touch-icon.png を上書きすればfaviconなどが変えられます。

自分のアイコンはこのpublicの中に画像ファイルをあげたあとに一戸戻って site.config.js のなかの image のところを /上げた画像のファイル名みたいにすれば変わるはずです。

以上です。