时间：2023-04-19 13:02:51 点击次数：14
简简单的说，静态网站生成器会获取你的内容，并将其应用于模板，然后生成基于 HTML 的静态网站。非常适合个人博客。
好处：
快速部署
安全（无动态内容）
快速迅速
使用简单
能够进行版本控制那么，都有哪些流行的静态网站生成器呢？
Gatsby (React/JS)
Hugo (Go)
Next.js (React/JS)
Jekyll (Ruby)
Gridsome (Vue/JS)其官方网站号称 Hugo 是世界上最快的静态网站引擎。
Hugo 是用 Go 语言编写的，它还有非常丰富的主题系统。
Mac:
brew install hugoLinux:
sudo apt-get install hugo 或者 sudo pacman -Syu hugo然后执行下面的命令检查是否安装成功：
hugo version创建一个新项目：
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 就能看到你的网站了。
我们在之前应用了一个主题。现在，如果我们检查 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/。
