时间：2023-10-12 10:12:01 | 来源：网站运营
时间：2023-10-12 10:12:01 来源：网站运营
10分钟用Hugo打造一个静态网站：快速部署那么，都有哪些流行的静态网站生成器呢？
安全（无动态内容）
快速迅速
使用简单
能够进行版本控制
Gatsby (React/JS)
Hugo (Go)
Next.js (React/JS)
Jekyll (Ruby)
Gridsome (Vue/JS)
在线咨询
brew install hugoLinux:sudo apt-get install hugo或者sudo pacman -Syu hugo然后执行下面的命令检查是否安装成功：hugo versionhugo new site my-project下载一个主题。可以在 https://themes.gohugo.io/ 找到更多你喜欢的主题。cd my-projectgit initgit 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:00draft: true---Hello World!可以在这里给文章添加添加更多属性配置（标签，描述，类别，作者）。hugo server -D在浏览器中打开 http://localhost:1313 就能看到你的网站了。├── archetypes├── assets (not created by default)├── config.toml├── content├── data├── layouts├── static└── themesconfig.toml、config.yaml 或 config.json（可以在网站根目录中找到）作为默认网站配置文件。除了单独的配置文件之外，你还可以使用 config directory 来分隔不同的环境。devops 和 nodejs 部分，那么你需要有 content/devops/first-post.md 和 content/nodejs/second-post.md 目录。.html 文件的形式存储模板。有关更多信息，请参见 Styling 部分。themes 文件夹，可以看到样式文件。千万不要直接编辑这些文件！。应该将主题目录结构复制到
layouts 文件夹。themes/theme-name/layouts/partials 文件夹，可以在其中找到一些HTML模板（header.html、footer.html）。现在我们将编辑 header.html 模板，将内容从这个文件复制到 layouts/partials/header.html 中，并注意在主题 layouts 根目录中创建与主题相同的目录结构。layouts/partials/header.htmlssthemes/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 目录，这个目录中的内容就是我们静态网站的所有内容。关键词：静态,打造
