什么是静态网站生成器？
简简单的说，静态网站生成器会获取你的内容，并将其应用于模板，然后生成基于 HTML 的静态网站。非常适合个人博客。
好处：
- 快速部署
- 安全（无动态内容）
- 快速迅速
- 使用简单
- 能够进行版本控制
那么，都有哪些流行的静态网站生成器呢？
- Gatsby (React/JS)
- Hugo (Go)
- Next.js (React/JS)
- Jekyll (Ruby)
- Gridsome (Vue/JS)
这些项目在 GitHub 上的知名度非常高。
Hugo 是什么？
其官方网站号称 Hugo 是世界上最快的静态网站引擎。
Hugo 是用 Go 语言编写的，它还有非常丰富的主题系统。
安装 Hugo
Mac:
brew install hugoLinux:
sudo apt-get install hugo
或者
sudo pacman -Syu hugo然后执行下面的命令检查是否安装成功：
hugo version使用Hugo
创建一个新项目：
hugo new site my-project下载一个主题。可以在 https://themes.gohugo.io/ 找到更多你喜欢的主题。
cd my-project
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke将主题添加到配置文件。
echo 'theme = "ananke"' >> config.toml添加一篇文章。
hugo new posts/my-first-post.md它看上去应该像这样：
---
title: "My First Post"
date: 2021-03-10T18:37:11+08:00
draft: true
---
Hello World!可以在这里给文章添加添加更多属性配置（标签，描述，类别，作者）。
可以在 https://gohugo.io/content-man... 了解更多的配置项。
看看效果：
hugo server -D在浏览器中打开 http://localhost:1313 就能看到你的网站了。
Hugo 的目录结构
.
├── archetypes
├── assets (not created by default)
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes- archetypes：Archetypes 是内容模板文件，其中包含预配置的首选项（日期、标题、草稿等）。可以用自定义的预配置前端字段创建新的原型。
- assets：Assets 文件夹存储所有文件，这些文件由 Hugo Pipes 处理（例如 CSS/Sass 文件）。默认不创建这个目录。
- config.toml：Hugo 使用
config.toml、config.yaml或config.json（可以在网站根目录中找到）作为默认网站配置文件。除了单独的配置文件之外，你还可以使用 config directory 来分隔不同的环境。 - content：所有内容文件放在这里。顶级文件夹计为内容部分。如果你有
devops和nodejs部分，那么你需要有content/devops/first-post.md和content/nodejs/second-post.md目录。 - data：这里用来存储配置文件，Hugo 会在生成你网站时用到。
- layouts：以
.html文件的形式存储模板。有关更多信息，请参见Styling部分。 - static：存储所有静态内容：图片、CSS、JavaScript 等。当 Hugo 创建你的网站时，static 目录中的所有资源均按原样复制。
- themes：你所选择的 Hugo 主题。
修改静态网站的样式
我们在之前应用了一个主题。现在，如果我们检查 themes 文件夹，可以看到样式文件。
但是要当心！
千万不要直接编辑这些文件！。
应该将主题目录结构复制到 layouts 文件夹。
假设我要将自定义 CSS 应用于主题。
主题有一个 themes/theme-name/layouts/partials 文件夹，可以在其中找到一些HTML模板（header.html、footer.html）。现在我们将编辑 header.html 模板，将内容从这个文件复制到 layouts/partials/header.html 中，并注意在主题 layouts 根目录中创建与主题相同的目录结构。
layouts/partials/header.htmlss
themes/theme-name/layouts/partials/header.html创建一个自定义CSS文件： static/css/custom-style.css，然后把自定义 CSS 文件添加到 config.toml 中：
[params]
custom_css = ["css/custom-style.css"]打开 layouts/partials/header.html：
将这段代码添加到 <head> 标签内：
{{ range .Site.Params.custom_css -}}
<link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}现在，就可以覆盖主题中所应用的 CSS 类。
构建静态网站
在项目的根目录下执行 hugo 命令：
>>> hugo
| EN
-------------------+-----
Pages | 14
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 6
Sitemaps | 1
Cleaned | 0
Total in 74 ms执行成功后，会生成一个public 目录，这个目录中的内容就是我们静态网站的所有内容。
然后就可以托管到 GitHub 或 OSS 中了。
Hugo 还提供了更多的内容，可以到官方文档查看：https://gohugo.io/documentation/。
本文首发微信公众号：前端先锋
欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章
欢迎继续阅读本专栏其它高赞文章：
- 深入理解Shadow DOM v1
- 一步步教你用 WebVR 实现虚拟现实游戏
- 13个帮你提高开发效率的现代CSS框架
- 快速上手BootstrapVue
- JavaScript引擎是如何工作的？从调用栈到Promise你需要知道的一切
- WebSocket实战：在 Node 和 React 之间进行实时通信
- 关于 Git 的 20 个面试题
- 深入解析 Node.js 的 console.log
- Node.js 究竟是什么？
- 30分钟用Node.js构建一个API服务器
- Javascript的对象拷贝
- 程序员30岁前月薪达不到30K，该何去何从
- 14个最好的 JavaScript 数据可视化库
- 8 个给前端的顶级 VS Code 扩展插件
- Node.js 多线程完全指南
- 把HTML转成PDF的4个方案及实现
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。