📗 Docs
morethan-logをVercelに構築する
keywords
morethan-log,log,morethan,more,than,varsel,vercel,ばーせる,バーセル,deploy,Deploy,でぷろい,デプロイ
date
Mar 19, 2023
slug
morethanlog-vercel
author
status
Public
tags
Docs
morethan-log
summary
morethan-logをVercelに構築する方法を解説します。
type
Post
thumbnail
category
📗 Docs
updatedAt
Mar 19, 2023 07:12 AM
前提
vercelのアカウントを持っていること(ない場合は作ってね
githubのアカウントを持ってること(ない場合は作ってね
notionのアカウントを持っていること(ない場合は作ってね
構築
githubでmorethan-logをforkする
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff2f0ce1d-dfff-4be7-84bd-54dfb6388826%2F705374be-6269-4b76-ab8d-7937d959e6fc%2FUntitled.png%3Fid%3Dc4ff7897-e760-4d86-9298-2f4a2056e6a4%26table%3Dblock%26spaceId%3Df2f0ce1d-dfff-4be7-84bd-54dfb6388826%26expirationTimestamp%3D1722132000000%26signature%3D09rznr3lG26AJFHMu8mJYl-BCMyoZHuoTOTwusY03cE?table=block&id=c4ff7897-e760-4d86-9298-2f4a2056e6a4&cache=v2)
これを押してCreate forkを押す
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff2f0ce1d-dfff-4be7-84bd-54dfb6388826%2Ffbf97be6-f825-4c8e-b553-28fd9ff22fda%2FUntitled.png%3Fid%3D8c3fb10c-ff1b-42d0-a26c-b312c61f6f5d%26table%3Dblock%26spaceId%3Df2f0ce1d-dfff-4be7-84bd-54dfb6388826%26expirationTimestamp%3D1722132000000%26signature%3DbCzs504pEM12GLVyyG89DUriiSs-pxDPjq2D_gW7utg?table=block&id=8c3fb10c-ff1b-42d0-a26c-b312c61f6f5d&cache=v2)
終わったら自分のforkしたリポジトリに飛ばされるので site.config.js をクリックして鉛筆ボタンを押す
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff2f0ce1d-dfff-4be7-84bd-54dfb6388826%2Fb50aafc8-c121-4c49-aae2-0e4e71ce30c9%2FUntitled.png%3Fid%3D820cc2e7-b27b-4143-868a-47453ffb2e1d%26table%3Dblock%26spaceId%3Df2f0ce1d-dfff-4be7-84bd-54dfb6388826%26expirationTimestamp%3D1722132000000%26signature%3DAyr4FNGSGUHvjEdwEq6PNZAdnEiXd6XS0DhPTqj103M?table=block&id=820cc2e7-b27b-4143-868a-47453ffb2e1d&cache=v2)
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff2f0ce1d-dfff-4be7-84bd-54dfb6388826%2Fed588e76-970b-407e-bee7-a0c3c2ac8465%2FUntitled.png%3Fid%3D41cf4ec9-628f-4486-910e-dab2f5c2a4ee%26table%3Dblock%26spaceId%3Df2f0ce1d-dfff-4be7-84bd-54dfb6388826%26expirationTimestamp%3D1722132000000%26signature%3DOWtaAVC2x8VYXYUqMULk6DJOvQsF5P_shRWPDSslSa4?table=block&id=41cf4ec9-628f-4486-910e-dab2f5c2a4ee&cache=v2)
押すと編集できるようになるので編集するべきとこを編集する
profile: の中とblog:は目を通して編集するのを推奨
blogの中のlinkは確実に変えること
変えたら Commit changes を押してもう一回出てくるからもう一回押しておしまい
終わったらここのnotionのやつを複製する
複製の仕方は複製ボタンを押す
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff2f0ce1d-dfff-4be7-84bd-54dfb6388826%2F0db4f87e-c270-4379-8593-50d7424b52e5%2FUntitled.png%3Fid%3Df8192a08-08a1-43b9-908f-135b2ac7f70a%26table%3Dblock%26spaceId%3Df2f0ce1d-dfff-4be7-84bd-54dfb6388826%26expirationTimestamp%3D1722132000000%26signature%3D1rL64e7gl8ltOi9m3HbuTiRMYuoBjxGwdB-T-wR9YW8?table=block&id=f8192a08-08a1-43b9-908f-135b2ac7f70a&cache=v2)
複製出来たら 共有 を押して Webで公開 を押して ウェブ公開リンク用コピーを押す。
https://<なんかしら>.notion.site/<ここを使う>?v=<なんか文字列>
上のようなURLができるので ここを使う になっているところをコピーして使ってください
例えば僕の場合は
https://mattyatea.notion.site/a93907fcad6f43a3bbabcb6aaf7b78a7?v=368cd6bee5bb46e5aa85107a80730e5d
このリンクの a93907fcad6f43a3bbabcb6aaf7b78a7 の部分を使うよ ってことかも
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Ff2f0ce1d-dfff-4be7-84bd-54dfb6388826%2Fcae68633-6c7c-4e59-87ce-bb6b4b580d31%2FUntitled.png%3Fid%3D6675a55e-aa71-40df-a4bb-4fe43445fa2c%26table%3Dblock%26spaceId%3Df2f0ce1d-dfff-4be7-84bd-54dfb6388826%26expirationTimestamp%3D1722132000000%26signature%3DvG13BSIBoDRz6kTizqURZW3Il-xuqq8uRTNovsTjmhg?table=block&id=6675a55e-aa71-40df-a4bb-4fe43445fa2c&cache=v2)
vercelを開いて
Add Newを押してProjectを押す。
そうすると Import Git repository が出てくるから Continue with Github を押して画面にしたがってログインする
Repositoryはすべて許可が一番楽だからそれにするのをおすすめしているかも
連携出来たらリポジトリが出てくるので morethan-log の横にある Import を押す。
projectname.vercel.appみたいになるので projectnameは変えることを推奨。
あと Environment Variables に
EXAMPLE_NAMEのところに NOTION_PAGE_ID と入力して 英数字の羅列が入ってるほうにさっきメモしたやつをコピペしてAddを押してから Deploy をぽち
終わるのに2分くらいかかるので気長に待つ
終わったら DOMAINS にURLがあるのでそれ見るとあら不思議、たぶん初期の記事がたくさんあると思います
Q. faviconとかアイコンとか変えられないんですか?
A.変えられます。詳しい方法は
githubに行きます。
自分のmorethan-logを開きます。
publicにある
favicon.ico と apple-touch-icon.png を上書きすればfaviconなどが変えられます。
自分のアイコンはこのpublicの中に画像ファイルをあげたあとに一戸戻って site.config.js のなかの image のところを /上げた画像のファイル名 みたいにすれば変わるはずです。
以上です。