1.基础搭建
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# windows安装
winget install Hugo.Hugo.Extended

# Mac安装
brew install hugo
or
sudo port install hugo

# 创建站点
hugo new site blog

# 初始化
cd blog
git init

# 下载及应用主题，找到喜欢的主题后，可以将其下载到本地并应用到站点中
# 1.如果选择的主题支持git子模块管理，通过以下方式下载，例：
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# 2.如果您选择的主题不支持git子模块管理，则需要手动下载，将其解压到 themes/mytheme 目录下

# 下载完成后在 hugo.yaml 文件中配置主题名称：
theme = "mytheme"

# 创建新的内容文件，例如一篇博客文章:
hugo new content posts/my-first-post.md #这个命令会在 content/posts 目录下创建一个名为my-first-post的Markdown 文件，使用喜欢的文本编辑器进行编辑即可。

# 进行本地预览
hugo serve

### 预览草稿

# 本地预览默认是不渲染草稿的，如果需要查看草稿，需要将 `draft : true` 修改为 `draft : false`,或者在命令中添加渲染草稿的参数：
hugo serve -D

# 打包成一个 /public 文件夹，其中存放生成的静态网站
hugo


2.部署至Vercel，因为Github国内访问不稳定(两种方案)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 不管哪种方案，首次部署都需如下：
1.创建Github仓库
2.跟本地目录连接
(创建本地Git项目 & 创建Github仓库并关联本地项目，亦或是将Github上的现有仓库拉取到本地)

# 创建本地站点后进入站点目录如：blog
cd blog

# 通用命令
git init
git remote add origin git@github.com:your-github-username/your-github-project-name.git # 连接远程仓库，使用SSH或Https都可

git add .  # 将当前文件夹下所有已修改未保存至git的文件标记
git commit -m "First commit" # 来将上述文件的更改保存进git，并以'First commit'来批注
git branch -M main
# 推送至main分支
git push origin main

# 首次部署完后，后续每次网站需要更新时，只需依次执行“标注要保存修改的文件”、“保存修改”、“上传修改”这三个步骤，如：
git add .
git commit
git push
方案一：把生成的public文件夹中的内容推送至Github
1
2
3
4
5
6
7
8
9
10
11
12
cd  public/ # 进入 public 文件夹

git init # 初始化当前文件夹（此处就是 public 文件夹）为一个本地 git 仓库

git remote add origin git@github.com:your-github-username/your-github-project-name.git
# 关联远程仓库。
# 远程仓库地址（github.com:your-github-username/your-github-project-name.git）
# 也可以进入 GitHub 仓库-> Code -> SSH 复制远程仓库地址

git add .
git commit -m "My first commit" 
git push origin main
方案二：把整站源码推送至Github，再使用Vercel
1
2
3
4
5
6
# 配置命令和环境变量
1. 将 `Configure Project -> Framework Preset` 的参数改为 `Hugo`
2. 在 `Configure Project -> Environment Variables` 中添加键值对: `key: HUGO_VERSION, Value: <自己的hugo版本号>` ，具体版本号以自己安装的Hugo版本为准。
3. （这一项是Monochrome主题中提供的命令）勾选 `Configure Project -> Build Command:` 后的 `Override` ，将本项参数改为 `hugo --environment production --minify`
4. （这一项是Monochrome主题中提供的命令）勾选 `Configure Project -> Development Command:` 后的 `Override` ，将本项参数改为 `hugo server --environment production`
5. 按下 `Deploy`稍作等候即可
文件结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
my-blog/
├── content              # 存放所有内容文件
│   ├── _index.md        # 博客首页内容
│   ├── posts            # 博客文章
│   │   ├── first-post.md
│   │   └── second-post.md
│   └── pages            # 博客页面
│       └── about.md     # 关于页面
├── data                 # 存放站点数据
│   ├── authors.yml      # 作者信息
│   └── config.toml      # 站点配置文件
├── i18n                 # 国际化语言文件
│   ├── en.toml          # 英文语言文件
│   └── zh.toml          # 中文语言文件
├── layouts              # 存放页面模板
│   ├── _default         # 默认模板
│   ├── partials         # 模板片段
│   └── index.html       # 首页模板
├── assets               # 存放编译前的资源文件
│   ├── css              # 存放 CSS 源文件
│   ├── js               # 存放 JavaScript 源文件
│   └── images           # 存放图片源文件
├── resources            # 存放生成的资源文件
│   └── _gen             # 生成的资源文件
├── static               # 存放静态资源（如图片、CSS、JS）
│   ├── css              # 存放编译后的 CSS 文件
│   ├── js               # 存放编译后的 JavaScript 文件
│   └── images           # 存放图片文件
├── public               # 生成的网站文件
├── themes               # 存放主题文件
│   └── my-theme         # 自定义主题文件
│       ├── layouts      # 存放页面模板
│       ├── static       # 存放主题静态资源
│       └── theme.toml   # 主题配置文件
├── archetypes           # 内容模板文件
│   ├── default.md       # 默认内容模板
│   └── post.md          # 博客文章模板
└── hugo_build.lock         # Hugo 包管理文件