什么是静态网站生成器?
简简单的说,静态网站生成器会获取你的内容,并将其应用于模板,然后生成基于 HTML 的静态网站。非常适合个人博客。
好处:
- 快速部署
- 安全(无动态内容)
- 快速迅速
- 使用简单
- 能够进行版本控制
那么,都有哪些流行的静态网站生成器呢?
- Gatsby (React/JS)
- Hugo (Go)
- Next.js (React/JS)
- Jekyll (Ruby)
- Gridsome (Vue/JS)
这些项目在 GitHub 上的知名度非常高。
Hugo 是什么?
其官方网站号称 Hugo 是世界上最快的静态网站引擎。
Hugo 是用 Go 语言编写的,它还有非常丰富的主题系统。
安装 Hugo
Mac:
brew install hugo
Linux:
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-management/front-matter/ 了解更多的配置项。
看看效果:
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/。