type
status
date
slug
summary
tags
category
icon
password
网址
前言：
这一篇我们讲通过AI编写程式代码，并通过GitHub、CloudFlare平台进行基础简单的网页搭建，方便我们搭建一些自己想要的工具或者个人介绍页面，提升我们的工作效率或展示我们想要的内容。
本章教程中涉及的工具可能需要科学上网才能打开，如果没有科学上网，可以参考我的下方文章。
一、AI生成程式代码
首先我们在搭建页面之前，需要根据需求使用AI工具生成程式代码，因为我们使用GitHub托管我们的代码，而不是使用服务器。所以最简单的方式就是使用HTML、CSS、JS三种格式的代码进行创建页面。
在使用AI工具生成代码时，我们要在指令中添加：以HTML、CSS、JS格式生成****的网页
可能有时候AI生成出的代码只有HTML格式，这个不是输出错误，只要预览效果没问题，也是完全可以进行部署的，不会影响到我们网页的整体效果（因为不同的AI构建的逻辑和架构不同，比如ChatGPT就习惯于输出纯HTML的代码覆盖所有功能，而无需CSS、JS代码）
代码预览工具（本人使用AI创建的，仅供对代码预览效果使用）
使用方法：将AI生成的代码按照格式复制粘贴进相应的文本框中，然后点击右上角放大进行预览查看
优化预览网页没有问题后，我们就可以进行下一步
二、代码托管
因为服务器部署代码相对来说门槛较高，而且有一定的费用，我们主打一个免费搭建，所以就选择使用GitHub代码仓库进行代码托管
账号注册
*打开网址后，我们首先要注册账号
*如果有Google账号的话建议使用Google直接注册，没有的话就使用其他邮箱进行填写注册
*如果注册Google账号时遇到问题，可以看我下方连接文章的教程进行注册
代码仓库部署
*注册完成后我们来到首页,点击加号➡New Repository 创建一个代码仓库
*填入项目名称，项目描述可随意填写，其他选项保持默认，然后点击右下角按钮创建代码仓库
*创建成功来到此页面，我们点击 creating a new file 按钮来创建文件
*首先输入文件名称，这里我们是固定的名称：
index.html ,将HTML格式代码粘贴到代码框中，然后点击右上角保存
*弹出的页面直接点击右下角： Commit changes 按键即可
*然后我们继续点击右上角创建文件 Add file ➡+Create new file
*文件名称为：
script.js 同样的流程粘贴JS格式代码
*同样的操作创建CSS格式代码，文件名称为：
style.css，创建后保存这样，我们的代码仓库就创建好了，如果只有HTML格式代码，就无需创建另外两个格式的文件
三、网页部署
接下来我们要让部署在GitHub仓库的代码能够运行展示，使用CloudFlare进行实现，打开下方网址
*首先注册一个账户，如果有的话直接登录就可以，这里要和GitHub的邮箱保持一致，以方便直接进行连接，有Google账号的话就直接点击使用Google登录即可
*创建完账号后我们在首页点击Compute &AI➡Workers & Pages
*点击右上角的Add ➡Pages
*然后我们选择连接GitHub
*按照流程授权后就会显示我们在GitHub创建的代码仓库，我们选择代码仓库，然后点击Next
*选择GitHub,然后选择项目，点击右下角Begin Setup
*保持默认，点击右下角 保存和部署
*然后我们再次点击左侧，点击我们项目右上角的三个点，点击Visit
*这样就可以通过网址查看我们部署的网页了
四、域名绑定
域名这里给大家推荐的是我个人觉得最便宜划算的Dynadot,支持支付宝直接付款，通过下方链接注册购买可获得特定折扣。
*按照流程进行注册
*注册完后搜索购买自己的域名
*点击右上角账户名称，点击管理域名
*点击DNS下方对应的入口
*回到CloudFlare中点击加入域
*输入你的域名
*选择免费计划
*继续前往激活
*分别复制两个小黄云的文本
*在Dynadot的DNS设置中选择服务器，输入新的或现有的域名服务器，将两个小黄云的内容安上下顺序粘贴进文本框，点击保存域名服务器
*然后回到CloudFlare中点击继续
*过一会看到域名状态为活动就表示托管到了CloudFlare成功
*回到刚刚我们创建的网站打开
*点击自定义域，点击设置自定义域名
*输入以你域名为后缀的网址，点击继续
*点击激活域
*状态显示为活动就可以通过你设置的网址访问你创建的网站页面了
🤗 总结归纳
借助GitHub和CloudFlare，我们就可以搭建一些自己定制化的工具或者静态页面，大家搭建出了好的工具欢迎一起分享交流。
有关网页搭建和部署的知识和技巧，欢迎添加船长联系方式，一起学习交流~