IMAGETINYS
EXPERIMENTSWORKSNOTESCONNECT

代码零基础使用AI Agent从零构建个人网站经验分享

发布于 2025年6月5日
文章

在这篇文章中，作者分享了他如何在没有编程基础的情况下，利用AI助手从零开始构建个人作品集网站的经验。文章详细描述了使用Notion、Github和Vercel等工具的过程，以及在搭建网站过程中遇到的挑战和解决方案。这篇经验分享旨在鼓励那些对技术感到畏惧但又希望搭建个人网站的读者，提供实用的建议和启示。

AI Agent个人网站零基础NotionNext.js网站搭建经验分享
25年5月，代码零基础的我用AI Agent辅助我从零构建个人作品集网站
从5月07号到6月02号断断续续做了一个月，现网站已经可以公开访问：imagetinys.xyz
做完东西就总想显摆一下，这次做完网站后，也想分享下这段有趣的经历，希望能给同样想搭建个人网站但又担心技术门槛的朋友一些启发
第一次写这种经验分享，我想当笔记一样想到哪就写到哪吧，会用AI辅助，但会保留我个人本身的那种拙劣的写作，希望氛围轻松些，但也会尽量把经验和心得都分享出来

意外的开始

我一直以来就想要有一个属于自己的网站。最近在做一个品牌设计项目时提到了网页设计这块，这让我想起了这个愿望。虽然对网页设计并没有特别的热情，但是为了实现拥有个人网站的想法，我还是开始查找相关的资料
基于我先前了解的很多零代码搭建网站的工具，如Cargo，Framer等等，他们对不会代码的设计师比较友好，但是都有个共同的点就是每个月都需要花钱
比较值得一提的是NotionNext这个开源项目，最重要的是它 免费
NotionNext中文 | Notion笔记，轻松建站，NotionNext官网
Notion笔记，轻松建站，NotionNext官网
NotionNext中文 | Notion笔记，轻松建站，NotionNext官网
https://www.tangly1024.com/
NotionNext中文 | Notion笔记，轻松建站，NotionNext官网
在23年的时候的时候意外搜到这个项目，但是这个项目比较适合博客类型的网站，作为作品集网站不太合适

我觉得他这里面的思路不错

  • 用Notion做动态内容管理
      • 我Notion是付费版+AI，可以在数据库中使用AI，如这个页面的标签关键词和摘要我可以用AI帮我根据这个页面的内容动态生成
      notion image
      将来我上传作品只需到Notion上传和编辑即可，而且用Notion符合我的写作习惯，方便修改且有AI辅助
  • 用Github做代码托管
      • 我可以在本地写好代码测试OK了再提交到Github
  • 用Vercel做网站部署
      • Vercel会从Github中拉取最新版本的代码并从Notion中读取网页数据，部署最新网站
基本上四舍五入约等于不用钱，免费，唯一付费的就是需要买个域名
以及我后续的运营维护成本比较低，我所有内容都在Notion上传处理即可
 
 
最近了解时发现他多了一个适合做作品集的主题，他相当于提供了个模板，但是我想有更多自己定制化的东西
NotionNext自建主题 | NotionNext帮助手册
简单几步骤即可创建属于自己的主题
NotionNext自建主题 | NotionNext帮助手册
https://docs.tangly1024.com/article/your-own-theme
NotionNext自建主题 | NotionNext帮助手册
我看了他的一些自建主题或者修改主题的教程，对零代码基础的小白来说还是相对困难，但是现在有AI啊
可以用AI去写代码啊，而且正好他这教程里也有提到借助AI开发NotionNext | NotionNext帮助手册借助AI开发NotionNext | NotionNext帮助手册借助AI开发NotionNext | NotionNext帮助手册
借助AI开发NotionNext | NotionNext帮助手册

借助AI开发NotionNext | NotionNext帮助手册

Notion开源、免费、快速建站

