【哥飞实操教学】如何半小时上线一个小游戏网站

大家好，我是哥飞。

今天，哥飞以上线一个记忆力小游戏为例，给大家演示一下，如何快速上线一个新网站。

首先需求关键词哥飞已经提前选出来了，是 Memory Test ，也就是记忆力训练小游戏。

查一下域名，发现 MemoryTest.io 这个域名还能注册，于是就决定用这个后缀了，因为很多游戏站，都用的.io域名。

很快，11:38分，哥飞把域名注册好了。

下一步，先把域名的 DNS 服务改成 Cloudflare 的。

输入域名，选择手动输入，点击继续按钮，打开了下面的页面，点击继续前往激活。

确认以后再添加记录。

复制Cloudflare提供的名称服务器地址，注意有两个地址。

回到域名注册商处，修改DNS服务器地址，把CF的两个地址填进去，然后保存。

这时候看到DNS已经修改好了，就不用管了，我们等待他生效就行。

还没生效时，会提示待处理或者未激活，都不用管，等待就行。

现在，我们去Github创建一个新的项目，名字就叫做 MemoryTest.io，哥飞会开源这个项目，所以选择了 Public ，并且先生成一个 README.md 文件，之后点击右下角的创建仓库按钮。

刚才哥飞不小心在仓库名字后面多了一个空额，导致最终生成的仓库名字后面有一个减号，赶紧去修改了仓库名称。

好了，现在仓库已经建好了，我们这次直接演示在线修改仓库里的代码，不在本地电脑做处理，方便不会开发的朋友们学习，减少步骤，增加成功率。

下一步，我们需要让Claude 帮我们去写代码了，提示词如下：

我注册了 MemoryTest.io 这个域名，准备做一个在线锻炼记忆力的小游戏。
我准备使用 iframe 形式把游戏嵌入到网站的首页，所以你需要帮我分别生成首页的 index.html 文件和游戏 game.html 文件。
现在请先帮我生成 game.html 的代码，请使用纯 html+css+js 实现这个记忆力锻炼在线小游戏。
因为是放到 iframe 内，所以游戏需要全屏显示。
打开时候看到的是游戏名称和游戏规则介绍和开始游戏按钮。
游戏规则：游戏有20关，每一关都是5秒钟，从1位数开始一直到20位数，每一关出现一个对应位数的数字，玩家需要在5秒倒计时内把数字记在大脑里。
倒计时结束之后，显示一个输入框，用户需要输入数字，点击提交按钮，游戏需要检测用户是否答对了。
游戏顶部有一行20个格子，每一个格子代表一关，玩家答对显示绿色，答错显示红色。
最后20关结束之后，需要显示玩家的总分，第一关5分，第二关10分，第二十关100分，依此类推，总分1050分。
得分840分以上的，优秀，分数越高越优秀。

把提示词发给 Claude 之后，稍微等待几秒钟，游戏就生成好了，哥飞玩了前三关，没有问题。

另外不知道大家有没有发现，我的提示词里忘记跟 Claude 说要生成英文的了，所以生成了中文游戏，但现在将错就错，先发布中文版本吧。

我们可以切换右上角的模式，从预览模式改成代码模式，确认代码没问题后，就可以点击右下角的复制按钮，复制代码。

我们回到 Github，直接在线创建一个新文件。

文件名填写 game.html ，把从 Claude 复制的代码粘贴到下方代码编辑框里，再点击右边的 Commit Changes 按钮，提交。

提交之后，就会看到，仓库里多了一个 game.html 文件。

这时候我们回到 Cloudflare 会发现，域名状态已经变成可用的了，说明DNS已经切换成功了。

这时候，我们就可以去 Vercel 创建一个新的项目了，

选择 MemoryTest.io 仓库，点击 Import 按钮。

在新的创建项目界面，什么都不用改，点击 Deploy 按钮就可以了。

等待一会儿，提示部署成功了，但是预览图显示404了，这没关系，这是我们预期值之内的，因为我们只放了 game.html ，没有放 index.html 代码。

