📗 Docs

morethan-logをcloudflare pagesに構築する

keywords
date
Mar 19, 2023
slug
morethanlog-cfpages
author
status
Public
tags
morethan-log
Docs
summary
type
Post
thumbnail
category
📗 Docs
updatedAt
Mar 19, 2023 04:58 AM

前提

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

構築

githubmorethan-log-cfpageをforkする(画像は使いまわしなのでお気になさらず)
notion image
これを押してCreate forkを押す
notion image
終わったら自分のforkしたリポジトリに飛ばされるので site.config.js をクリックして鉛筆ボタンを押す
notion image
notion image
押すと編集できるようになるので編集するべきとこを編集する
profile: の中とblog:は目を通して編集するのを推奨
blogの中のlinkは確実に変えること
変えたら Commit changes を押してもう一回出てくるからもう一回押しておしまい
終わったらここのnotionのやつを複製する
複製の仕方は複製ボタンを押す
notion image
複製出来たら 共有 を押して Webで公開 を押して ウェブ公開リンク用コピーを押す。
https://<なんかしら>.notion.site/<ここを使う>?v=<なんか文字列>
上のようなURLができるので ここを使う になっているところをコピーして使ってください
例えば僕の場合は
https://mattyatea.notion.site/a93907fcad6f43a3bbabcb6aaf7b78a7?v=368cd6bee5bb46e5aa85107a80730e5d
僕の場合はこのリンクの a93907fcad6f43a3bbabcb6aaf7b78a7 の部分を使うよ ってことかも
 
notion image
 
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のほうに さっきメモした英数字の羅列
 
をコピペする
空白の判定がとても厳しいので余分な空白が入ってないか要注意
画像のようになっていればよいかも
notion image
入力できたことを確認したら 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 のところを /上げた画像のファイル名 みたいにすれば変わるはずです。
 
以上です。