自游人
自游人

VuePress与Hugo部署指南

辉哥 收录于 实用工具与脚本 和 Fixit  Hugo
  约 3600 字 预计阅读 8 分钟 - 次阅读  
目录

VuePress 和 Hugo 这两款主流静态站点生成器的部署方法介绍

✅ 一、VuePress 与 Hugo 核心对比

1. VuePress 核心特点

  • 本质：基于 Vue.js 的静态站点生成器，由尤雨溪团队开发，天生对 Vue 生态友好
  • 技术栈：开发/主题定制均使用 Vue + Markdown + JavaScript/CSS，前端开发者零学习成本
  • 核心优势：Markdown 书写体验极佳，支持 Vue 组件无缝嵌入文档，主题定制灵活，最适合写技术文档、个人博客、项目文档，生态里有大量成熟的文档类主题（如 vuepress-theme-reco）
  • 构建产物：打包后输出 docs/.vuepress/dist 目录（默认路径），全是 HTML/CSS/JS 静态文件，无任何后端依赖
  • 缺点：构建速度中等，站点内容极多（上千篇文档）时，打包耗时会比 Hugo 久

2. Hugo 核心特点

  • 本质：基于 Go 语言开发的静态站点生成器，编译型语言，核心优势是「极致性能」
  • 技术栈：内容用 Markdown 编写，主题基于 Go Template + HTML/CSS/JS，无需前端框架基础也能上手
  • 核心优势：构建速度天花板，哪怕你的站点有 1 万篇文章，Hugo 也能毫秒级完成构建；轻量化、无运行时依赖，部署包极小，适合内容量大的博客、资讯站、作品集、企业官网，生态主题丰富且风格多样
  • 构建产物：打包后输出 public 目录（默认路径），纯静态资源，部署无门槛
  • 缺点：主题定制需要学 Go 模板语法，对纯前端开发者有一点点学习成本

✅ 二、通用前置原则

不管是 VuePress 还是 Hugo，部署的核心逻辑是 「静态网站的本质是「纯静态文件」」，所有部署的核心要求、前置条件完全相同，记住这几条，部署永远不会踩坑：

✅ 核心原则1：静态网站的核心要求

静态网站 = 只有 HTML + CSS + JS + 图片/视频 等静态资源，没有后端服务、没有数据库、没有动态接口依赖。
✅ 部署的本质：把构建好的「静态文件目录」上传到任意支持「静态文件托管」的平台，让其能通过 HTTP 访问即可。

✅ 核心原则2：所有部署的前置步骤（必须做）

  1. 本地完成站点开发（写 Markdown 内容、配置主题、调整样式）
  2. 在本地执行「构建命令」，生成 最终可部署的静态产物目录
  3. 把这个产物目录的全部内容（不是目录本身）上传/推送至部署平台

✔️ 注意：是上传「目录里的文件」，不是上传目录文件夹！

✅ 核心原则3：所有平台通用的部署要求

  1. 平台必须开启「静态网站托管」功能（99%的平台默认支持）
  2. 必须指定 首页入口文件为 index.html（所有静态网站的标配）
  3. 必须配置 404 页面指向 404.html（可选，优化体验）
  4. 路由模式：均为「静态路由」，无需配置后端反向代理，平台直接返回对应 HTML 文件

✅ 三、VuePress 完整部署流程（本地构建 + 全平台部署）

✔️ 步骤1：VuePress 本地构建（生成可部署产物）

前提：你已经完成 VuePress 站点开发（配置 config.js、写好 Markdown 文档），本地能正常运行 npm run dev 预览。

① 核心构建命令（必执行） 

1
2
3
4
5

# 1. 进入你的 VuePress 项目根目录
cd your-vuepress-project

# 2. 执行打包构建，生成静态产物
npm run build

② 产物目录说明

构建成功后，会在你的项目目录下生成核心文件夹：

📂 docs/.vuepress/dist → 这就是最终要部署的静态文件目录

