网站首页
0 写在前面：
五年网站运营，终于有了自己的网站
我过去10年的职业生涯里面，有近5年的时间是在做网站相关的运营。
期间，各种 idea 都得给产品和研发提需求，能不能做，得看产品和研发的排期。当时我就特别想做一个属于自己的网站，奈何自己不懂技术，哪怕有 WordPress 这种开源工具我也做不出来。
现在，AI 时代到来了。
借助 ChatGPT，我也能亲自搭建自己的个人网站。全程不需要写代码，而且已经部署上线，现在所有人都可以来访问它。
今天我就分享一下我的这个网站，重点介绍一下如何通过 ChatGPT、GitHub 和 Cloudflare 这三个工具实现最终的网站上线。
1 网站内容：
五个模块，还有一个小工具
我的这个个人网站比较简单，主要是静态的图文信息，外加少部分互动测试。网站总共 5 个模块，分别是首页、关于我、文章、视频、产品，有点企业官网的感觉。
网站架构
【首页】是一个纯汇总页面，通过导航栏、页脚、正文模块，分发跳转到不同的二级页面。
关于我
【关于我】里面有我的更详细的履历，包括我的简介、我过去10年的履历、我最近裸辞后在做什么。
文章
【文章】页面汇总了我历史写的公众号文章，点击后跳转到公众号文章页面。
视频
【视频】页面汇总了我近期的短视频，点击后跳转到抖音视频页面。
产品
离职诊断
【产品】页面汇总我 vibe coding 的小工具，目前只有一个离职诊断测试。花1分钟时间填写20个选择题，可以帮你诊断你当前的工作状态、后续规划，给到你要不要离职的参考。
这个网站其实比较简单，但毕竟是自己第一次做出来的完整作品，还是很惊喜的。为了统计每天的流量，我还给它添加了百度统计的监测代码。哈哈，没啥流量，估计都是我自己点的。
百度统计
这个网站花了我2天的时间，大部分时间是在写文案、准备图片，中间也是走了很多弯路；我下面分享一下具体过程，你们可以少踩点坑，现在去做估计更快。
2 如何搭建：
ChatGPT+GitHub+Cloudflare
整个过程基本免费，主要使用到了ChatGPT+GitHub+Cloudflare 这三个工具。唯一的成本就是域名，一些域名首年二三十块钱就可以买到。
首先，我们来理解一下，这三个工具分别是干什么的。
可以把搭建网站理解为装修一家店铺。ChatGPT 相当于设计师和装修工人，负责设计网站、生成代码。GitHub 相当于线上仓库，用来保存网站代码。Cloudflare 负责把网站发布到互联网上，让其他人可以通过网址访问。
网站上线主要工具
（1）让 ChatGPT 帮你设计网站
如果你完全不懂网站设计，怎么办？没关系，这里推荐两个模板平台：Framer marketplace 和 Figma community ，上面有大量设计精美的网站模板可以参考。
Framer marketplace
Figma community
找到喜欢的模板后，把模板链接或者截图发给 ChatGPT，再提供你的个人介绍、工作经历、项目展示等文案。告诉它：参考这个模板的视觉风格和页面布局，用我的文案生成网站代码。
让 ChatGPT 生成网页文件
在这个过程中要注意，给AI提供文案的过程有两种方案。
第一种方案：把你的简历、个人资料、作品全部甩给 GPT，让它帮你去生成这个网站对应的文案。优点是很快，缺点是生成的文案可能不符合你的预期，需要反复修改。
第二种方案：你围绕自己想做的网站模板，把里面的文案逐个替换成你自己的文案跟图片。然后把这些文案跟图片汇总成一个文档给到GPT。优点是很准确、符合你自己的需求，缺点是比较慢、需要花很多时间。
为了快速预览效果，我第一次上线采用了第一种方案，这样可以很快跑通流程、验证效果。但是这个文案里面有很多措辞不符合我的预期，所以现在线上的版本用的是第二种方案。开发的两天里面，有一天多的时间是在给网站写文章、准备高清图片，也就是之前网站运营的活。
最后，ChatGPT 会生成一个网站代码文件夹，里面包含网站运行需要的代码和资源文件
AI 生成的网站代码文件夹
你可以在本地电脑上点击这个 index.html 文件来预览网站效果，不满意就继续让 AI 修改，直到满意为止。这里需要注意一点：反复修改这个过程会需要消耗大量Token，所以建议前期尽量把需求确定下来，后续就算要修改也是按照网页模块来改，而不要整体大改。
（2）把代码上传到 GitHub
ChatGPT 写完代码后，进入 GitHub 托管的步骤。GitHub 可以理解为一个专门存放网站代码的“网上仓库”，把代码上传到这里，就可以长期保存和管理，方便后续更新网站。
你首先需要注册一个 GitHub 账号，创建一个代码仓库。建议选择私有仓库，避免源代码直接公开。
创建 GitHub 代码仓库
然后把 ChatGPT 生成的代码文件夹上传进去，这样网站代码就存在 GitHub 上了。
网站文件上传到 GitHub 代码仓库
如果后续你的网站内容发生了变化，也是同样的操作，把 ChatGPT 生成的那个网站文件重新上传到这里即可。
（3）通过 Cloudflare 发布网站
代码上传到GitHub后，下一步就需要使用Cloudflare。
Cloudflare 可以理解为一个帮你把网站发布到互联网上的平台。把 GitHub 里的网站代码连接到 Cloudflare，就能让别人通过网址访问你的网站，而且基础功能可以免费使用。
首先你需要注册一个 Cloudflare 账号。进入 Cloudflare 的 Workers & Pages，创建 Pages 项目，然后导入刚才的 GitHub 代码仓库。
Cloudflare 连接 GitHub
Cloudflare 会自动读取代码并部署网站，这个过程可能会消耗一定的时间（可能几个小时），需要耐心等待。部署成功后，它会提供一个临时网址（比如：guanshiqiang-cn-site.pages.dev），其他人就可以访问了。
（4）域名解析
不过 Cloudflare 提供的这个临时网址命名非常奇怪，用户也记不住，并不适合作为一个公开访问的网站域名。如果想拥有自己的独立域名，也可以先去域名平台（比如阿里云、腾讯云等）购买和认证域名。
购买域名
很多年之前我认证过一个 guanshiqiang.com 的域名，但是后来忘记续费了，所以这个域名就被人抢注了。但是呢，我并不想花钱赎回这个域名，所以这次呢，我重新认证了一个guanshiqiang.cn的域名。购买域名的过程也需要实名认证，审核一般大概在十几分钟到几个小时都有可能。
购买后，在 Cloudflare 的 Pages 项目中添加自定义域名，然后按照提示配置 DNS 解析记录，将域名指向你的网站。
自定义域名
域名DNS解析生效可能需要几个小时，等解析生效后，别人就可以通过你的专属网址访问了。
需要注意的是，上面 GitHub 和 Cloudflare 的操作界面也一直在更新（可能也有各种A/B测试），不同人看到的交互可能不一样，操作卡住了不要慌。
把你的问题和操作截图发给 ChatGPT，让他告诉你下一步怎么做；关键环节怕搞错的话，每做一步确认一下。我就是这么操作的，文科生，第一次在 GitHub 和 Cloudflare 上部署代码，最终也成功把网站上线了。
3 写在后面：
AI让想法变成现实
以前我觉得，开发网站是程序员才能做的事。但这次亲手尝试后发现，即使不懂代码，也能借助 AI 把自己的想法变成现实。
整个过程并非一帆风顺，也遇到了不少问题，但最终在 ChatGPT 的指导下还是做出来了。
AI 正在降低技术门槛。很多过去觉得自己做不到的事，现在都值得亲手试一试。
这只是一个开始，接下来我还想用 AI 开发更多有意思的小工具，欢迎关注。
————
接下来的两年，我会在这里如实记录转型路上的尝试、碰壁和转机。如果你也在经历类似的迷茫，欢迎留言告诉我你的困惑。
更多阅读：
（1）北漂十年后，为什么我选择定居长沙
（2）字节5年，为什么我还是选择了裸辞
（3）裸辞后我的第一件事不是挣钱，而是考雅思
欢迎关注，一起看一场普通人的转型实验，到底能不能成。
