利用AI高效搭建Hugo Landing Page实录

背景

为了推广我的App AMClock，我决定搭建一个产品落地页（Landing Page）。整个开发和部署过程中，AI助手（Cursor）是高效开发、排查问题的得力伙伴。

技术选型与准备

  • 静态站点生成器：Hugo，因之前搭建 blog 用的 hugo，相对熟悉，另外其构建速度快、支持多语言、支持屏幕适配
  • 主题：hugo-saasify-theme（fork到自己仓库，方便后续定制和维护）。
  • 前端工具：TailwindCSS + PostCSS，非单独引入，hugo-saasify-theme主题中使用。
  • 自动化部署：GitHub Actions 实现CI/CD，自动同步到腾讯云服务器。
  • 安全管理：敏感信息（如服务器IP、SSH密钥）通过 GitHub Secrets 管理。

先来看看成品效果

项目开发历程

第一阶段：基础搭建、多语言支持（6月15日）

  • 中文版本实现：添加了完整的中文翻译文件（i18n/zh.yaml、data/features/zh.yaml）
  • 产品图片资源：上传了18个产品相关图片，包括功能展示图、Hero区域图片和Logo
  • 多语言配置：在 hugo.toml 中配置了中英文切换功能

第二阶段：功能完善与优化、图片设计（6月16-21日）

  • CTA按钮国际化：实现了Call-to-Action按钮的多语言支持
  • 功能特性优化：动态调整功能特性展示，提升用户体验
  • 主题定制：使用fork的主题分支，应用了多个修复和改进

第三阶段：云端手动部署、自动化发布（6月22日）

  • 手动部署：上传 public 文件夹到服务器，修改 Nginx 配置文件
  • GitHub Actions配置：创建了完整的 .github/workflows/deploy.yml 部署流程
  • 依赖安装优化：在Hugo构建前增加 npm install 步骤，解决PostCSS依赖缺失问题
  • 部署流程完善：最终实现了从代码提交到自动部署的完整CI/CD流程

总结 - 常见"坑"处理

  • baseURL 问题：AI建议在部署命令中指定 --baseURL，避免生产环境链接指向本地地址。
  • 多语言菜单跳转：AI帮助我修正菜单配置，确保中英文切换正常。
  • 404 页面跳转：AI协助自定义 404.html，并用 Hugo 变量生成正确跳转链接，提升用户体验。

References

Github action deploy.yml

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

name: Deploy to Tencent Cloud

on:
  push:
    branches: [ public ]  # 当推送到主分支时触发

jobs:
  deploy:
    runs-on: ubuntu-latest
    
    steps:
    - name: Checkout code
      uses: actions/checkout@v3
      with:
        submodules: true  # 初始化submodules，包括你的主题
        fetch-depth: 0

    - name: Setup Hugo v0.135.0
      uses: peaceiris/actions-hugo@v2
      with:
        hugo-version: '0.135.0'  # 指定与你本地相同的版本
        extended: true
        
    - name: Setup Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '16'
        
    - name: Install dependencies
      run: npm install
        
    - name: Build Hugo site
      run: |
        hugo --minify --baseURL https://amclock.online/
        
    - name: Deploy to server
      uses: appleboy/ssh-action@v0.1.5
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.KEY }}
        port: ${{ secrets.PORT }}
        script: |
          # 备份当前版本
          if [ -d "/var/www/myconfig/amclock.online.public" ]; then
            sudo cp -r /var/www/myconfig/amclock.online.public /var/www/myconfig/amclock.online.public.backup.$(date +%Y%m%d_%H%M%S)
          fi
          
          # 清理目标目录
          sudo rm -rf /var/www/myconfig/amclock.online.public/*
          
    - name: Upload files
      uses: appleboy/scp-action@v0.1.4
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.KEY }}
        port: ${{ secrets.PORT }}
        source: "public/*"
        target: "/var/www/myconfig/amclock.online.public"
        strip_components: 1
        
    - name: Set permissions and reload nginx
      uses: appleboy/ssh-action@v0.1.5
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        key: ${{ secrets.KEY }}
        port: ${{ secrets.PORT }}
        script: |
          sudo chmod -R 755 /var/www/myconfig/amclock.online.public
          sudo systemctl reload nginx
          echo "部署完成！网站已更新到 https://amclock.online"