Skip to content

Commit 69efa4f

Browse files
ChanMeng666ChanMeng666
committed
Add Tutorial Article
1 parent 7fcfa38 commit 69efa4f

File tree

4 files changed

+240
-0
lines changed

4 files changed

+240
-0
lines changed

‎docs/tutorials/_category_.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"label": "教程指南",
3+
"position": 4,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "详细的教程指南，帮助你掌握各种开发技能。",
7+
"slug": "/category/tutorials"
8+
}
9+
}

‎docs/tutorials/docusaurus-tutorial.mdx

+209
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
---
2+
sidebar_position: 2
3+
title: Docusaurus网站开发教程
4+
description: 使用Cursor和AI助手开发Docusaurus文档网站，并部署到Vercel
5+
---
6+
7+
import Tabs from '@theme/Tabs';
8+
import TabItem from '@theme/TabItem';
9+
import ThemedImage from '@theme/ThemedImage';
10+
11+
:::tip 🎯 教程目标
12+
通过这份教程，你将学会：
13+
- 使用Cursor IDE搭建Docusaurus项目
14+
- 利用AI助手进行开发
15+
- 将项目部署到Vercel平台
16+
:::
17+
18+
## 🎬 准备工作
19+
20+
在开始之前，请确保你已经安装好以下工具：
21+
22+
<div className="tool-grid">
23+
24+
- [x] [Cursor IDE](https://cursor.sh)
25+
- [x] [GitHub Desktop](https://desktop.github.com)
26+
- [x] [Node.js](https://nodejs.org) (版本 >= 14)
27+
- [x] 一个 [GitHub](https://github.com) 账号
28+
- [x] 一个 [Vercel](https://vercel.com) 账号
29+
30+
</div>
31+
32+
## 🌟 第一步：创建Docusaurus项目
33+
34+
<Tabs>
35+
<TabItem value="step1" label="打开Cursor" default>
36+
```bash
37+
# 1. 打开你想要创建项目的父级目录
38+
# 2. 使用快捷键打开终端
39+
Ctrl + Shift + ~
40+
```
41+
</TabItem>
42+
<TabItem value="step2" label="创建项目">
43+
```bash
44+
# 执行创建命令
45+
npx create-docusaurus@latest my-website classic
46+
```
47+
</TabItem>
48+
<TabItem value="step3" label="打开项目">
49+
```bash
50+
# 进入项目目录
51+
cd my-website
52+
53+
# 启动开发服务器
54+
npm start
55+
```
56+
</TabItem>
57+
</Tabs>
58+
59+
:::info 💡 小贴士
60+
创建过程中，如果遇到选项询问，可以直接按回车选择默认值。
61+
:::
62+
63+
## 🔗 第二步：GitHub仓库配置
64+
65+
1. 打开 GitHub Desktop
66+
2. 点击 `File -> New Repository`
67+
3. 填写仓库信息：
68+
```yaml
69+
Name: my-website
70+
Description: My Docusaurus Documentation Site
71+
Local Path: [选择你的项目目录]
72+
```
73+
4. 点击 "Create Repository"
74+
5. 完成首次提交：
75+
```markdown
76+
Commit Title: Initial commit
77+
Description: Initialize Docusaurus project
78+
```
79+
80+
## 🚀 第三步：部署到Vercel
81+
82+
1. 登录 [Vercel](https://vercel.com)
83+
2. 点击 "New Project"
84+
3. 导入你刚创建的GitHub仓库
85+
4. 保持默认配置，点击 "Deploy"
86+
87+
:::success 🎉 部署成功
88+
现在你的网站已经上线了！Vercel会自动为你生成一个域名，格式如：
89+
`https://my-website-xxx.vercel.app`
90+
:::
91+
92+
## 🤖 第四步：使用Cursor的AI助手
93+
94+
<div className="command-box">
95+
96+
### 打开AI助手
97+
按 `Ctrl + I` 呼出Composer面板
98+
99+
### 常用提示语
100+
```markdown
101+
- "帮我优化这段代码"
102+
- "如何实现XXX功能"
103+
- "解释这段代码的作用"
104+
```
105+
106+
</div>
107+
108+
## 📝 开发工作流
109+
110+
```mermaid
111+
graph LR
112+
A[编写代码] --> B[本地测试]
113+
B --> C[提交到GitHub]
114+
C --> D[Vercel自动部署]
115+
D --> A
116+
```
117+
118+
## 🎯 最佳实践
119+
120+
1. **频繁提交代码**
121+
```bash
122+
# 每完成一个功能就提交
123+
git add .
124+
git commit -m "feature: add new functionality"
125+
git push
126+
```
127+
128+
2. **实时检查部署状态**
129+
- 在Vercel面板中监控部署进度
130+
- 检查部署日志排查问题
131+
132+
3. **善用AI助手**
133+
```javascript
134+
// 示例：让AI助手帮你优化代码
135+
// 原代码
136+
function hello() {
137+
console.log("Hello");
138+
}
139+
140+
// AI优化后
141+
const hello = () => {
142+
console.log("Hello, World! 👋");
143+
};
144+
```
145+
146+
## 🛠️ 常见问题解决
147+
148+
<details>
149+
<summary>❓ 部署失败怎么办？</summary>
150+
151+
1. 检查 `package.json` 中的脚本配置
152+
2. 查看Vercel的构建日志
153+
3. 确保所有依赖都已正确安装
154+
155+
</details>
156+
157+
<details>
158+
<summary>❓ 如何自定义域名？</summary>
159+
160+
1. 在Vercel项目设置中添加域名
161+
2. 配置DNS记录
162+
3. 等待DNS生效
163+
164+
</details>
165+
166+
:::warning ⚠️ 注意事项
167+
- 确保 Node.js 版本兼容
168+
- 定期更新依赖包
169+
- 保持代码规范统一
170+
:::
171+
172+
## 🎉 结语
173+
174+
恭喜你！现在你已经掌握了使用Cursor开发Docusaurus网站并部署到Vercel的完整流程。希望这个教程对你有帮助！
175+
176+
<div className="ending-message">
177+
178+
### 🌈 接下来可以...
179+
180+
- 自定义网站主题
181+
- 添加更多内容
182+
- 优化SEO设置
183+
- 分享你的作品！
184+
185+
</div>
186+
187+
export const styles = `
188+
.tool-grid {
189+
display: grid;
190+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
191+
gap: 1rem;
192+
margin: 2rem 0;
193+
}
194+
195+
.command-box {
196+
background: #f6f8fa;
197+
border-radius: 8px;
198+
padding: 1.5rem;
199+
margin: 2rem 0;
200+
}
201+
202+
.ending-message {
203+
background: linear-gradient(to right, #00b4db, #0083b0);
204+
color: white;
205+
padding: 2rem;
206+
border-radius: 8px;
207+
margin-top: 3rem;
208+
}
209+
`;

‎docs/tutorials/index.mdx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
sidebar_position: 1
3+
---
4+
5+
# 教程指南
6+
7+
这里提供了详细的教程指南，帮助你掌握各种开发技能：
8+
9+
- [Docusaurus网站开发教程](./docusaurus-tutorial.mdx) - 使用Cursor和AI助手开发Docusaurus网站
10+
11+
选择上面的教程开始学习吧！

‎sidebars.js

+11
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,17 @@ const sidebars = {
2929
'basics/ai-communication',
3030
],
3131
},
32+
{
33+
type: 'category',
34+
label: '教程指南',
35+
link: {
36+
type: 'doc',
37+
id: 'tutorials/index'
38+
},
39+
items: [
40+
'tutorials/docusaurus-tutorial',
41+
],
42+
},
3243
{
3344
type: 'category',
3445
label: '开发工具',

0 commit comments

Comments
 (0)