大家好,我是 “潇洒哥老苗”。
今天我带大家创建一个站,不需要购买服务器,只需要掏钱买个自己喜欢的域名即可。
涉及
- Vercel:免费静态网站托管
- Notion:内容后台
- CloudFlare:CDN 加速
- 域名
- nextjs-notion-starter-kit:以 Notion 为后台的网站
nextjs-notion-starter-kit
1. fork
打开该网址,然后 fork 该项目。
2. 修改项目名(可选)
如果 fork 后的项目名不喜欢,可以修改自己喜欢的。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F977979bb-800b-4afb-9bdf-cfe7ded4af82%2FUntitled.png%3Fid%3Dde0b1eaf-9b74-49b3-bda3-eb4ce65bb8f7%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DxH3deXDv3nPRgc3t39eBzvS6oi1g3_44rdkI8KpBLQI?table=block&id=de0b1eaf-9b74-49b3-bda3-eb4ce65bb8f7&cache=v2)
3. 修改配置
在项目根目录打开
site.config.js
文件,点击修改,如下:![编辑文件](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F71d046b6-9958-4a48-8111-b18ab3507d4e%2FUntitled.png%3Fid%3D52aec4a7-578b-4c26-a39b-6c75ac16ddcb%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DL47FEKEvaTYCCVmu-wcCAVP8LvMLiaG5OnzUYSJ7Jp0?table=block&id=52aec4a7-578b-4c26-a39b-6c75ac16ddcb&cache=v2)
然后修改几处内容,刚开始只需要看有中文描述的几处。
module.exports = { // where it all starts -- the site's root Notion page (required) // Notion 根页面的 ID rootNotionPageId: 'c811c01b7d824f5ba966f688ee37652b', // if you want to restrict pages to a single notion workspace (optional) // (this should be a Notion ID; see the docs for how to extract this) rootNotionSpaceId: null, // basic site info (required) name: '老苗', // 站名 domain: 'laomiao.site', // 域名 author: '老苗', // 作者 // open graph metadata (optional) description: '专注技术、持续学习', // 网站描述 socialImageTitle: 'Transitive Bullshit', socialImageSubtitle: 'Hello World! 👋', // social usernames (optional) // 社交账号 twitter: 'laomiao_', github: 'miaogaolin', linkedin: '', // default notion icon and cover images for site-wide consistency (optional) // page-specific values will override these site-wide defaults defaultPageIcon: null, defaultPageCover: null, defaultPageCoverPosition: 0.5, // image CDN host to proxy all image requests through (optional) // NOTE: this requires you to set up an external image proxy imageCDNHost: null, // Utteranc.es comments via GitHub issue comments (optional) utterancesGitHubRepo: null, // whether or not to enable support for LQIP preview images (optional) // NOTE: this requires you to set up Google Firebase and add the environment // variables specified in .env.example isPreviewImageSupportEnabled: false, // map of notion page IDs to URL paths (optional) // any pages defined here will override their default URL paths // example: // // pageUrlOverrides: { // '/foo': '067dd719a912471ea9a3ac10710e7fdf', // '/bar': '0be6efce9daf42688f65c76b89f8eb27' // } pageUrlOverrides: null }
改完后直接提交。
4. rootNotionPageId
从这个 ID 页面开始同步网站,该页面必须公开,选中下图 Share to Web。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Fd7e0c49e-5e7c-4129-a1ce-892ba490d18b%2FUntitled.png%3Fid%3Df22a1db3-2029-4aa9-82d8-8bd234ea08fd%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DMIDV5157lCrB_spZUc038-l3wQ29rd21uq4YSPdsEN4?table=block&id=f22a1db3-2029-4aa9-82d8-8bd234ea08fd&cache=v2)
ID 从网址上找,例如:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Fd441d40a-68d6-4afb-b094-68c64ccb7c2f%2FUntitled.png%3Fid%3Dab9504dc-8c96-4bed-9762-ff275ffb396b%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3D-KKy81-uYcdWGu5bU0OlXR670u95VzzKuhLNO0O8hOA?table=block&id=ab9504dc-8c96-4bed-9762-ff275ffb396b&cache=v2)
Vercel
下来做的是,将 Notion 的内容同步到 https://vercel.com/ 网站,等这个完了再解析域名即可。
1. Github
使用 Github 登录
2. 创建项目
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F2533fe7d-1be2-40b6-8f24-879b3b990711%2FUntitled.png%3Fid%3Dd0cab6f4-4c5f-41c5-b814-ad4357bcfc96%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3Dq50OvEVaC_qo3_B_7Jo6qEyHJ5D1-dW24wVL0YqAXB8?table=block&id=d0cab6f4-4c5f-41c5-b814-ad4357bcfc96&cache=v2)
3. Import & Deploy
导入 Github 上 fork 后的项目,import 后再点击 deploy,下来需要耐心等会。
![Import](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F6b760b2f-8b08-4b6c-b4fb-51869f197b9f%2FUntitled.png%3Fid%3D1f29137d-63a4-4e05-8634-78c406c15369%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DaUSMmfyAfFFNrzFXI5hUoJdDR4Bu9oQRAVlzGj5aCnE?table=block&id=1f29137d-63a4-4e05-8634-78c406c15369&cache=v2)
![Deploy](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F08d5acf0-ee64-4029-8e2d-bc90d6cff7bc%2FUntitled.png%3Fid%3Dfabde88d-28a2-48c2-b78f-cbe2708ee633%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DhQI3Ggq4EKbYCOb6Eh5I2VFz994oprZtGVHJkzWlLWc?table=block&id=fabde88d-28a2-48c2-b78f-cbe2708ee633&cache=v2)
4. 域名
完成后点击 Go to Dashboard > View Domains,再添加自己的域名。
![Domain](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F752b41aa-4382-4be9-ae93-4a79e244d641%2FUntitled.png%3Fid%3D99e8855e-fba1-464c-a9ac-b894c0cb42b4%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DAe8PgkHwr6akZNLCtWkEu5eTls8YuggsHoMWVxk3Pig?table=block&id=99e8855e-fba1-464c-a9ac-b894c0cb42b4&cache=v2)
添加完后,再解析自己的域名,我的域名在阿里云购买的,先复制上图中蓝色框的内容,这个是在 Vercel 站上给你分配的域名。这个域名不方便,所以用自己的。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Fbe7242f3-cd3f-4eef-b7bf-01ee2e03e4c9%2FUntitled.png%3Fid%3Def6cd9e2-5bb1-4a93-9466-3204ad529927%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3D9_JO2LawPdgv9oAGEmMXhkaMjkxmCIl84oz28bNCR8E?table=block&id=ef6cd9e2-5bb1-4a93-9466-3204ad529927&cache=v2)
图解:
- 记录类型:CNAME
- 记录值:填写自己的
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Fd0679270-0a4b-417b-96ae-6c7b9c5774d9%2FUntitled.png%3Fid%3Df9186bea-cd0e-4045-9e1d-6831c0c4600a%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3D7LU54y2rcimIYVksLCObX2GAm32yabDOtu1kEbMRMyw?table=block&id=f9186bea-cd0e-4045-9e1d-6831c0c4600a&cache=v2)
网站细节调整
1. 修改 copyright 时间
最新代码无需设置。
从根目录打开 components/Footer.tsx 文件,在大概 38 行处修改,如下图:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F50e6d066-2771-43e0-afb5-21f320e892a5%2FUntitled.png%3Fid%3Dfa0cbb1a-7563-4950-ade4-c6c497c8ffdf%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3Dgb1Uft4bRM0J1DPmyTeLHnl_N6eaactRSz0OUrC1cs4?table=block&id=fa0cbb1a-7563-4950-ade4-c6c497c8ffdf&cache=v2)
2. 默认 icon 和 conver 图
每个 notion 页面都可以设置这两个图,当如果也想在不设置的情况下,网站提供一个默认图,可以修改
site.config.js
如下配置:defaultPageIcon: "https://laomiao.site/page-icon.png", defaultPageCover: "https://laomiao.site/page-conver.jpg",
按照我这个地址,是把图片放置在了根目录下的
public/
下。3. 首页文章配置
这是我个人的文章属性:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Fdef4b845-e977-4b27-a75c-9faa5ef20bdf%2FUntitled.png%3Fid%3D40b29df8-402c-4c62-900b-64408ccb1fa3%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DueHySYjWL00pGB91dbMPjBV2DjSzoKS2bsJ-d5gPiAM?table=block&id=40b29df8-402c-4c62-900b-64408ccb1fa3&cache=v2)
其中 4 个拿出来说明下:
- Published 发布时间
- Tags 标签
- Public 是否公开
- Featured 是否好文章
Published 发布 和 Tags 标签在如下图中配置,展示列表中出现的信息:
![文章列表信息](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F6fd4a5a6-761b-4f0c-8819-4aaba8bbf123%2FUntitled.png%3Fid%3D9689a350-203e-4eb5-8135-f53a784f4d9c%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DLRoPY0q7fu5Iqbq4GEsJZoMTzRU0IWTlXiYbWYC-uWg?table=block&id=9689a350-203e-4eb5-8135-f53a784f4d9c&cache=v2)
Public 用于筛选,确定是否在首页展示。
Featured 和 Published 用于排序。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Ff31c6d52-ec28-4d93-be1b-63bb975b4433%2FUntitled.png%3Fid%3D50fb0fcc-5334-4337-85da-3b0177a162f5%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DRSHMC0oGBQ4ecQclPV6A6Bs5kY3igOOqs9nE5KqDJCQ?table=block&id=50fb0fcc-5334-4337-85da-3b0177a162f5&cache=v2)
如果不想展示的属性你这隐藏起来,不然会页面上展示出来,记着属性的顺序也会影响到页面的展示:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F5e0860eb-b11a-4a98-bab2-fddd56c49983%2FUntitled.png%3Fid%3D9170cbc3-f288-4847-ac17-8a727a98f020%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DxE1yDVXxl2EBC2cLWA4Ncpwy-DQ3vlae7313E48Fngk?table=block&id=9170cbc3-f288-4847-ac17-8a727a98f020&cache=v2)
CloudFlare
也可以不使用 CloudFlare 加速网站,但是如果使用 Vercel 部署的网站在国内访问起来会比较慢,可以试试,反正我没用,用了发现速度提不起来。
1. 添加网站
打开 CloudFlare 网站,添加自己的域名,cloudflare.com,后面咱简称 CF。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F605be502-ef16-4a96-be37-7c88deaa7f24%2FUntitled.png%3Fid%3D1d9bd136-abf5-42ad-8b6e-9fe9552a76fd%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3Da1_9PKn7jN2jT4t-doVNm_pRpJNjwTy-Fo4e4KfOTWw?table=block&id=1d9bd136-abf5-42ad-8b6e-9fe9552a76fd&cache=v2)
2. DNS
找到自己购买的域名,然后修改 DNS 服务器,修改成什么样呢?
先打开 CloudFlare 后台,找到 DNS 服务器地址,如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F1614c37d-933c-4187-95dd-493c63cfbb3d%2FUntitled.png%3Fid%3D9c0e6977-ba60-4229-8a12-96b6eb579f3b%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3D2F2i_V6N_DBeuYvK0v-iXHg0wyh6et9NaQ4dHcE_X2o?table=block&id=9c0e6977-ba60-4229-8a12-96b6eb579f3b&cache=v2)
然后修改域名的 DNS 服务器地址,如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Ff049ae48-866e-4c59-aa1c-d8748cdd322a%2FUntitled.png%3Fid%3Dc01a38e3-dbc2-4370-8463-0d7850488f4f%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DSX6a9zUl-uaSgLe6MbnFu-6TeUFZa3KDeoDI_lwMjqc?table=block&id=c01a38e3-dbc2-4370-8463-0d7850488f4f&cache=v2)
CF 上解析 DNS,如下:
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Ff5c60302-db1d-4734-82c6-f928251223a7%2FUntitled.png%3Fid%3D56220139-4cad-4944-9721-70de3dbf0dc7%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DYRzLbuZ3OwMH1FbGE21cnno9U2Us1y-mIQJHgV2hi9Y?table=block&id=56220139-4cad-4944-9721-70de3dbf0dc7&cache=v2)
图解:
- 内容:复制该 IP 地址,这是 Vercel 的 IP。
- 代理状态:设置为仅限 DNS。
3. 规则
在 CF 上添加两条规则,记着要根据自己的域名配置,这些配置是为了解决 SSL 证书问题,具体的,咱没深究。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2Fb6c773b5-d1b2-450d-b65d-97f7c98cffc9%2FUntitled.png%3Fid%3Dc5014169-204d-4ee6-aae9-a92d9846925b%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DzoA8J5TNHyF9qh0xIWN3LmEheQwkD0uyIKnyuqSoscM?table=block&id=c5014169-204d-4ee6-aae9-a92d9846925b&cache=v2)
4. 边缘证书
点击 SSL/TLS > 边缘证书,关闭 Https,至于为啥,暂时也没深究,我在第一次操作时没有添加,网站访问速度还是,后面加上后好了,不知道是巧合还是什么。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F8d969452-5c84-4077-ade0-6d3379a62be6%2FUntitled.png%3Fid%3D04456d44-fcb3-4568-ae7d-3f634400d17d%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3D8q7FpnVN9fnX0BAoki5-mVdGhSDjYh8JJhb6bzP5_OM?table=block&id=04456d44-fcb3-4568-ae7d-3f634400d17d&cache=v2)
扩展
1. 分析
配置都完了,现在可以再访问了,如果你还想分析网站的访问速度情况,可以打开 Vercel 的分析模块。
![notion image](https://www.notion.so/image/https%3A%2F%2Ffile.notion.so%2Ff%2Ff%2Fd54b0f25-9426-4b83-9c51-2e6165a030b2%2F5ccbbada-5267-4375-b67f-a4bf850546d7%2FUntitled.png%3Fid%3Dc2caf60c-ed9a-47dd-866f-8622635be8ed%26table%3Dblock%26spaceId%3Dd54b0f25-9426-4b83-9c51-2e6165a030b2%26expirationTimestamp%3D1722146400000%26signature%3DBhQOUj3xh8lalSjiLLnywTns_Q5IQ8ZyW_FYuxrkXu8?table=block&id=c2caf60c-ed9a-47dd-866f-8622635be8ed&cache=v2)