建立专属域名的个人网站竟如此简单Notion建站干货
前言
本文献给那些不懂技术或写代码，但却想拥有个人网站的同学们。
虽然文章很长，但其实并不复杂，只是笔者几乎将每一步细节都截图说明。
读者只需按部就班，即可完成建设有自己专属域名的个人网站。
笔者这样的技术小白都能搞定，你一定能行！
准备工作
1. 需要有Notion账户：这个笔者强推的笔记应用，可以让你维护属于自己的页面。
2. 注册Cloudflare：用来建立你个人域名和notion页面的联系。
3. 注册域名：挑个属于自己的域名，方便记忆、传播。
4. 点击阅读原文可获得文中后续步骤需要的代码。
创建Notion页面
1. 注册 https://www.notion.so/signup
2. 添加新页面，这个页面也就是你的个人网页
3. 将想要的内容填写在页面上
4. 将页面Share to the web，获得页面链接
5. 这时，你就已经有了一个可以分享给其他人访问的专属Notion页面，例如本例中我的notion页面地址，记下来这个地址，后续要用。
https://www.notion.so/MyBlog-5acd562f87724d0caf0573ee01103343
他人访问这个页面无需注册notion。
个性化域名
上面的步骤做完后，可以看到我们得到的地址很长，不利于个人branding
接下来的步骤用来将自己的专属域名指向这个页面
本文作者的域名注册于Google Domains，其中包含的设置方法适用于其他域名注册商
注册Cloudflare
1. 免费注册
https://dash.cloudflare.com/sign-up
点击注册按钮后，跳转到这个界面，填入你自己的域名。
本例中我所使用的域名是：d3d3d3.com
2. 选择Free Plan
3. Cloudflare检测域名，点击Continue即可
4. 记下来红框中的两个地址，接下来要去你的域名注册商修改
修改DNS Nameserver
1. 这一步我们来到域名注册商，本文即Google Domain，点击域名
2. 点击Use custom name servers
3. 点击红框选项，将红框下方的四个地址去掉
4. 填入刚才从Cloudflare获取的两个nameserver地址，save
5. 回到Cloudflare, check nameservers
在Cloudflare配置域名指向Notion地址
1. SLL/TLS选择Flexible
2. 打开HTTPS，Autominify，如图设置即可，点击Done
3. 等待Cloudflare监测到nameserver的更改
由于Nameserver更改需要一定时间生效，虽然域名服务商说要up to 48 hours，但实测一般10-30分钟即可生效。
如果按照上述步骤走，在nameserver未生效时应该来到如下画面。
4. 等待10分钟不到，刷新下Cloudflare页面，会发现域名已经active了。
5. 点击域名，进入配置选项DNS
6. 如图设置A记录
这一步是设置A记录，IP地址随便填但要保证Proxy Status是通的，也可以直接用我图中的IP地址39.156.69.79，对建站过程无实质影响。
7. 进入配置选项Workers - Manage Workers
8. 如图设置 注意红线部分填入你自己的域名，例如本文所用的域名的d3d3d3。
9. 选择Continue with Free
如果没有验证Cloudflare邮箱的，这时候会让你验证邮箱。
10. 回到Manage Workers，点击Create a Worker
11. 清空左侧代码区的所有代码，接下来要填入下面步骤的代码，读者只需要修改很少的部分，复制使用即可。
在Workers填入如下代码
由于代码较长，读者可以用PC端访问 https://d3d3d3.com 或直接点击阅读原文，方便复制。
将第一行的d3d3d3.com替换为你自己的域名。
将第二行我的notion页面地址替换为你自己的notion页面地址。
其他都不用改，是不是很方便？！
constMY_DOMAIN ="d3d3d3.com"constSTART_PAGE ="https://www.notion.so/MyBlog-5acd562f87724d0caf0573ee01103343"addEventListener(fetch, event => {event.respondWith(fetchAndApply(event.request))})constcorsHeaders = {"Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET, HEAD, POST,PUT, OPTIONS","Access-Control-Allow-Headers":"Content-Type",}functionhandleOptions(request){if(request.headers.get("Origin") !==null&&request.headers.get("Access-Control-Request-Method") !==null&&request.headers.get("Access-Control-Request-Headers") !==null) {// Handle CORS pre-flight request.returnnewResponse(null, {headers: corsHeaders})}else{// Handle standard OPTIONS request.returnnewResponse(null, {headers: {"Allow":"GET, HEAD, POST, PUT, OPTIONS",}})}}asyncfunctionfetchAndApply(request){if(request.method ==="OPTIONS") {returnhandleOptions(request)}leturl =newURL(request.url)letresponseif(url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {response =awaitfetch(`https://www.notion.so${url.pathname}`)letbody =awaitresponse.text()try{response =newResponse(body.replace(/www.notion.so/g, MY_DOMAIN).replace(/notion.so/g, MY_DOMAIN), response)// response = new Response(response.body, response)response.headers.set(Content-Type,"application/x-javascript")console.log("get rewrite app.js")}catch(err) {console.log(err)}}elseif((url.pathname.startsWith("/api"))) {response =awaitfetch(`https://www.notion.so${url.pathname}`, {body: request.body,// must match Content-Type headerheaders: {content-type:application/json;charset=UTF-8,user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36},method:"POST",// *GET, POST, PUT, DELETE, etc.})response =newResponse(response.body, response)response.headers.set(Access-Control-Allow-Origin,"*")}elseif(url.pathname ===`/`) {letpageUrlList = START_PAGE.split("/")letredrictUrl =`https://${MY_DOMAIN}/${pageUrlList[pageUrlList.length-1]}`returnResponse.redirect(redrictUrl,301)}else{response =awaitfetch(`https://www.notion.so${url.pathname}`, {body: request.body,// must match Content-Type headerheaders: request.headers,method: request.method,// *GET, POST, PUT, DELETE, etc.})}returnresponse}
收尾工作
1. Save and Deploy
2. 保存后回到此画面，如果要修改代码点击Quick Edit即可
3. 点击左上角域名，回到workers选项，点击add route
4. 按照这样的格式填入你的域名，选择刚才建好的worker，save
大功告成！
现在，访问你自己的域名，即可直达你的notion页面啦！
例如本文例子所用的域名及代码，即用notion & cloudflare实现：https://d3d3d3.com
后记
事实上，如果你不需要个人域名，那么用notion建立页面，获取了notion页面的公开地址就足够了，后面在cloudflare和域名供应商的所有操作都可以省略。
Notion是一个极为强大的笔记应用，具体用法大家可以自行搜索，用来做个人笔记、生活规划、项目管理、个人网站均可。
感谢你阅读到此处！
(END)
近期更新
