Documentation

使用指南

本指南将手把手教您如何将网站发布到互联网上。即使您是第一次接触网站部署，跟着下面的步骤操作，也能在 5 分钟内完成。

React 部署指南Next.js 部署指南DNS 解析查询工具SSL 证书检测工具Meta 标签生成器

快速开始

什么是「部署」？ 简单来说，部署就是把你电脑上的网页文件上传到服务器，让全世界的人都能通过网址访问。上码 (Upma) 帮你省去了租服务器、配置域名等繁琐步骤。

方式一：拖拽部署（推荐新手）

这是最简单的方式，不需要安装任何软件，也不需要敲命令。只要用鼠标拖一下文件夹，网站就上线了。

适用场景

个人博客、简历页面、作品集、活动页、任何静态网页都可以用这种方式部署。
  • 1
    准备网页文件

    首先，你需要有一个包含网页文件的文件夹。这个文件夹里必须有一个叫 index.html 的文件，这是网站的入口页面。

    文件夹结构示例
    my-website/├── index.html      ← 必须有这个文件！├── style.css       ← 样式文件（可选）├── script.js       ← 脚本文件（可选）└── images/         ← 图片文件夹（可选）    ├── logo.png    └── photo.jpg

    常见错误

    如果你的文件夹里没有 index.html，或者它在子文件夹里，部署后访问会显示 404 错误。

    💡 补救小贴士：如果不小心传错了也没关系。部署完成后，你可以在项目后台的「页面列表」里找到正确的文件，点击右侧菜单将其「设为主页」即可修复。

    文件结构示例
  • 2
    登录上码

    打开浏览器，访问 www.upma.cn。如果你还没有账号，可以用手机号或微信快速注册。

    登录界面
  • 3
    找到「上传区域」

    登录后，你会看到首页有一个大大的上传区域。它不仅支持拖拽，也可以直接点击来选择文件。

    上传区域
  • 4
    上传文件

    你可以通过以下任意一种方式上传：

    • 拖拽文件夹：将整个网页文件夹拖入框内（推荐）。
    • 拖拽压缩包：将 zip 格式的压缩包拖入框内。
    • 拖拽单文件：直接拖入 index.html 等单独文件。
    • 点击选择：点击上传区域，在弹出的文件窗口中选择。
    上传区域
    无论使用哪种方式，请确保你的文件里包含 index.html，它是网站的入口。
  • 5
    等待上传完成

    拖入后，系统会自动开始上传文件。你会看到一个进度条。上传速度取决于你的文件大小和网络状况，通常几秒到几分钟不等。

    上传区域
  • 6
    获取访问链接

    上传完成后，系统会给你一个专属链接，格式类似 https://xxx.upma.site。点击这个链接，就能看到你的网站了！🎉

    部署成功
    部署成功

    恭喜！

    你的网站已经上线了！现在可以把这个链接分享给朋友、放到简历里、或者发到社交媒体了。

方式二：命令行部署（适合开发者）

如果你是程序员，或者需要把部署集成到自动化流程中（比如 GitHub Actions），可以使用我们的命令行工具。

CLI 工具目前正在开发中，以下为预览版文档。

安装 CLI

打开终端（macOS/Linux）或命令提示符（Windows），输入以下命令：

Terminal
npm install -g upma-cli

什么是终端？ 终端是一个可以输入命令的黑色窗口。在 macOS 上按 Cmd + 空格 搜索「Terminal」可以打开；在 Windows 上按 Win + R，输入 cmd 回车。

登录

Terminal
upma login

执行后会弹出浏览器让你授权登录。

部署

进入你的项目目录，执行部署命令：

Terminal
cd my-websiteupma deploy

系统会自动上传当前目录下的所有文件，并返回访问链接。

框架构建指南

如果你使用 React、Vue、Next.js 等现代前端框架开发网站，需要先「构建」项目，生成可以直接运行的静态文件，然后再上传。

什么是「构建」？

现代框架的源代码（.jsx, .vue, .ts 等）浏览器无法直接运行。构建就是把这些源代码转换成浏览器能理解的 HTML/CSS/JS 文件。

React / Vue / Vite 项目

这是最常见的前端项目类型。构建步骤如下：

1. 打开终端，进入项目目录

Terminal
cd /path/to/your/project

2. 执行构建命令

Terminal
npm run build

构建完成后，项目目录里会多出一个 dist 文件夹（有些项目可能叫 build）。

Terminal

终端显示 npm run build 命令执行成功，以及 dist 文件夹生成

3. 上传 dist 文件夹

把 dist 文件夹（不是里面的文件）拖拽到上码的 上传区域即可。

注意

不要上传整个项目目录！只上传 dist 文件夹，其他文件（如 node_modules、src）不需要也不应该上传。

Next.js 项目

Next.js 默认是「服务端渲染」模式，需要额外配置才能导出静态文件。

1. 修改配置文件

打开项目根目录的 next.config.js（如果没有就新建一个），添加以下配置：