借助AI开发NotionNext | NotionNext帮助手册借助AI开发NotionNext | NotionNext帮助手册
除此之外我还想起ATOM63老师之前在fafa的Discord社群提到他的网站也是结合Notion做的部署，有点好奇是不是也同样用到NotionNext，于是直接在Discord上请教了下
notion image
notion image
行，那就开搞，从零让AI搓一个

准备工作

开始搞之前我们需要了解一些基本的东西，但不需要很深入，剩下的交给AI处理

什么是React？

想象一下，你在设计一个网页界面，需要把它分成很多个组件（Component）——就像你在 Figma 或 Sketch 里创建可复用的组件一样！React 就是帮助开发者把这些设计组件变成真实网页的工具。
  1. 组件 = 设计系统里的组件
      2. 在设计软件里，你会创建：
      • 按钮组件
      • 卡片组件
      • 导航栏组件
      在 React 里，开发者也是这样做的：
      // 这就是一个按钮组件
function Button() {
  return <button>点击我</button>
}
  1. Props = 组件的变体
      2. 设计师创建组件时会设置变体（Variants）：
      • 按钮的颜色：主要色、次要色
      • 按钮的大小：大、中、小
      • 按钮的状态：正常、禁用
      React 用 Props 实现同样的效果：
      <Button color="primary" size="large" disabled={false} />
  1. State = 交互状态
      2. 当用户点击按钮时，你可能设计了：
      • 默认状态
      • 悬停状态
      • 点击状态
      • 加载状态
      React 用 State 来管理这些变化：
      // 比如：用户点击后，按钮文字从"关注"变成"已关注"

React 的核心概念

组件化思维
  • 设计师：把界面拆分成可复用的设计组件
  • React：把界面拆分成可复用的代码组件
单向数据流
  • 设计师：父组件的改变会影响子组件（比如改变主题色）
  • React：数据从父组件流向子组件，保持一致性
虚拟DOM
  • 设计师：在 Figma 里修改，然后同步到开发
  • React：先在虚拟环境里修改，然后高效更新真实页面

实际例子：一个简单的卡片组件

设计师的思维：
卡片组件包含：
- 图片
- 标题
- 描述
- 按钮
React 的实现：
function Card({ image, title, description, buttonText }) {
  return (
    <div className="card">
      <img src={image} />
      <h3>{title}</h3>
      <p>{description}</p>
      <button>{buttonText}</button>
    </div>
  )
}

React开发 vs 传统HTML开发

传统开发就像直接在纸上画画，你看到什么就是什么；React开发像用模块化积木搭建，每个部分都是独立的组件
  1. 思维方式的不同
      2. 传统HTML：
      • 📄 页面思维：一个HTML文件就是一个完整页面
      • 🎨 直接操作：直接修改HTML元素
      • 📝 顺序执行：从上到下执行代码
       
      React：
      • 🧩 组件思维：页面由多个组件拼装而成
      • 🔄 状态驱动：通过改变数据来更新界面
      • ⚡ 响应式更新：数据变化自动更新视图
  1. 主要优势对比
      2. 传统HTML的优势
      • ✅ 简单直接：新手容易理解
      • ✅ 快速原型：小项目开发快
      • ✅ 无需构建：直接在浏览器运行
      • ✅ SEO友好：搜索引擎容易抓取
       
      React的优势
      • ✅ 组件复用：一次编写，多处使用
      • ✅ 状态管理：复杂交互更容易处理
      • ✅ 团队协作：模块化开发，分工明确
      • ✅ 性能优化：虚拟DOM提升性能
      • ✅ 生态丰富：大量现成组件库
  1. 什么时候选择哪种方式？
      2. 适合传统HTML的场景
      • 🏠 简单的展示型网站
      • 📄 静态页面（公司介绍、产品展示）
      • 🚀 需要快速上线的小项目
      • 🔍 SEO要求很高的网站
       
      适合React的场景
      • 💼 复杂的企业应用
      • 📱 单页应用（SPA）
      • 🔄 需要频繁更新数据的应用
      • 👥 多人协作的大型项目
      • 🎮 交互丰富的Web应用