里面的内容是编译后的 HTML、压缩后的 CSS/JS、图片等静态资源，无任何依赖，直接部署即可。

✔️ 步骤2：VuePress 全平台部署方案（任选其一，覆盖99%场景）

✅ 方案A：部署到 Github Pages（最常用，免费，适合开源文档/个人博客）

适用场景：个人博客、开源项目文档、无访问量限制，完全免费，步骤简单，首选！

部署方式（2种，推荐方式2）

方式1：手动上传（适合新手）

  • 打开 Github，新建一个仓库（仓库名推荐：你的用户名.github.io，比如 xiaoming.github.io，这样访问地址更简洁）
  • 把 dist 目录下的所有文件（不是dist文件夹），手动上传到 Github 仓库的 main 分支 或 gh-pages 分支
  • 进入仓库 → Settings → Pages → 配置「Source」：选择对应的分支 + 根目录（/）
  • 保存后等待1-3分钟，访问地址：https://你的用户名.github.io 即可打开站点

方式2：自动部署（推荐，一行命令搞定，无需手动上传）
VuePress 官方推荐使用 gh-pages 包，自动打包+推送至 Github Pages，配置如下：

  1. 安装依赖：npm install gh-pages -D
  2. 在 package.json 中添加脚本：
  3. 执行命令：npm run deploy → 自动完成「构建+推送+部署」，无需任何手动操作！

✅ 方案B：部署到 Netlify/Vercel（零配置，免费，自动CI/CD，墙裂推荐）

适用场景：所有静态站点，零配置、零命令、免费版足够用，支持自动构建+自动部署，国内访问速度也不错，比 Github Pages 体验更好！

部署步骤（3步搞定，无任何配置）
  1. 把你的 VuePress 源码（不是dist产物）上传到 Github/Gitee/Gitlab 仓库
  2. 打开 Netlify 或 Vercel，注册账号（推荐用 Github 账号一键登录）
  3. 点击「Add new site」→ 选择「Import an existing project」→ 选择你的 VuePress 仓库
  4. 平台会自动检测框架为 VuePress，自动填充构建命令和输出目录：
    • Build Command：npm run build
    • Publish Directory：docs/.vuepress/dist
  5. 点击「Deploy」，等待2分钟，部署完成！平台会自动分配一个免费域名，也可以绑定自己的域名。

✅ 方案C：部署到 Nginx（本地服务器/云服务器，如阿里云/腾讯云，适合生产环境）

适用场景：企业官网、内部文档、需要绑定独立域名、需要控制服务器，适合有云服务器的场景，生产环境首选。

部署步骤（核心配置，可直接复制）
  1. 把 dist 目录下的所有文件，通过 Xshell/FTP 上传到云服务器的任意目录，比如 /usr/share/nginx/html/vuepress
  2. 修改 Nginx 配置文件（/etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf），添加如下核心配置：
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

    server {
    listen 80;
    server_name your-domain.com; # 你的域名，如 docs.xxx.com

    # 指向静态文件目录
    root /usr/share/nginx/html/vuepress;
    index index.html; # 首页入口，必须配置

    # 解决路由刷新404的问题（VuePress核心配置）
    location / {
        try_files $uri $uri/ /index.html;
    }
}
  3. 重启 Nginx：nginx -s reload
  4. 访问你的域名即可，如需 HTTPS，配置 SSL 证书即可（阿里云/腾讯云免费申请）。

✅ 四、Hugo 完整部署流程（本地构建 + 全平台部署）

✔️ 步骤1：Hugo 本地构建（生成可部署产物）

前提：你已经安装 Hugo（brew install hugo/choco install hugo/官网下载），完成站点开发（hugo new site my-blog、写好 Markdown 文档、配置主题），本地能正常运行 hugo server 预览。

① 核心构建命令（必执行，2种，均常用） 

1
2
3
4
5

# 方式1：默认构建（生产环境，压缩所有资源，推荐部署用）
hugo

