静态网站部署

静态网站由预先生成的 HTML、CSS、JavaScript 文件组成，用户访问时服务器直接返回这些文件，无需动态处理。静态网站具有访问速度快、安全性高、成本低廉等优点，非常适合个人博客、技术文档、企业官网等场景。

静态网站的特点

优势

访问速度快

静态文件直接由 Web 服务器返回，无需数据库查询和程序处理，响应速度极快。配合 CDN 分发，可以实现毫秒级响应。

安全性高

没有数据库、没有后端程序，攻击面极小。不存在 SQL 注入、XSS 等常见 Web 漏洞。

稳定性好

静态网站不依赖复杂的运行环境，只要 Web 服务器正常运行，网站就能访问。没有程序崩溃的风险。

成本低廉

静态网站可以部署在对象存储、CDN 等低成本平台上，甚至可以免费托管。无需维护服务器，运维成本几乎为零。

易于扩展

静态文件可以轻松部署到全球 CDN 节点，自动实现负载均衡和高可用。

局限性

功能受限

无法实现用户注册、评论、搜索等需要后端处理的功能。可以通过第三方服务（如 Disqus、Algolia）补充部分功能。

更新流程

每次更新内容需要重新构建和部署，不如动态网站直观。但通过 CI/CD 自动化可以简化流程。

个性化受限

难以实现个性化内容推荐、用户偏好设置等功能。

静态网站生成器

静态网站生成器（Static Site Generator，SSG）是将模板和内容文件转换为静态 HTML 文件的工具。

主流静态网站生成器

Hugo

Go 语言编写，构建速度极快，适合大型网站。配置简单，主题丰富，是个人博客的热门选择。

Hexo

基于 Node.js，中文社区活跃，主题和插件丰富。适合熟悉 JavaScript 的用户。

Jekyll

Ruby 编写，GitHub Pages 原生支持。适合托管在 GitHub Pages 的项目。

VuePress

基于 Vue.js，专为技术文档设计。支持 Vue 组件，可扩展性强。

Next.js

React 全栈框架，支持静态生成和服务端渲染。适合 React 开发者。

Docusaurus

Facebook 开发，专为开源项目文档设计。支持版本管理、国际化等功能。

选择建议

场景	推荐工具
个人博客	Hugo、Hexo
技术文档	VuePress、Docusaurus
React 项目	Next.js
GitHub Pages	Jekyll
快速构建	Hugo

部署方案

云服务器部署

将静态文件部署到自己的云服务器，完全控制服务器环境。

步骤一：构建静态文件

以 Hugo 为例：

hugo --minify

生成的静态文件在 public 目录。

步骤二：上传文件到服务器

使用 scp 或 rsync 上传：

