静态网站是近年来重新流行的建站方式，不需要服务器和数据库，页面都是预先生成的HTML文件，速度极快、安全性高、成本极低（甚至免费）。这篇教程教你用Hugo或Hexo搭建静态网站并免费部署。
一、静态网站概述
| 静态网站 | 动态网站（WordPress等） | |
|---|---|---|
| 原理 | 预先生成HTML文件，用户访问直接返回文件 | 每次访问动态查询数据库生成HTML |
| 速度 | 极快（直接返回文件，毫秒级） | 较慢（需要查询数据库和执行PHP） |
| 安全性 | 极高（没有数据库和后端，无法注入） | 较低（有数据库和登录，存在攻击面） |
| 成本 | 极低（免费托管即可） | 需要服务器（约¥100+/年） |
| 维护 | 几乎不需要维护 | 需要定期更新核心、主题、插件 |
| 功能 | 有限（评论、搜索需要第三方服务） | 功能丰富（插件生态强大） |
| 更新方式 | 本地写Markdown，重新生成部署 | 后台在线编辑器，即时发布 |
| 适合 | 博客、文档、作品集、企业官网、工具站 | 需要频繁更新、用户互动、复杂功能的网站 |
• 速度极快：纯HTML文件，CDN全球加速，访问速度毫秒级
• 安全性高：没有数据库和后端，几乎没有被黑的可能
• 成本极低：可以免费部署到Cloudflare Pages/Vercel/GitHub Pages
• 维护简单：不需要更新程序、不需要备份数据库
• 可移植性强：纯静态文件，可以部署到任何地方
• 版本控制：用Git管理内容，历史版本可追溯
二、静态生成器选择
| 生成器 | 语言 | 构建速度 | 学习成本 | 主题生态 | 推荐指数 |
|---|---|---|---|---|---|
| Hugo | Go | 极快（毫秒级） | 中等 | 丰富 | ⭐⭐⭐⭐⭐ 最推荐 |
| Hexo | Node.js | 快 | 低（中文文档好） | 非常丰富（中文主题多） | ⭐⭐⭐⭐⭐ 中文用户推荐 |
| Jekyll | Ruby | 中等 | 中等 | 丰富（GitHub原生支持） | ⭐⭐⭐ 开发者 |
| Next.js | React/Node.js | 快 | 高（需要React基础） | 灵活 | ⭐⭐⭐ 前端开发者 |
| VuePress | Vue.js | 快 | 中等 | 文档主题为主 | ⭐⭐⭐ 文档站 |
新手/中文用户：推荐Hexo，中文文档和教程丰富，主题多，容易上手
追求速度/大量内容：推荐Hugo，构建速度极快，适合内容多的网站
开发者/熟悉Ruby：Jekyll，GitHub Pages原生支持
前端开发者/需要交互：Next.js，功能最灵活
三、Hugo建站教程
- 安装Hugo：
- Windows：下载Hugo二进制文件（https://github.com/gohugoio/hugo/releases），解压后将hugo.exe所在目录添加到系统PATH
- Mac：brew install hugo
- Linux：sudo apt install hugo（或下载二进制文件）
- 验证安装：打开终端输入 hugo version，显示版本号即安装成功
- 创建网站：
hugo new site my-blog cd my-blog
- 安装主题：
- 访问Hugo主题库（https://themes.gohugo.io/）选择喜欢的主题
- 推荐主题：PaperMod（简洁博客）、LoveIt（功能丰富）、Ananke（官方推荐）
- 以PaperMod为例：
git init git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod echo "theme = 'PaperMod'" >> hugo.toml
- 配置网站：编辑 hugo.toml（或 config.toml），设置网站标题、描述、作者、菜单等：
baseURL = 'https://example.com/' languageCode = 'zh-cn' title = '我的博客' theme = 'PaperMod' [params] author = '我的名字' description = '这是我的个人博客' [menu] [[menu.main]] identifier = 'home' name = '首页' url = '/' weight = 1 [[menu.main]] identifier = 'archives' name = '归档' url = '/archives/' weight = 2 - 创建第一篇文章：
hugo new posts/first-post.md
编辑 content/posts/first-post.md，在 front matter 之间写文章标题，下面用Markdown写内容：--- title: "第一篇文章" date: 2026-09-07T10:00:00+08:00 draft: false tags: ["随笔"] categories: ["生活"] --- 这是我的第一篇博客文章。 ## 二级标题 正文内容...
- 本地预览：
hugo server -D
浏览器访问 http://localhost:1313 查看网站效果 - 生成静态文件：
hugo
生成的静态文件在 public/ 目录下，这些就是可以部署的网站文件
四、Hexo建站教程
- 安装Node.js：Hexo基于Node.js，先安装Node.js（https://nodejs.org/，推荐LTS版本）
- 安装Hexo：
npm install -g hexo-cli
- 创建网站：
hexo init my-blog cd my-blog npm install
- 安装主题：
- Hexo主题库：https://hexo.io/themes/
- 推荐主题：Butterfly（功能丰富，中文用户多）、NexT（经典简洁）、Yilia（简洁美观）
- 以Butterfly为例：
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
修改站点配置文件 _config.yml，把 theme 改为 butterfly
- 配置网站：编辑 _config.yml，设置标题、描述、作者、URL等：
title: 我的博客 subtitle: '分享技术与生活' description: '这是我的个人博客' keywords: 博客,技术 author: 我的名字 language: zh-CN timezone: 'Asia/Shanghai' url: https://example.com theme: butterfly
- 创建文章：
hexo new "第一篇文章"
编辑 source/_posts/第一篇文章.md，用Markdown写内容 - 本地预览：
hexo server
浏览器访问 http://localhost:4000 查看效果 - 生成静态文件：
hexo clean && hexo generate
生成的文件在 public/ 目录下
五、部署到免费托管
静态网站可以免费部署到多个平台，推荐Cloudflare Pages（无限带宽、全球CDN）。
- 注册GitHub账号（如果没有），创建一个新仓库（如 my-blog）
- 将本地网站推送到GitHub：
git init git add . git commit -m "initial commit" git branch -M main git remote add origin https://github.com/你的用户名/my-blog.git git push -u origin main
- 注册Cloudflare账号（https://dash.cloudflare.com/）
- 创建Pages项目：
- 左侧菜单 → Workers & Pages → Create application
- 选择 Pages 选项卡 → Connect to Git
- 授权GitHub账号，选择刚才创建的仓库
- 点击 Begin setup
- 构建设置：
- Hugo项目：
- Framework preset：Hugo
- Build command：hugo
- Build output directory：public
- Environment variables：添加 HUGO_VERSION = 0.120.0（指定版本）
- Hexo项目：
- Framework preset：Hexo
- Build command：npm run build
- Build output directory：public
- Hugo项目：
- 点击 Save and Deploy，等待构建完成（通常1-2分钟）
- 部署成功后获得 https://项目名.pages.dev 免费域名
- 绑定自定义域名：项目设置 → Custom domains → 添加自定义域名，按提示在DNS中添加CNAME记录
- 自动部署：以后每次 git push 到GitHub，Cloudflare Pages会自动重新构建部署，非常方便
Vercel：类似Cloudflare Pages，国内访问速度较快，支持Hugo/Hexo，自动部署
Netlify：老牌静态托管，功能丰富，拖拽上传也可以
GitHub Pages：GitHub原生支持，免费稳定，但国内访问较慢
Gitee Pages：国内平台，访问速度快，但需要实名认证，有广告
六、静态站SEO与FAQ
6.1 静态网站SEO
- 生成sitemap.xml：Hugo和Hexo都有sitemap插件，自动生成站点地图，提交到百度站长和Google Search Console
- 生成robots.txt：在static目录下创建robots.txt，允许搜索引擎抓取
- 固定链接结构：设置简洁的URL结构（如 /posts/文章名/），包含关键词
- 页面标题和描述：每篇文章设置唯一的title和description，包含关键词
- 结构化数据：主题通常支持Article、Breadcrumb等Schema结构化数据
- 内容更新：定期发布优质内容，静态站内容更新后需要重新构建部署
- 外链建设：和动态站一样，需要外链提升权重
6.2 静态站评论功能
静态网站没有后端，评论需要第三方服务：
- Giscus：基于GitHub Discussions的评论系统，免费开源，推荐
- Utterances：基于GitHub Issues的评论系统，轻量简洁
- Waline：基于Valine的增强版，支持表情、点赞、通知，需要后端（可以用免费的云开发）
- Disqus：国外最流行的评论系统，国内访问不稳定
- 畅言/多说：国内评论系统，部分已停止服务
Q：静态网站可以做搜索功能吗？
A：可以，有几种方案：①使用Algolia DocSearch（免费，需要申请）；②使用本地搜索插件（Hugo/Hexo都有，生成索引文件在浏览器端搜索）；③使用Google自定义搜索（CSE）；④使用第三方搜索服务。对于内容不多的博客，本地搜索足够用。
Q：静态网站可以做联系表单吗？
A：可以，使用第三方表单服务，如Formspree（免费版每月100次提交）、Getform、Formspree等。在HTML中添加表单，action指向服务提供的URL，提交后发送到你的邮箱。
Q：静态网站更新文章麻烦吗？
A：刚开始可能觉得麻烦，但习惯后很高效。在本地用Markdown写文章，git push后自动构建部署，整个过程不到1分钟。而且可以用你喜欢的任何编辑器写文章，不需要登录后台。对于更新不频繁的博客和文档站非常合适。
Q：Hugo和Hexo哪个更好？
A：各有优势。Hugo用Go语言编写，构建速度极快（几千篇文章也是秒级构建），单二进制文件不需要依赖。Hexo用Node.js，中文文档和教程丰富，主题生态好，中文用户多，更容易上手。新手推荐Hexo，追求速度和大量内容推荐Hugo。
Q：静态网站可以做电商吗？
A：可以但不适合。静态网站可以展示商品，支付可以用第三方支付链接或Stripe Payment Links，但购物车、订单管理、用户系统等复杂功能很难实现。电商网站还是用WordPress+WooCommerce或专门的电商系统更合适。