# 方式2：开发构建（不压缩资源，方便调试，本地用）
hugo server -D # -D 表示显示草稿文章

② 产物目录说明

构建成功后，会在你的 Hugo 项目根目录下生成核心文件夹：

📂 public → 这就是最终要部署的静态文件目录

里面的内容是 Hugo 编译后的纯静态资源，比 VuePress 的产物更轻量化，无任何依赖，部署逻辑和 VuePress 完全一致。

✔️ Hugo 核心优势体现：哪怕你的站点有 5000 篇文章，执行 hugo 命令后，构建耗时通常在 100ms 以内，这是 VuePress 无法比拟的！

✔️ 步骤2：Hugo 全平台部署方案（和 VuePress 完全通用，直接复用）

✅ 划重点：Hugo 的部署方式、命令、配置，和 VuePress 100%完全相同！因为两者的产物都是「纯静态文件」，部署的本质是一样的，所有平台都通用，无需额外学习！

这里只列出核心部署方案（直接复用，命令/配置可照搬），节省篇幅：

✅ 方案A：部署到 Github Pages（免费，最常用）

  1. 手动部署：把 public 目录下的所有文件上传到 Github 仓库的 gh-pages 分支，配置 Pages 即可。
  2. 自动部署（推荐）：Hugo 官方推荐使用 hugo --gc && hugo deploy，或搭配 gh-pages 包，一键推送。

✅ 方案B：部署到 Netlify/Vercel（零配置，墙裂推荐，Hugo 最优解）

这是 Hugo 部署的「天花板方案」，零配置、自动构建、免费、访问速度快，步骤：

  1. 把 Hugo 源码上传到 Github 仓库
  2. 打开 Netlify/Vercel，导入仓库，平台会自动检测框架为 Hugo，自动填充：
    • Build Command：hugo
    • Publish Directory：public
  3. 点击 Deploy，2分钟完成部署，自动分配免费域名，支持绑定自定义域名。

✅ 方案C：部署到 Nginx（云服务器，生产环境）

和 VuePress 的 Nginx 配置完全一样，唯一区别是「静态文件目录指向 Hugo 的 public 产物」：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

server {
    listen 80;
    server_name blog.xxx.com;

    root /usr/share/nginx/html/hugo-blog; # 指向public目录上传后的路径
    index index.html;

    location / {
        try_files $uri $uri/ /index.html; # 解决路由刷新404
    }
}

重启 Nginx 即可访问，无任何额外配置！

✅ 五、补充：其他通用免费部署平台（两者均适用）

除了上面的主流平台，还有这些免费、好用的平台，部署逻辑完全一致，任选即可：

  1. Gitee Pages：国内版 Github Pages，访问速度超快，适合国内用户，步骤和 Github Pages 一样，上传静态文件即可。
  2. Cloudflare Pages：Cloudflare 旗下的静态托管服务，免费、全球CDN加速，国内访问速度优秀，零配置部署。
  3. Surge.sh：轻量级静态托管平台，一行命令部署：surge public your-domain.surge.sh，适合快速上线。
  4. 阿里云/腾讯云 OSS：把静态文件上传到对象存储，开启「静态网站托管」功能，即可通过 OSS 域名访问，适合企业级场景。

✅ 推荐主题快速部署

1. vuepress 一个具有强大功能的 主题VuePress Theme Hope https://theme-hope.vuejs.press/zh/get-started/

2. Hugo 的最好主题 FixIt 主题 https://fixit.lruihao.cn/

原文链接： https://www.17you.com/tool/vuepress%E5%92%8Chugo%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E9%83%A8%E7%BD%B2/ 已复制！
脚本编程和自动化工具

寻找技术支持帮助和技术合伙人一起搞事。

请点击联系我

相关内容

收录于 合集・Fixit 4
收录于 合集・Hugo 6
更新于 2026-03-22 
CC BY-NC-SA 4.0
HugoVuePress部署
返回 | 主页

目录