Next.js 是什么？

想象一下，如果 React 是一套乐高积木，那么 Next.js 就是带说明书的豪华版乐高套装——它不仅给你积木，还告诉你怎么搭建，并且自带很多高级功能！

用更简单的话说：

  • React：给你工具，你自己决定怎么建网站
  • Next.js：给你工具 + 最佳实践 + 额外功能，让建网站更简单

Next.js 的主要特性 ✨

  1. 服务端渲染（SSR）- 像餐厅上菜
      2. 传统React：客户自己做饭（浏览器渲染）
      • 顾客到店 → 给食材 → 顾客自己做 → 吃饭
      Next.js SSR：厨房做好端上来（服务器渲染）
      • 顾客到店 → 厨房做好 → 直接上菜 → 吃饭
      好处：
      • ⚡ 页面加载更快
      • 🔍 SEO效果更好
      • 📱 首屏体验更佳
  1. 静态生成（SSG）- 像预制菜
      2. 在构建时就生成好HTML页面，访问时直接提供
      适合场景：
      • 📝 博客文章
      • 🏪 产品页面
      • 📄 文档网站
  1. 文件系统路由 - 像整理文件夹
      2. 传统React路由：
      // 需要手动配置
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
      Next.js路由：
      pages/
├── index.js        → 网址：/
├── about.js        → 网址：/about
├── contact.js      → 网址：/contact
└── blog/
    └── [id].js     → 网址：/blog/123
      文件结构 = 网站结构，超级直观！
  1. API路由 - 自带后端功能
  1. 图片优化 - 自动PS
      2. Next.js会自动：压缩、懒加载、响应式处理
  1. CSS支持 - 样式管理更简单
      2. 支持多种CSS方案：
      • CSS Modules（组件级样式）
      • Sass/Less
      • CSS-in-JS
      • Tailwind CSS

Next.js vs 传统网页开发 🔄

  • 传统网页开发流程
      1. 写HTML文件
      1. 添加CSS样式
      1. 写JavaScript交互
      1. 上传到服务器
      1. 用户访问
  • Next.js 开发流程
      1. 创建页面组件
      1. Next.js自动处理路由
      1. 构建优化
      1. 部署（Vercel一键部署）
      1. 用户获得极速体验

实际对比：做一个博客网站

  • 传统方式
      • <!-- blog.html -->
<html>
<head>
  <title>我的博客</title>
</head>
<body>
  <h1>文章标题</h1>
  <p>文章内容...</p>
  <!-- 手动更新每篇文章 -->
</body>
</html>
      问题：
    • ❌ 每篇文章都要手动创建HTML
    • ❌ SEO需要额外优化
    • ❌ 没有自动优化
      •  
  • Next.js方式
      • // pages/blog/[slug].js
export default function BlogPost({ post }) {
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </article>
  );
}

// 构建时自动生成所有文章页面
export async function getStaticPaths() {
  const posts = await getAllPosts();
  return {
    paths: posts.map(post => ({
      params: { slug: post.slug }
    }))
  };
}
      优势：
    • ✅ 自动生成所有页面
    • ✅ SEO自动优化
    • ✅ 性能自动优化

核心差异总结

  1. 渲染方式
      2. 类型
      传统网页
      React
      Next.js
      渲染位置
      服务器直出
      客户端
      灵活选择
      SEO
      天然友好
      需要额外处理
      自动优化
      首屏速度
      快
      慢
      快
  1. 开发体验
      2. 传统网页：
      • 简单直接
      • 手动管理一切
      • 适合小项目
       
      Next.js：
      • 自动化程度高
      • 最佳实践内置
      • 适合各种规模项目
       
  1. 性能优化
      2. 传统网页：全靠开发者手动优化 Next.js：自动优化
      • 代码分割
      • 图片优化
      • 预加载
      • 缓存策略

什么时候选择Next.js？

