本地预览、压缩工具与内容发布工作流整合

工作流整合让 Hugo 开发从创作到发布无缝衔接。

将本地预览、图像压缩和部署脚本组合成统一流程，可显著提升效率。利用 hugo server 进行实时预览，配合 npm 脚本调用压缩工具与版本控制系统，实现从撰写到发布的一体化体验。在持续集成服务中复用同样的脚本，还能减少环境差异带来的问题。

本地预览

Hugo Server

使用 hugo server 启动本地开发服务器：

# 基本预览
hugo server

# 包含草稿
hugo server -D

# 指定端口
hugo server --port 8089

实时预览工具

Browser Sync: 自动刷新浏览器
Live Preview: VS Code 扩展实时预览

压缩工具

图片压缩

本站使用多种工具压缩图片：

# 使用 ImageMagick
convert input.jpg -quality 80 output.webp

# 使用 sharp (Node.js)
npm install sharp

代码压缩

Hugo 内置压缩：

hugo --minify

发布工作流

npm Scripts

配置 package.json 脚本：

{
  "scripts": {
    "dev": "hugo server -D",
    "build": "hugo --minify",
    "preview": "hugo server --environment staging",
    "deploy": "npm run build && rsync -avz public/ server:/var/www/"
  }
}

CI/CD 集成

GitHub Actions 示例：

name: Deploy Hugo Site
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Setup Hugo
      uses: peaceiris/actions-hugo@v3
    - name: Build
      run: npm run build
    - name: Deploy
      run: # 部署逻辑

本站实践

本站的工作流整合包括：

本地开发: make server 启动开发环境
内容检查: 自动运行 lint 和链接检查
构建优化: 使用 --minify 和 --gc
部署自动化: Cloudflare Pages + GitHub Actions

推荐的工具有：

VS Code 扩展：Markdownlint, Prettier，Live Preview，Front Matter CMS
构建工具：npm scripts, Makefile
部署平台：Cloudflare Pages, Netlify

总结

通过整合各种工具，可以构建高效的 Hugo 开发工作流，从本地预览到自动化部署。本站的实践展示了这一方法的全面应用。