next.config.js
/** @type {import('next').NextConfig} */const nextConfig = {  output: 'export',  // ← 添加这一行}
module.exports = nextConfig

2. 执行构建

Terminal
npm run build

构建完成后，静态文件会输出到 out 文件夹。

3. 上传 out 文件夹

把 out 文件夹拖拽到上传区域即可。

功能限制

使用静态导出后，以下 Next.js 功能将不可用：
  • API Routes（/api/*）
  • 服务端渲染 (getServerSideProps)
  • 增量静态再生 (ISR)
  • 中间件 (Middleware)

纯 HTML 网页

如果你的网页是手写的 HTML/CSS/JS，不需要任何构建步骤。直接把包含 index.html 的文件夹拖拽上传即可。

Hugo / Hexo 博客

这两个是流行的静态博客生成器。

Hugo

Terminal
hugo

生成的文件在 public 文件夹。

Hexo

Terminal
hexo generate

生成的文件同样在 public 文件夹。上传这个文件夹即可。

自定义域名

默认情况下，你的网站地址是 xxx.upma.site。如果你有自己的域名（比如 www.example.com），可以把它绑定到你的上码项目，这样访问你的域名就能看到你的网站。

什么是域名？

域名就是网站的地址，比如 baidu.com、taobao.com。你可以在阿里云、腾讯云、GoDaddy 等平台购买自己的域名。

第 1 步：添加域名

  1. 进入你的项目设置页面
  2. 点击「域名」选项卡
  3. 点击「绑定域名」按钮
  4. 输入你的域名（比如 www.example.com）
  5. 点击确认
上传区域

第 2 步：配置 DNS

添加域名后，系统会给你两条 DNS 记录需要配置。你需要登录你购买域名的平台（比如阿里云），找到「域名解析」或「DNS 设置」，添加这两条记录。

记录类型主机记录记录值说明
CNAMEwwwcname.upma.site让域名指向上码服务器
TXT_upma-challengeupma-verify=xxx...验证域名所有权
上传区域

主机记录填什么？

  • 如果你绑定的是 www.example.com，主机记录填 www
  • 如果你绑定的是 example.com（裸域名），主机记录填 @
  • 如果你绑定的是 blog.example.com，主机记录填 blog

第 3 步：等待验证

DNS 配置后需要等待生效，通常 5-30 分钟，最长可能需要 48 小时（取决于你的域名服务商）。

验证成功后，域名状态会变成「已连接」，系统会自动为你的域名申请免费的 SSL 证书，让网站支持 https:// 安全访问。

如何更新网站

核心逻辑

在上码 (Upma)，更新网站的方式和第一次部署完全一样。你只需要再次上传新的文件，系统会自动把它们发布为各种的新版本。
  • 1
    修改你的代码

    在你的电脑上修改代码（比如改了文字、换了图片），并保存。

  • 2
    构建（如果是框架项目）

    如果你用的是 React/Vue 等框架，记得先运行 npm run build 生成最新的 dist 目录。

  • 3
    进入项目控制台

    登录上码，点击你的项目卡片进入项目详情页。

  • 4
    上传新版本

    切换到 「页面」 选项卡，点击右上角的 「更新项目」 按钮，选择或拖拽你的新文件夹。

    • 更新项目
    更新项目

就是这么简单！新的版本会作为 v2, v3... 自动记录，你可以随时在版本历史中查看或回滚。

常见问题

我没有编程基础，能用上码吗？
完全可以！如果你只是想发布一个简单的网页（比如用 WordPress 导出的静态页面，或者别人给你的 HTML 文件），只需要拖拽上传就行，不需要任何编程知识。
部署后访问显示 404 Not Found？
这通常是因为你上传的文件夹里没有 index.html 文件，或者 index.html 在子文件夹里。请确保 index.html 在文件夹的根目录。如果你上传的是 dist 文件夹，请直接拖拽 dist 文件夹本身，而不是它的父目录。
React/Vue 路由刷新后 404？
这是单页应用 (SPA) 的特性。上码默认会将未匹配的路由回退到 index.html，大多数情况下应该能正常工作。如果仍有问题，请检查你的路由配置是否使用了 HTML5 History 模式。
上传速度很慢怎么办？
上传速度取决于你的网络状况和文件大小。建议：1) 删除不需要的大文件（如 node_modules）；2) 压缩图片尺寸；3) 使用更快的网络。如果是更新已有项目，上码会自动增量上传，只上传修改过的文件。
支持上传视频或大文件吗？
支持，单文件最大 100MB。但建议将大型视频托管在专业视频平台（如 B 站、YouTube）并嵌入你的网页，以节省流量。
如何更新网站内容？
进入项目详情页 -> 页面 -> 点击「更新项目」，上传新的文件夹即可。新版本会自动覆盖旧版本，且支持秒级回滚。
可以设置访问密码吗？
可以！在项目设置里开启「密码保护」功能，设置一个密码，访客需要输入正确密码才能查看网站内容。适合内部资料、测试环境等场景。
前往探索广场