适合Next.js的项目
  • 🏢 企业官网（需要SEO）
  • 🛍️ 电商网站（性能要求高）
  • 📝 博客/内容网站（大量静态内容）
  • 💼 SaaS应用（复杂交互）
  • 🌐 国际化网站（多语言支持）
不太适合的场景
  • 📱 纯移动应用
  • 🎮 游戏类应用
  • 📊 纯管理后台（不需要SEO）
 

一句话总结

  • 传统网页：像手工作坊，简单但费力
  • React：像现代工厂，高效但需要自己搭建
  • Next.js：像智能工厂，开箱即用，自带优化
Next.js = React + 服务端渲染 + 路由系统 + 性能优化 + 开发体验提升
 

选择AI工具

经过一段时间的尝试和筛选，尝试了V0，Cursor，我最终选择用免费使用一个月的GitHub Copilot
我体验下来我觉得Cursor的使用体验比较不错，5月27号字节的Trae也开始付费了，但是之前的排队让我有些劝退，付费后不知道会不会好用些，价格相对Cursor比较便宜
Cursor和Trae有个同样的点，就是不需要你过多的点击确认继续等操作
相比工具，选AI的大模型也很重要，这里最推荐的是Claude的模型，因为它的主动性比较强，其他模型都是要你频繁确认，我大部分情况是只管设计和逻辑部分，代码能跑就行，所以主动性强的模型比较适合
我刚开始用的时候最高还只能用Sonnet 3.7，在5月23号Claude发布了Claude Opus 4 和 Claude Sonnet 4模型，而我在GitHub Copilot里也能用Sonnet 4模型模型了，效率快了不少，我大部分进度是在Sonnet 4发布后赶的，但是主动性强过头了，很多时候会多改几个文件多做几件事，甚至有时候还得出手摁住它的头，立马制止他，否则你就会多出一堆测试脚本测试页面
需要写些吹牛逼的话也可以让AI帮你写，因为他会一本正经吹牛逼，甚至写代码时写着写着就会夸自己两句

AI Rules

你可以先让AI读取rules文件再执行任务。只需在项目中新建一个.rules文件 - VS Code和Cursor可以直接把文件内容发给AI，而Trae则可以通过智能体设置来实现
让AI先读取rules有以下几个好处：
  • 能让AI更好地理解项目的技术栈和要求，避免使用过时或不合适的技术
  • 可以让AI保持一致的编码风格和最佳实践，提高代码质量
  • AI会主动完成任务而不是被动等待，提高开发效率
  • 能让AI在遇到问题时按照预设的流程进行分析和解决，减少来回沟通成本
我这个rules主要定义了三个部分：角色设定（让AI扮演资深工程师）、工作流程（项目初始化、需求分析与开发、项目总结）以及技术参考。这样AI在开发过程中就会更有条理地完成任务。
notion image
我这里分享了我的rules，可以直接复制使用，我的rules是基于YouTube/B站博主 AI进化论-花生 的.cursorrules用AI改编的，你可以在此基础上根据需求再次改编
**角色**

你是一名精通Next.js 15的高级全栈工程师，拥有20年的Web开发经验。你的任务是协助用户（代码零基础）完成Next.js 15项目的开发，确保代码质量达到专业水平，同时提供高效、准确的建议和实现。
注意：我使用PowerShell，请用分号 (;) 代替&&来分隔命令
PowerShell环境要求：
- 使用分号 (;) 分隔命令，不使用 &&
- 路径用双引号包围
- 格式：cd "路径" ; npm run dev

**目标**

以专业、高效的方式帮助用户设计和开发Next.js 15项目，主动完成任务，而不是等待用户反复推动。确保所有代码和建议符合Next.js 15的最佳实践，并提升项目的性能、可维护性和用户体验。

---

**工作流程**

**第一步：项目初始化**

- **分析现有项目**：当用户提出需求时，首先扫描项目根目录下的README.md文件和所有代码文档，理解项目目标、架构和已有实现。
- **创建或完善README**：如果项目没有README.md，立即创建一个；如果已有，则根据需求更新。README.md应包含：
    - 项目功能的用途和使用方法。
    - 所有关键API的参数说明和返回值描述。
    - 项目规划和开发建议。
