当前位置:首页>java>AI应用|告别复杂代码:AI 时代,老师如何 10 分钟徒手搭建个人教学网站?

AI应用|告别复杂代码:AI 时代,老师如何 10 分钟徒手搭建个人教学网站?

  • 2026-10-21 13:27:27
AI应用|告别复杂代码:AI 时代,老师如何 10 分钟徒手搭建个人教学网站?
在 AI 技术爆发的今天,教育正在发生一场静悄悄的变革。以前,想要搭建一个属于自己的教学网站,老师们需要学习复杂的 HTML 代码、购买服务器、配置域名,往往折腾几天也搞不定。但现在,只要你愿意尝试,借助 AI 工具 Trae 和国内好用的托管平台 Gitee,哪怕零基础,你也能在 10 分钟内变身“极客老师”,搭建出一个既美观又实用的数学课件导航站。
第一步:准备工作(搭建工地)
安装工具:下载并安装 Trae(或者 Cursor)。
创建文件夹:在电脑桌面创建一个文件夹,起名叫 my-math-site。
放入你的动画:把你之前做好的 HTML 动画文件丢进去。
比如你有一个 dice.html(骰子)和一个 circle.html(圆面积)。
在 Trae 中打开:打开 Trae,点击 Open Folder,选中刚才创建的 my-math-site 文件夹。
第二步:唤醒 AI(下达指令)
在 Trae 的界面右侧(或者按 Ctrl+I / Cmd+I 唤醒对话框),切换到 Builder 模式(这是专门用来写项目的模式),然后直接复制下面这段话发送给它,现在Trae有Solo模式也很好用:
你的指令:
“我是一个老师,我想搭建一个个人教学网站首页。
文件夹里已经有一些 HTML 动画文件了。
请帮我创建一个 index.html 作为首页。
首页要漂亮、简洁,符合数学学科感觉(用蓝色调)。
首页要用‘卡片’的形式展示我的工具,每个卡片有标题、描述,点击能跳转到对应的 HTML 文件。
顶部要有一个搜索框,可以搜索工具标题。
请使用 Tailwind CSS 来美化界面,确保手机上也能看。”
第三步:AI 自动施工(看它表演)
生成代码:Trae 会自动思考,然后开始写代码。你会看到它创建了 index.html 和一个 config.js(用来存工具列表的文件)。
点击接受:当它写完后,代码上方会出现 Accept(接受)按钮,点击它,文件就会保存到你的文件夹里。

第四步:预览效果

在 Trae 插件市场搜索安装一个叫 "Live Server" 的插件(或者直接双击文件夹里的 index.html 用浏览器打开)。
你会看到一个漂亮的网页已经出来了!试着在搜索框搜一下“骰子”,看看卡片会不会自动过滤。
第五步:发布到网上
网页现在只在你的电脑上,我们要把它传到网上。
登录 Netlify 账号:打开浏览器,访问 Netlify 官网。使用你注册的账号登录。
进入“站点”页面:登录后,你通常会直接进入你的仪表盘(Dashboard)。在左侧导航栏或者顶部菜单中,找到并点击 "Sites"(站点)这个选项。如果你是第一次使用,这个页面可能会是空的,或者像你图片左侧那样,提示你“部署你的第一个项目”。
找到“拖拽上传”区域:在 "Sites" 页面,你会看到一个明显的区域,通常会写着类似 "Drag and drop your site folder here"(把你的站点文件夹拖到这里)。
拖拽你的项目文件夹:打开你的电脑文件管理器(Windows 上的“文件资源管理器”或 macOS 上的 Finder)。找到你之前创建的整个项目文件夹,比如叫 my-math-site。
重要:确保你拖拽的是整个文件夹,而不是只拖拽里面的 index.html 文件。Netlify 需要整个文件夹来正确部署你的网站,包括所有的 HTML 动画文件和可能的图片等资源。
用鼠标左键按住这个 my-math-site 文件夹,然后把它拖拽到 Netlify 网页上刚才找到的那个 “拖拽上传”区域。
等待部署完成:
松开鼠标后,Netlify 会自动开始上传你的文件并部署你的网站。
这个过程通常很快,几秒到几十秒不等。
你会看到一个进度条或者状态信息,显示你的网站正在部署中。
获取你的网站链接:
部署成功后,Netlify 会自动为你生成一个唯一的网址(URL)。
这个网址通常会显示在你的站点详情页顶部,比如 https://your-site-name-xxxx.netlify.app。
点击这个链接,你就可以在浏览器中看到你刚刚搭建的数学教学网站了,上面是我成功制作出来的,但国内网络不友好!(若不满意上面同样的步骤,自己在域名上挂下,基本和上面一样,下面是我挂的http://m2172010.abc.818222.xyz/my-math-site/my-math-site)
第六步:进阶:以后想增加新课件怎么办?
这就是 Trae 最强大的地方。当你又做了一个新的 triangle.html(三角形内角和):
把 triangle.html 丢进文件夹。
打开 Trae,对它说:“我加了一个新课件 triangle.html,标题叫‘三角形内角和’,描述是‘拖动顶点观察角度变化’,帮我更新一下首页。”
Trae 改完后,你再次把文件夹拖进 Netlify 覆盖一下即可。
从前,我们是知识的传递者;现在,我们是数字教育的创造者。AI 时代,技术不再是门槛,想象力才是。只要你愿意迈出学习的第一步,就能获得一个满意的结果。希望每位老师都能在探索未知领域的道路上,收获属于自己的惊喜!

附件:

AI提问工具(复制到浏览器点击注册就能使用)

https://www.zaiwenai.com?channel-code=6959051d664bdc42cce19047

最新文章

随机文章