Hugo是由Go语言实现的静态网站生成器。简单、易用、高效、易扩展、快速部署。

一、安装Hugo

推荐使用使用二进制安装，这样简单、快速，具体操作如下：

访问 Hugo Github Release Page 下载对应操作系统版本的Hugo二进制文件。
将下载的二进制文件解压至本地夹文件中。推荐添加 hugo.exe 路径到系统环境变量 PATH 中，方便后续使用
最后通过cmd或bash测试 hugo 是否可正常运行。如下，在windows环境中的测试结果。

D:\blogs\hugo>hugo version
hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio
.....

二、创建新站点

可使用 Hugo 命令快速生成站点（如下：“D:\blogs\hugo” 是我自定义的站点路径，可根据需要进行随意调整）

C:\Users\antho>hugo new site D:\blogs\hugo
Congratulations! Your new Hugo site is created in D:\blogs\hugo.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

创建完成后，我们可以进入站点目录看看都有些什么：

D:\blogs\hugo>dir

2022/11/01  11:08    <DIR>          archetypes
2022/11/01  11:08                82 config.toml
2022/11/01  11:08    <DIR>          content
2022/11/01  11:08    <DIR>          data
2022/11/01  11:08    <DIR>          layouts
2022/11/01  11:08    <DIR>          public
2022/11/01  11:08    <DIR>          static
2022/11/01  11:08    <DIR>          themes
               1 个文件             82 字节
               9 个目录 346,668,224,512 可用字节

archetypes ：内容模板目录，该目录中有一个default.md文件，后续所有使用 hugo new 命令创建的 md 文件都将以该文本为模板来生成。
config.toml：配置文件（很关键，后面会经常用到），包括站点标题、域名地址、主题名称、网站语言等站点参数均在此文件中进行配置。
content：内容目录，站点中的 md 文件会通过对应的模板生成静态页面。
data：数据目录，用于存储站点所需的结构化数据，可以用 YAML、JSON 或 TOML 格式编写数据文件，站点中可以用 .Site.Data.xxxx 的方式来获取数据。
layouts：网站模板目录，包括主页模版、单页模板、列表模版、分类模版、模块模版等
static：静态文件目录，包括 image ，css ， js 等
themes：主题目录。

三、选择主题

可以从 Hugo 主题网站中下载自己喜欢的主题。这里我选择的主题是 beautifulhugo ，下载命令如下：

git init
git submodule add https://github.com/halogenica/beautifulhugo.git themes/beautifulhugo

然后，打开前文所述的 config.toml 文件，添加主题配置项 theme = "beautifulhugo" ，如下：

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = "beautifulhugo"

更多配置项请参考所选主题的说明文档。

四、编写第一篇文章

命令行切至站点目录下，输入如下命令，创建一篇文章。

hugo new post/hello_hugo.md

使用 vs code 编写 markdown 文件（PS：我个人比较习惯使用 vs code ，大家也可以选择自己喜欢的 markdown 文件编辑软件）

---
title: "Hello_hugo"
date: 2022-11-01T15:27:07+08:00
draft: false
---

### Hello Hugo
 1. aaa
 2. bbb
 3. ccc

md 文件头部两行 --- 包括的内容是文章的描述信息。其中 draft 属性标识该文章是否为草稿（默认true），如果确认文章已编辑完成，可将其修改为false，这样 Hugo 才会将其转换成 html 使其在站点中显示（如果 hugo 命令添加 -D/--buildDrafts 参数也可以将草稿文章渲染至站点中）。

五、启动 Hugo 服务，查看站点

输入命令启动 Hugo 服务，如下：

D:\blogs\hugo>hugo server -w
Start building sites …
hugo v0.105.0-0e3b42b4a9bdeb4d866210819fc6ddcf51582ffa windows/amd64 BuildDate=2022-10-28T12:29:05Z VendorInfo=gohugoio

                   | EN
-------------------+------
  Pages            |  10
  Paginator pages  |   0
  Non-page files   |   0
  Static files     | 184
  Processed images |   0
  Aliases          |   2
  Sitemaps         |   1
  Cleaned          |   0

Built in 1250 ms
Watching for changes in D:\blogs\hugo\{archetypes,content,data,layouts,static,themes}
Watching for config changes in D:\blogs\hugo\config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

启动命令后添加参数 -w ，服务将监测文件夹 archetypes,content,data,layouts,static,themes 以及 config.toml 文件的变化，发生变化时将及时更新站点。

六、生成静态页面

输入命令 hugo -D 将生成静态页面。默认情况下静态页面均放置在 public 目录中

七、自定义JS和CSS

如果希望在主题的基础上再添加一些自定义的css样式或在js代码，千万不要直接编辑这些文件 。推荐的做法是：

首先，在站点所用的主题目录下找到 themes/theme-name/layouts/partials 文件夹，其中会有一些 HTML 模板文件。例如，我使用的主题 beautifulhugo 中就包含 footer_custom.html 、head_custom.html 这两个文件。我们将这两个文件拷贝至主站点的 layouts/partials/ 文件夹下。此处一定要注意的是，拷贝文件在主站点的存放目录层级一定要与其在主题目录下保持一致。

然后，在主站点的 static 创建自定义的css或js文件，并添加自定义的内容。例如：css文件的路径为 static/css/custom.css 。

接着，在主站点的配置文件 config.toml 中将自定义的css文件添加至 Params 中。

[Params]
   custom_css = ["custom.css"]   # if ['custom.css'], load '/static/css/custom.css' file

最后，在第一步中的 head_custom.html 文件中添加如下代码，以便将自定义的css文件引入 html 页面中。

{{ range .Site.Params.custom_css -}}
   <link rel="stylesheet" href="{{ . | absURL }}">
{{- end }}

现在，自定义的css样式就会在站点所有页面中生效。

八、参考网址

01 : Hugo quick-start
02 : 学习HUGO ，详解目录结构
 03 : 使用Hugo搭建静态站点
 04 : Hugo搭建博客
 05 : hugo最好用的静态网站生成器
 06 : Hugo + github 搭建个人博客

标签：11,文件,hugo,Hugo,博客,站点,css,页面
From： https://www.cnblogs.com/maple-gis/p/16852862.html

Hugo生成博客静态页面