scp -r public/* root@server:/var/www/html/

或使用 rsync 增量同步：

rsync -avz public/ root@server:/var/www/html/

步骤三：配置 Nginx

server {
    listen 80;
    server_name example.com www.example.com;
    root /var/www/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

对象存储部署

将静态文件存储在对象存储（如阿里云 OSS、腾讯云 COS），开启静态网站托管功能。

阿里云 OSS 部署：

创建 OSS Bucket，选择与用户就近的地域
开启"静态网站托管"，设置默认首页为 index.html
上传静态文件到 Bucket
配置自定义域名，绑定到 Bucket
开启 CDN 加速，提升访问速度

优势：

无需维护服务器
按流量计费，成本低
自动扩展，无需担心容量

GitHub Pages 部署

GitHub Pages 提供免费的静态网站托管服务，适合开源项目和个人博客。

步骤一：创建仓库

创建名为 username.github.io 的仓库（username 替换为你的 GitHub 用户名），或使用任意仓库的 gh-pages 分支。

步骤二：上传静态文件

将静态文件推送到仓库：

git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/username/username.github.io.git
git push -u origin main

步骤三：配置 GitHub Pages

在仓库 Settings → Pages 中选择分支和目录，保存后即可通过 https://username.github.io 访问。

自定义域名：

在仓库根目录创建 CNAME 文件，内容为自定义域名
添加 DNS 解析记录：
- A 记录指向 GitHub Pages IP
- 或 CNAME 记录指向 username.github.io
在 GitHub Pages 设置中绑定自定义域名
开启 HTTPS（自动签发 Let's Encrypt 证书）

Vercel 部署

Vercel 是专业的静态网站托管平台，支持自动构建和部署。

步骤一：导入项目

步骤二：配置构建设置

Vercel 自动识别项目类型，配置构建命令和输出目录：

框架	构建命令	输出目录
Hugo	`hugo`	`public`
Hexo	`hexo generate`	`public`
Next.js	`npm run build`	`.next`
VuePress	`npm run build`	`.vuepress/dist`

步骤三：部署

点击 Deploy，Vercel 自动构建并部署。每次推送代码都会自动触发重新部署。

自定义域名：

在项目 Settings → Domains 中添加自定义域名，Vercel 会自动配置 DNS 和 SSL 证书。

Netlify 部署

Netlify 是另一个流行的静态网站托管平台，功能与 Vercel 类似。

部署步骤：

登录 Netlify，点击"New site from Git"
选择代码仓库
配置构建命令和输出目录
点击 Deploy

netlify.toml 配置文件：

[build]
  command = "hugo --gc --minify"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.121.0"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Cloudflare Pages 部署

Cloudflare Pages 提供免费的静态网站托管，集成 Cloudflare CDN 和安全防护。

部署步骤：

登录 Cloudflare Dashboard，进入 Pages
点击"Create a project"，连接 GitHub 仓库
配置构建设置
部署完成后，可绑定自定义域名

优势：

全球 CDN 加速
免费无限带宽
内置安全防护
支持 Cloudflare Workers

CI/CD 自动化部署

通过 CI/CD 流水线，实现代码提交后自动构建和部署。

GitHub Actions

创建 .github/workflows/deploy.yml：

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: '0.121.0'

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

部署到云服务器

使用 rsync 部署到云服务器：

- name: Deploy to server
  uses: burnett01/rsync-[email protected]
  with:
    switches: -avzr --delete
    path: public/
    remote_path: /var/www/html/
    remote_host: ${{ secrets.SERVER_HOST }}
    remote_user: ${{ secrets.SERVER_USER }}
    remote_key: ${{ secrets.SSH_PRIVATE_KEY }}

部署到 OSS

使用阿里云 OSS 部署：

- name: Setup Aliyun OSS
  uses: manyuanrong/setup-[email protected]
  with:
    endpoint: oss-cn-hangzhou.aliyuncs.com
    access-key-id: ${{ secrets.OSS_ACCESS_KEY_ID }}
    access-key-secret: ${{ secrets.OSS_ACCESS_KEY_SECRET }}

- name: Deploy to OSS
  run: ossutil cp -r -f public/ oss://your-bucket-name/

性能优化

资源压缩

HTML/CSS/JS 压缩：

构建时启用压缩：

hugo --minify
hexo generate --brotli

图片压缩：

使用工具压缩图片：

npm install -g imagemin-cli
imagemin images/* --out-dir=dist/images

缓存策略

配置浏览器缓存：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

location ~* \.(html)$ {
    expires 1h;
    add_header Cache-Control "public, must-revalidate";
}

CDN 加速

将静态资源部署到 CDN，就近响应用户请求：

使用云服务商 CDN（阿里云 CDN、腾讯云 CDN）
使用 Cloudflare、jsDelivr 等免费 CDN
将静态资源托管在对象存储并开启 CDN

预加载和预连接

在 HTML 中添加预加载提示：

<link rel="preconnect" href="https://cdn.example.com">
<link rel="preload" href="/css/main.css" as="style">
<link rel="preload" href="/js/main.js" as="script">

小结

静态网站是个人博客、技术文档等场景的理想选择。本章介绍了静态网站的特点、主流静态网站生成器、多种部署方案以及 CI/CD 自动化部署方法。选择合适的部署方案，可以让你的静态网站快速上线并稳定运行。

下一章，我们将学习动态网站的部署方法，了解如何部署需要后端处理的网站应用。

静态网站的特点​

优势​

局限性​

静态网站生成器​

主流静态网站生成器​

选择建议​

部署方案​

云服务器部署​

对象存储部署​

GitHub Pages 部署​

Vercel 部署​

Netlify 部署​

Cloudflare Pages 部署​

CI/CD 自动化部署​

GitHub Actions​

部署到云服务器​

部署到 OSS​

性能优化​

资源压缩​

缓存策略​

CDN 加速​

预加载和预连接​

小结​