💎 如何使用 kee｜bento | bio｜linktr 等便当产品铸造自己的个人入口页，并自定义域名

产品

产品	特点
kee.so	体验最好
bento.me	界面最好看，被linktree收购
bio.link	还可以
linktr.ee	最有名，也最丑

以上为在世界范围内比较知名的几个个人落地页产品，很方便的拖拽即可构建你的个人分发、导航、主页，创建后的链接，你可以添加到你的抖音介绍、小红书介绍、或者任何地方，创建过程非常简单，不再赘述。

如何自定义域名

很不幸，我所常用的bento和kee都无法自定义域名，另外两个我没有深究，但我们可以使用反向代理、iframe等方式绕道自定义。

CloudFlare Workers 反向代理法（适用 kee.so）

使用workers可以轻松反代大部分的网站，但是有些网站比较特殊，静态资源和页面资源以及API资源的请求路径不一，这导致在反代时需要做一些特殊处理才能成功。

拿我最近使用的kee.so举例：

将你的域名接入CF
创建Worker，编写反向代理代码，部署（代码在下面，以kee.so举例）
给Worker绑定自定义域名和路由
成功




export default {
  async fetch(request, env, ctx) {
    return handleRequest(request, env, ctx);
  },
};

async function handleRequest(request,env,ctx) {

  

  const fullUrl = request.url;
  const url = new URL(fullUrl);
  const hostname = url.hostname;
  const originalPath = url.pathname

  const domain = "你最终用来访问的域名，不加https://,例如  abc.com 即可";

  // 不用改
  const keesoRoot = "https://kee.so/"
  const keesoDomain = "https://kee.so"
  const keesoApi = "https://api.kee.so"
  
  // 要代理到的目标地址，用户名为: 假设你kee.so的主页是kee.so/hahahaha，那么用户名就是hahahaha
  var targetUrl = keesoRoot + "你的用户名";

  // kee.so的特殊处理
  if (originalPath != "/" && originalPath != ""){
    targetUrl = keesoDomain + url.pathname;
  }
  if (originalPath == "auth/detail" || originalPath == "/auth/detail"){
    targetUrl = keesoApi + url.pathname;
  }

  // kee.so的特殊处理
  if (originalPath.indexOf("_next/static/css/static/favicon.svg") != -1 || originalPath.indexOf("_next/static/css/favicon.ico") != -1 ){
      return new Response("🤣", {
        status: 200,
      });
  }

  // 反代
  const targetRequest = new Request(targetUrl, {
    method: request.method,
    // headers: request.headers,
    headers :{
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
      'Origin': keesoDomain
    },
    body: request.body,
  })

  const targetResponse = await fetch(targetRequest)
  const text = await targetResponse.text()

  // 替换
  var modifiedText = text.replace(/api.kee\.so/g, '你最终用来访问的域名，不加https:// 例如  abc.com 即可')
  //  modifiedText = modifiedText.replace(/Kee/g, ' ')
    
  const response = new Response(modifiedText, {
    status: targetResponse.status,
    statusText: targetResponse.statusText,
    headers: targetResponse.headers,
  })

  return response
}

Vercel iframe法（适用 bento.me ）

在github创建一个仓库，仓库内创建一个单页index.html
编写index.html内容为以下代码
在Vercel关联github后，部署刚才创建的仓库项目
在Vercel给这个项目绑定个域名，即可

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<meta name="referrer" content="never">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,viewport-fit=cover,shrink-to-fit=no">
		<meta name="format-detection" content="telephone=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="referrer" content="strict-origin">
		<title>
			Damon
		</title>
	</head>
	<body style="height: 100%;">
		<iframe id="frame" src="你要访问的域名地址" frameborder="0" marginwidth="0" marginheight="0"
		vspace="0" hspace="0" allowtransparency="true" scrolling="auto" allowfullscreen="true"
		style="width: 100%; height: 100%; frameborder:0; position: absolute; top: 0; left: 0;">
		</iframe>
	</body>

</html>