步骤01
获取 GitHub 账号
GitHub 是全球最大的代码托管平台。你可以把它理解为代码的“网盘”。
- 打开 GitHub 官网。
- 点击 Sign Up,建议使用常用邮箱。
网络访问提示
国内用户访问 GitHub 可能会较慢或打不开,建议开启科学上网工具以确保流程顺畅。
步骤02
一键复制项目模板
使用 GitHub 提供的 Template (模板) 功能可以让你一键复制整个项目环境。点击 Use This Template 按钮,将该模板复制到你的 GitHub 账号下。

关键点:
- Repository Name: 输入你喜欢的名字(仅限英文)。
- Private / Public: 如果你不希望别人看到你的代码,请务必勾选 Private。 选择public的情况下,你的代码会被公开,可能会被其他用户查看。
步骤03
黑科技:在线修改代码
你不需要在电脑上安装任何复杂的编程软件。GitHub 隐藏了一个在线编辑器。
.
在你的仓库主页,按下键盘上的 点号 (Full Stop) 键
* 注意:必须是在英文输入法下点击,浏览器会自动跳转到 github.dev 编辑器。
步骤04
配置全局设置与内容自定义
这一步将激活你的在线表单并个性化你的网站内容。你需要修改两个关键文件。
1. 激活联系表单 (.env)
获取 Web3Forms Access Key
配置后,客户的留言将直接发送到你的邮箱。
- . 前往 Web3Forms 获取 Access Key。
- . 将项目根目录的
.env-example重命名为.env。 - . 填入字段:
NUXT_PUBLIC_WEB3FORMS_KEY=你的KEY
2. 修改站点基础信息 (app.config.ts)
想要修改网站的 Logo、电话、邮箱或者公司简介?只需编辑 app/app.config.ts 文件,无需触碰复杂的代码。
app/app.config.tsTypeScript 配置
{
"logo": "/logo.png",
"contact": {
"email": "your-name@company.com",
"phone": "+86 136xxxx7631",
"address": "浙江省杭州市..."
},
"seo": {
"title": "老爹模板 - 专业外贸建站",
"description": "这是你的站点描述..."
}
}3. 推送修改到服务器
当你完成了 .env 和 setting.json 的修改后,请务必提交代码,这样 Vercel 才会自动为你更新网站。
- 在输入框输入
setup: config site。 - 点击 Commit and Push (提交并推送)。
- 稍等 1-2 分钟,刷新你的域名即可看到新内容。

步骤05
发布产品 (Markdown 方式)
我们的系统支持通过文件夹管理分类。文件路径:content/products/
文件夹 = 分类
在 products 下创建一个文件夹(如 machinery),它就会自动成为网站上的一个产品分类。
MD文件 = 商品
在分类文件夹内创建 1.md 文件,它就是该分类下的一个具体商品详情页。
商品文件结构示例
每个商品文件分为两部分:头部的参数配置 和 下方的图文详情。
content/products/category-1/product-01.md
---
title: "商品名称"
price: "$9,999"
image: "/img/p1.webp" # 列表显示的封面图
firstImage: ["/img/p1.webp", "/img/p2.webp"] # 详情页轮播图
description: "简短的商品描述"
tags: ["标签1", "标签2"]
---
# 这里开始写详情内容
可以使用 **加粗**、[链接](https://...)、## 标题 等 Markdown 语法。图片提醒
所有在 MD 文件中引用的图片,请先上传到 public/img 文件夹中。
步骤06
全球极速部署 (Vercel)
代码修改好了,现在我们要让全世界都能访问。我们推荐使用 Vercel。
- 访问 Vercel 官网。
- 使用 Continue with GitHub 登录。
- 点击 Add New... -> Project。
- 找到你刚刚创建的项目,点击 Import -> docs。
部署成功
部署完成后,Vercel 会给你一个免费的域名。你也可以绑定自己的 `.com` 域名。