Skip to main content

Docusaurus网站开发教程

🎯 教程目标

通过这份教程，你将学会：

  • 使用Cursor IDE搭建Docusaurus项目
  • 利用AI助手进行开发
  • 将项目部署到Vercel平台

📺 教学视频系列​

🎥 观看完整教程视频

这个系列视频将分步骤指导你完成从项目创建到部署的整个过程。建议按顺序观看。

第一部分：项目初始化

创建项目并进行基础配置

第二部分：内容编写

学习如何编写和组织文档内容

第三部分：主题定制

自定义网站主题和样式

第四部分（上）：部署准备

部署前的准备工作和配置

第四部分（下）：Vercel部署

在 Vercel 平台上完成部署

🎬 准备工作​

在开始之前，请确保你已经安装好以下工具：

🌟 第一步：创建Docusaurus项目​

# 1. 打开你想要创建项目的母级目录
# 2. 使用快捷键打开终端
Ctrl + Shift + ~
💡 小贴士

创建过程中，如果遇到选项询问，可以直接按回车选择默认值。

🔗 第二步：GitHub仓库配置​

  1. 打开 GitHub Desktop
  2. 点击 File -> Add local repository
  3. 点击 "Create Repository"
  4. 填写仓库信息： 
    Name: my-website
    Description: My Docusaurus Documentation Site
    Local Path: [选择你的项目目录]
  5. 完成首次提交： 
    Commit Title: Initial commit
    Description: Initialize Docusaurus project

🚀 第三步：部署到Vercel​

  1. 登录 Vercel
  2. 点击 "New Project"
  3. 导入你刚创建的GitHub仓库
  4. 保持默认配置，点击 "Deploy"
🎉 部署成功

现在你的网站已经上线了！Vercel会自动为你生成一个域名，格式如： https://my-website-xxx.vercel.app

🤖 第四步：使用Cursor的AI助手​

打开AI助手​

按 Ctrl + I 呼出Composer面板

常用提示语​

- "帮我优化这段代码"
- "如何实现XXX功能"
- "解释这段代码的作用"

📝 开发工作流​

🎯 最佳实践​

  1. 频繁提交代码

    # 每完成一个功能就提交
    git add .
    git commit -m "feature: add new functionality"
    git push

  2. 实时检查部署状态

    • 在Vercel面板中监控部署进度
    • 检查部署日志排查问题

  3. 善用AI助手

    // 示例：让AI助手帮你优化代码
    // 原代码
    function hello() {
      console.log("Hello");
    }

    // AI优化后
    const hello = () => {
      console.log("Hello, World! 👋");
    };

🛠️ 常见问题解决​

❓ 部署失败怎么办？
  1. 检查 package.json 中的脚本配置
  2. 查看Vercel的构建日志
  3. 确保所有依赖都已正确安装
❓ 如何自定义域名？
  1. 在Vercel项目设置中添加域名
  2. 配置DNS记录
  3. 等待DNS生效
⚠️ 注意事项
  • 确保 Node.js 版本兼容
  • 定期更新依赖包
  • 保持代码规范统一

🎉 结语​

恭喜你！现在你已经掌握了使用Cursor开发Docusaurus网站并部署到Vercel的完整流程。希望这个教程对你有帮助！

🌈 接下来可以...​

  • 自定义网站主题
  • 添加更多内容
  • 优化SEO设置
  • 分享你的作品！