- **清晰文档化**：确保用户能够轻松理解项目结构和功能实现。

**第二步：需求分析与开发**

**理解需求**

- **深入分析**：站在用户角度，全面理解需求。
- **完善需求**：如发现需求有遗漏或不清晰，主动与用户讨论，提出改进建议。
- **简化方案**：选择最简单、可行的解决方案满足需求。

**编写代码**

- **技术栈要求**：
    - 使用Next.js 15的**App Router**（而非Pages Router），结合React 19的新特性。
    - 优先使用**Server Components**，仅在必要时引入Client Components。
    - 利用Next.js 15的数据获取功能，如**Server Actions**（注意其安全性增强）和Mutations。
    - 配置GET Route Handlers时，注意默认不缓存，需手动设置缓存策略。
- **性能优化**：
    - 实现**服务器端渲染（SSR）或静态站点生成（SSG）**，根据需求选择最优方案。
    - 使用Next.js 15的文件系统路由约定创建页面和布局。
- **代码质量**：
    - 使用**TypeScript**，支持next.config.ts配置，确保类型安全。
    - 提供详细的代码注释，包含错误处理和日志记录逻辑。
- **用户体验**：实现响应式设计，确保项目在不同设备上的兼容性。

**解决问题**

- **错误分析**：
    - 阅读相关代码文件，理解代码逻辑和功能。
    - 分析问题根源，提出清晰的解决思路。
- **互动调整**：根据用户反馈多次优化解决方案。
- **复杂问题处理**：若问题经过两次调整仍未解决，进入深度分析模式：
    1. 列出所有可能导致问题的假设。
    2. 为每个假设设计验证方法。
    3. 提供三种解决方案，详细说明每种方案的优缺点。
    4. 让用户根据实际情况选择最佳方案。

**第三步：项目总结与优化**

- **反思与改进**：完成任务后，回顾开发过程，识别潜在问题和优化空间。
- **更新文档**：在README.md中添加新功能说明和优化建议。
- **高级特性**：建议使用Next.js 15的**Turbopack**或**<Form>组件**进一步提升性能。

---

**技术参考**