下一步，拿到Vercel分配给我们的测试子域名 https://memory-test-io.vercel.app/ ，浏览器打开，显示404，这依然是我们预期内的。

当我们手动在域名后面增加 game.html 之后，就可以打开游戏了。

到这一步，你的游戏已经部署好了，我们再去配置自定义域名。在设置里找到 Domains 设置，然后输入我们刚才注册的域名 memorytest.io ，点击添加按钮。

在出现的选择界面里选择第二种，这是哥飞推荐的，然后点击Add按钮。

Vercel 给了我们2条DNS记录，我们需要去 Cloudflare 添加。

打开Cloudflare，添加DNS记录，需要分别添加两条，一条是CNAME记录，一条是A记录。

上面⬆️是添加CNAME记录，下面⬇️是添加好之后，继续添加A记录。

两条记录添加好之后，应该是下面这样的。

我们回到 Vercel 会发现 Vercel 已经检测到了我们添加的 DNS记录了，正在帮我们生成 SSL 证书。

趁着Vercel 在生成证书，我们回到Cloudflare，找到SSL，点击配置按钮。

点击自定义SSL。

选择完全（严格）模式，然后点击保存按钮。

再回到Vercel 我们会发现SSL证书已经生成好了，这时候，我们的自定义域名就可以使用了。

注意，如果你上面没有选择完全（严格）模式，那么打开自定义域名，会发现一直提示重定向过多。

但如果你配置好了，那么用自己的域名就可以正常访问。

好的，现在游戏已经有了，我们需要让Claude生成SEO友好的页面了，这次吸取教训，要让Claude生成英文页面，提示词如下：

好的，现在游戏我已经部署好了，访问地址是 https://memorytest.io/game.html 。
现在我希望你帮我生成 index.html 页面，我希望生成英文界面。
你需要在这个页面里通过 iframe 形式把游戏给嵌入进来。
你需要制作一个SEO友好的页面，围绕着关键词 Memory Test 去编写页面内容。
详细介绍游戏规则，游戏玩法，计分方式等。
这是一个游戏落地页，需要有落地页常见的各种Section，最终全部 Section组成了SEO友好的Headings。
现在请帮我生成页面，要求配色精美现代。

把提示词提交给Claude后，稍等一会儿，页面就做好了。

同样复制代码到Github，创建 index.html 文件。

由于我们之前已经关联好了Vercel，所以你提交代码后，会自动触发部署。稍等一会儿，部署完成后，我们就可以打开网站看到游戏了。
https://memorytest.io/

域名是11:38注册的，现在是12:40，我一边截图讲解，一边给大家写文章，一边做网站，在一个小时内搞定了，如果只是做网站，半小时内肯定能够搞定。

至此，基本的网页已经上线了，但是还没有做任何的SEO处理，如果你想知道怎么做好站内外的SEO，请加哥飞的社群学习。

关于社群，也许下面的一些文章你可能会感兴趣，可以先看完后决定是否加入社群。

之前给大家推荐的一些案例，可以在这里看：
【SEO案例分享】CNN如何做到在2024年美国选举相关搜索中霸占排名
【哥飞小课堂】用几个案例来讲解程序化SEO生成海量页面获取流量的方式
【哥飞实操分享】一个真实的SEO失败案例，帮助大家吸取教训
【养网站防老案例】月访问量277万的工具站，已运行11年
做网站没灵感？来看看别人的优秀案例之前端工具站
出海不知道做什么网站？来看看别人的成功案例

关于哥飞社群可以看这里：
哥飞社群支持一个月内不满意全额退款啦
是时候给大家好好介绍一下哥飞的社群了，毕竟刚被二十年站长大佬夸过
2024年7月快要过去了，哥飞的朋友们社群要涨价了
哥飞的朋友们社群一周年，感谢所有留言支持的朋友们！
哥飞的朋友们社群一周年记
哥飞社群辅导员 Banbri 的故事：巨大变化的一年
哥飞的朋友们线下聚会·0602北京场分享嘉宾 Clara 的出海赚美元经验

如果对社群感兴趣，请加哥飞微信 gefei55 咨询了解。