跳到主要内容

不懂编程，也可以自建一个网站

比如自建个性化的ChatGPT访问网站​

内容很长，不过看完第一和第二部分完成就能基本使用了，想更便捷，就需要完成第三部分

如果没有域名，就参考第四部分买个域名，再回到第二部分的步骤4操作即可。

第零部分：快速展示​

展示 https://0.i-robot.life https://1.i-robot.life 界面和基本的使用

然后三分钟快速搭建一个同样的站点

第一部分：准备工作​

  1. 用个人邮箱注册Github账号 https://github.com

第二部分：网站的部署和发布​

  1. 打开开源项目的部署链接

  2. 选择黑色的github、填写项目名称repository name（通常填写项目同名称便于查找，这里就填写 chatgpt-vercel）；再点击刚显示出来的黑色按钮：create，就开始创建你的项目了。

    （注意，这个项目要求提前输入api-key，为了避免站点被路人薅羊毛，这里可以随便输入001；后续可以再修改。输入完成后，点击下面的deploy。(后面推荐的有些项目是直接create就能完成创建

    (本文结尾还会安利其他有意思的开源项目，按照2-3步骤完成就行了。)

根据项目不同，通常在1-3分钟内完成。 出现完成界面时，就可以直接使用了

但是因为一些技术原因，国内还不可以便捷的访问 这时候只需要添加一个我们自己的域名，就可以正常使用了，不需要魔法。

  1. 添加域名具体操作：在完成界面的右侧看到三排按钮+黑体字，点击：add domain

    （如果你有域名的话，接下来继续操作就行了，没有的话看第四部分，买完域名回来再继续接下来的操作）

    然后添加域名，比如：chatgpt.zhangsan.com, 当然你也可以添加chatbot.zhangsan.com

    接下来在你的域名后台选择：添加解析-类型选cname-在zhangsan.com前面的输入栏处填写chat，在下方的记录值处填写cname.vercel-dns.com-点击保存

回到vercel界面，之前添加的域名这时候就可以用了，直接打开时http://chatgpt.zhangsan.com，过半分钟再打开就是https://chatgpt.zhangsan.com，推荐过半分钟再打开。

第三部分：添加API Key​

  1. 如果您需要在多个设备或者给他人共享使用，则可以在vercel网站后台添加API Key，具体操作方式如下：

  • 在项目中找到Setting-Environment Variables，添加API Key，包括key和value两个空格，具体如下：

  • 左边空格中输入key：OPENAI_API_KEY

  • 右边空格中输入value：将保存OpenAI API Key的字符串黏贴在此处，其中以sk-开头的一串字符是必须包括的，注意不要漏掉最后的一两个字母。

第四部分：购买域名​

  1. 购买并添加域名，推荐使用阿里云（wanwang.aliyun.com）、GoDaddy.com或Namecheap.com购买

阿里云是国内的，全中文界面，买着比较方便，有些域名比较便宜，但是需要实名认证，第一次的话有可能比较久，几个小时或者一天都有可能

godaddy.com和namecheap.com是国外的，不需要实名认证，买了后可以直接使用。g的部分域名比较贵，不过也有中文界面，操作过程友好一些；namecheap.com全英文界面，比g家的要便宜一些。

不管哪家买的都没关系，功能都是一样的，最多就是页面布局不太一样，熟悉后都不影响。

第五部分：网站的自定义​

  1. 如果您想修改网站的内容，例如更换图片或文字等，请按照以下步骤操作：

  • 回到Github，找到相应的文件并修改存放地址；

    推荐修改内容：根目录 prompts.md; 修改说明文字 src/env.ts；修改标题 src/components/header.tsx

  • 等待几分钟或到vercel网站中查看部署状态，确认修改后即可刷新网站查看新界面。

第六部分：推荐其他开源项目的​

  1. 推荐几个有意思的开源项目：(点击进去，找到deploy按钮，后面的操作和前面一样了

    chatgpt-next-web： https://github.com/Yidadaa/ChatGPT-Next-Web （可以设置访问码），

    chatbot-ui https://github.com/mckaywrigley/chatbot-ui ，

    docusaurus2（个人博客）

    benben-wenan https://github.com/shengxinjing/benben （更简单的输入-输出框），都是github上的开源项目

    贪吃蛇游戏：https://github.com/CodeExplainedRepo/Snake-JavaScript

额外的内容

  1. 关于API Key：为了直播进展的流畅，我们提前了准备1个OpenAI API Key作为备用，用作实操者的测试用途。

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

  1. 关于域名：很多人可能没有自己的域名。为了方便学习者操作，我们提供几个个临时的子域名。这些子域名会在第二天删除，使用了它们的同学记得及时删除并绑定自己的新域名哈 2.i-robot.life , 3.i-robot.life , 4.i-robot.life 5.i-robot.life 6.i-robot.life 7.i-robot.life 8.i-robot.life