- 始终参考[Next.js官方文档](https://nextjs.org/docs)，确保使用Next.js 15的最新特性和最佳实践。
- 关注Next.js 15的关键更新，如Server Actions的安全性增强、灵活的静态生成选项等。

制作第一个页面

我的第一步是希望创建一个Base，然后慢慢改改出我想要的样子
让他帮我基于Next.js创建一个基础网页需要获取我Notion数据库属性对应的内容，我把数据库设计好，页面id和api key配置好，剩下的交给AI
 
事后诸葛亮一下就是先做个首页试试：
  • 需要有导航栏，右侧是站点名称，左侧是菜单，菜单可以接notion内容
  • 有个首页Banner大图，打开网页第一屏就能看见，是动态的最好
  • 有个英雄区，些一段很装逼的话
  • 往下就是一些作品
  • 有简单页脚
 
但其实这都是后面才做成的，前面我就让他随便帮我做首页试试水，仅仅只是想试一试AI编程的水，然后上头了一步步改成现在这样
看到可行性后，我根据视觉效果逐步调整设计和动画效果，全程都是用自然语言与AI交流，比如：
notion image
notion image
 
创建完第一个页面后，想到后面还需要修改很多内容，我不禁开始怀疑：从零开始搭建是不是太慢了？需要花的时间和精力有些多啊？要不要直接改用NotionNext主题？
我开始头铁尝试修改主题，想测试下是否会比较快，以及验证下ATOM63老师说的 东西太多不好套 是什么意思
我改了些东西，发现想要深入去改的时候，需要检测阅读的代码太多，AI直接开摆不干了，或者改个东西需要等很久，跑不动了
经过对比这两种方式后，从零开始搭建确实更加高效，从零开始想要什么内容加上去，比大量删除修改要好些

从简单需求起步，逐步添加功能

最终还是决定死磕从零开始创建，经过一段时间的折腾，大大增加了我对建完完整网站的信心
而且这种体验就像是我变成了甲方，给乙方提修改需求。作为一个长期做乙方的人，这种角色转换带来的来回修改的快感让我感觉特别新奇有趣
让我也尝试到了"做着做着回到第一版"的感觉，AI写一堆代码和文件，我看效果不行就一键撤回hhh
有时需要用到模糊的需求，有时则需要精确的需求，取决于你想留给AI多少自由度
有时候我甚至没有给出明确的修改方向，只是说"不行"，但这种情况往往会让自己陷入困境——当自己都没有明确想法时，就很难期待别人能做出符合要求的东西。这时候通常是干了一整天累了
效率高的通常是自己思考后能给出一些有效建议的时候，但是作为一个啥也不懂的小白，通常是给不出什么有效建议的，这时候可以尝试把模式从Agent改为Ask，就单纯的跟AI讨论解决方案
我在做优化性能的时候就遇到过这个问题，如果开Agent模式，AI就会开始库库干，代码文件全部改个遍，最后还搞的网站还无法启动了；尝试几遍无果后，我换成了Ask模式，单纯跟他聊聊怎么办，他会跟你说一堆：又是字体啦，又是视频啦，又是组件加载啦等等
notion image
但很快(其实一点也不快)就了解到主要问题是API串行请求，其他的优化先放一放，避免大量重构文件和代码导致网站无法启动
这时候只要针对优化让API并行请求，且优化掉前期请求过多无效属性
notion image
通过这个过程，我不仅学到了很多新知识，而且通过亲身实践让这些知识变得更加深入人心
notion image
notion image
至此，剩下的就是不断发现问题和解决问题，不断跟AI交流折腾，修改优化修改优化Debug
 
整个完整搭建完后我觉得后面可以用AI编程做些有用的应用
虽然我还有很多想优化或增加的功能，但是要点到为止了，我免费使用的GitHub Copilot在6月6号就到期了，免得到时候一堆bug我还修不了，现在代码能跑就行

如何读取Notion内页的块

我这里用到了React Notion X ，使用后就可以读取Notion页面内容到网页上渲染
可以直接让AI帮你实现即可告诉它用

关于UI设计

如果你懒得自己设计UI的话，你也可以用一些现成的UI
  1. TailwindCSS
      2. TailwindCSS 是一个实用优先的 CSS 框架，旨在快速构建现代美观的网站。这里的实用类名定义了要执行的操作。每个实用类都带有预定义的 CSS 属性。
  1. Shadcn UI
      2. shadcn/ui 是一套设计精美、易于访问的组件和代码分发平台。它可与您常用的框架和 AI 模型兼容。开源，代码开放。
  1. MUI
      2. MUI 是一个 UI 工具和组件库的集合，可帮助您快速将出色的设计变为现实。其中最受欢迎的是 MUI Core 。
  1. Chakra UI
      2. Chakra UI 是另一个流行的 React UI 组件库，经常被 React 开发人员用来设计应用程序。与前两个库类似，它也是一个开源项目。
  1. Hero UI
      2. HeroUI 是一个 React 的 UI 库，可以帮助你构建美观且易于访问的用户界面。它基于 Tailwind CSS和React Aria。HeroUI 的主要目标是简化开发流程，提供美观且适应性强的系统设计，以增强用户体验。
  1. Ant Design
      2. Ant Design 是一个用于构建企业级 Web 应用界面的 UI 库，拥有自己的设计语言，并在蚂蚁金服的产品中被广泛使用。
  1. React Suite
      2. React Suite 是一个流行的 React UI 组件库，专注于为中端平台和后端产品构建。它内置了对浅色、深色和高对比度主题的支持，只需简单的配置即可切换。
  1. React Bootstrap
      2. React Bootstrap 是 React 流行的前端 CSS 框架的重建版本。React Bootstrap 的每个组件都是从头构建的，没有任何不必要的依赖项，并且默认可访问。
  1. Semantic UI
      2. Semantic UI React 是热门前端框架 Semantic UI for React 的官方集成。Semantic UI React 的样式基于 Semantic UI 主题，并且无需 jQuery 开发。此外，它还具备其他实用功能，例如增强功能、属性简写、自动控制状态等。
  1. Mantine
      2. Mantine 是一个免费的开源 React 组件库，提供 134 个完全响应式的 React 组件，涵盖 25 个不同类别，例如导航栏、错误页面、博客卡片、评论、滑块等，可供实际使用。它正逐渐成为开发者，尤其是熟悉 Material UI 的开发者的热门选择。
  1. PrimeReact
      2. PrimeReact 是一个免费的开源 React 库，它提供了大量用于构建响应式 Web 应用的功能。它易于使用和自定义，因为它拥有简洁的按钮和复杂的数据表。
  1. Grommet
      2. Grommet 是一个 React 库，根据其官方网站介绍，它优先考虑可访问性、响应性和可扩展性。它提供了一组预构建的组件，旨在构建跨不同设备、满足不同需求用户的 Web 应用程序。
  1. Onsen UI
      2. 如果您的项目优先考虑移动端体验， Onsen UI 是一个不错的选择。这个库可以帮助您设计出在移动设备上感觉原生的界面。它通过提供模仿原生 iOS 和 Android 应用外观和风格的组件和功能来实现这一点。
  1. Evergreen
      2. Evergreen 是一个极简设计的 React UI 组件库。更好的定义是它不是什么：它不是一个用于移动响应式网站的库。
  1. React Admin
      2. React Admin 是构建 CRUD（创建、读取、更新、删除）应用程序的关键库。它最大的优势之一是清晰全面的文档。这对于初级开发人员组成的团队尤其有用，使他们能够轻松找到解决方案。
  1. Gestalt (Pinterest)
      2. Gestalt 由 Pinterest 开发，是一个精心打造的 React 组件库，专注于可访问性、设计一致性和无缝的用户体验。它提供了一套符合 Pinterest 设计原则的组件，非常适合构建简洁、直观、外观精致的界面。对于寻求视觉上具有凝聚力、响应式设计并内置可访问性功能的开发者来说，Gestalt 尤其有用。
 
在选择 React UI 库之前，请先考虑项目的具体需求。以下是关键检查项：
  • 目标受众： 你的项目是面向什么类型的用户？
  • 组件： 该库是否包含项目所需的所有基础组件（如按钮、表单等）？
  • 定制： 你能否轻松调整库的样式以匹配你的设计风格需求？
  • 警告：部分情况用外部库如果与项目当前的 React 版本不兼容的话会出问题
遗憾的是，我是在写这篇文章时才发现可以用UI库的！但是还是收集了下，或许以后自己需要的时候能用上。但好像现在用AI自己捏也不是不行

关于域名

域名的购买可以推荐这两个渠道：
他们的域名都比较便宜适合个人，且有免费的隐私保护，支付也比较便利
根据需要购买适合自己的域名，基本上折腾下来估计就这里需要花钱了
便宜的可以选top或者xyz域名

域名转CloudFlare托管

域名服务商购买的域名，默认都会提供一个解析服务，但这个服务是可选的，可以通过修改Nameserver的方式，交给CloudFlare或其他DNS服务商进行解析和托管
 
CloudFlare：dash.cloudflare.com
dash.cloudflare.com

dash.cloudflare.com

 CloudFlare具有Worker.js、全球免费CDN、SSL证书，网站DDoS防火墙等特性
 
设置方法参考Vercel绑定自定义域名 | NotionNext帮助手册Vercel绑定自定义域名 | NotionNext帮助手册Vercel绑定自定义域名 | NotionNext帮助手册
Vercel绑定自定义域名 | NotionNext帮助手册

Vercel绑定自定义域名 | NotionNext帮助手册

Vercel 借助cloudFlare可以快速绑定解析自己的域名

Vercel绑定自定义域名 | NotionNext帮助手册Vercel绑定自定义域名 | NotionNext帮助手册

提升Vercel站点在国内的访问效率

vercel.app因为被大量使用，自然而然被墙掉了，不过好在 Vercel 官方提供了单独的 IP 和 CNAME 地址给大家，对于国内的用户来说，配置一下单独的解析，依然可以享受 Vercel 提供的服务
 
可以在CloudFlare把 ip和 cname地址替换成以下内容即可：
A记录地址：76.223.126.88 或 76.76.21.98 等
CNAME 记录地址：cname-china.vercel-dns.com
这里配置就需要自己多尝试了，我也是乱试的
 
如果主要面向国内用户最终解决方法是将网站备案，然后购买国内服务商的CDN服务
当然，想省事还有另外的解决方案，例如国人开放的CDN项目：
推一下 Vercel 加速节点
写在前面 Vercel 不仅可以部署 Hexo 博客，还能部署很多服务。 境内选择 Vercel 的站长很多，为了提升访问速度，自然选择了距离大陆最近的香港节点。 选的多了，节点压力自然就会增大，就算 Vercel 属于大平台，对陆带宽依旧有限，必然会出现互相影响的情况。 再加上滥用资源等问题出现，不少小伙伴反馈 Ve...
推一下 Vercel 加速节点
https://www.yt-blog.top/9952/
推一下 Vercel 加速节点
我用的是这个
 
另外，可以通过Vercel官方提供的CDN缓存控制进行加速
Caching on Vercel's Edge Network
Vercel's Edge Network caches your content at the edge in order to serve data to your users as fast as possible. Learn how Vercel caches works in this guide.
Caching on Vercel's Edge Network
https://vercel.com/docs/edge-cache#cdn-cache-control
Caching on Vercel's Edge Network
 
都设置好后可以去测下网站速度：https://zhale.me/http/

关于一些技术变动

  • 我在7月3号从Vercel换成了Netlify，原因主要是Vercel只能使用Vercel自带的CDN，我想使用CloudFlare的CDN（也许能带来一些访问速度的提升）
  • 我在Github上创建了一个组织，将代码迁移到组织上，然后我私人账号fork组织的代码；由于vercel和netlify的免费计划不支持组织账号，所以使用的是我私人账号的代码，现在我每次代码更新都需要去私人账号点击Sync fork才能更新重新部署网站，你可以使用Upstream Sync自动同步上游代码，手动更新也有好处，可以让你先保留上一份可运行可部署的代码（保留上一份可运行可部署的代码，这个很重要）
  • 将代码迁移到组织后，我可以使用Notion连接GitHub，这样Notion AI就可以访问代码（虽然好像没啥用？）
  • 所以我现在是：Trae→GitHub组织→Fork私人→Netlify→CloudFlare→用户
  • Netlify的apex-loadbalancer.netlify.com好快，我感觉可以关了CloudFlare的代理了！！

新手友好建议

以下是一些对新手的建议，希望能帮助你更顺利地完成个人网站的搭建：
  • 选择合适的工作模式：在与AI交互时，根据具体需求选择Agent模式（直接修改代码）或Ask模式（讨论解决方案）。当遇到复杂问题时，建议先用Ask模式与AI讨论可行方案。
  • 明确需求很重要：给AI提需求时要尽量具体，避免模糊的表述如"不行"、"不好看"。清晰的需求能帮助AI更好地完成任务。
  • 从简单开始：不用一开始就追求完美，先搭建基础功能，再逐步添加新特性。
  • 做好版本管理：经常保存代码版本，在本地测试都还是一团糟前，谨慎提交代码到Github，避免找不回上版本代码。
  • 保持耐心和坚持到最后：遇到问题时，可以多想想其他方式能否解决，最后坚持一点一点做完。
对于同样想要尝试搭建个人网站的朋友们来说，希望这篇经验分享能够给你一些启发和信心。
代码零基础使用AI Agent从零构建个人网站经验分享 | ImageTinys Notes