搭建Hugo博客

使用Github和CloudFlare/Vercel实现Blog网站

Hugo文档
Github

1.创建项目

创建文件夹并将hugo.exe解压
在文件夹内CMD

1
2
hugo.exe new site [your-site-name]
cd [your-site-name]

2.初始化Git仓库

在网站根目录[your-site-name]创建.gitignore文件

 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
# ===== Hugo 核心忽略规则 =====
# 生成目录(默认发布目录)
public/
resources/

hugo.exe
# 主题目录(若主题通过 Git 子模块管理,保留空目录)
# themes/     # 🔴 注意:若主题是子模块,不要忽略 themes/

# ===== 开发环境文件 =====
# Hugo 配置缓存
.hugoauthor   # 作者信息缓存
hugo_stats.json # Hugo 模块统计文件

# 开发工具文件
.idea/        # JetBrains IDE
.vscode/      # VS Code 配置
.DS_Store     # macOS 系统文件

# ===== 临时文件 =====
*.tmp         # 临时文件
*.log         # 日志文件
*.bak         # 备份文件

# ===== Node.js 项目补充(如使用 npm 包) =====
# 若项目中包含前端构建(如 Webpack)
node_modules/
package-lock.json
yarn.lock
dist/

3.选择主题并运行项目

选择一个喜欢的主题
找到这个主题的Git链接,将其添加到子项目,在网站根目录执行

1
2
git init
git submodule add [theme-github-link] themes/[theme-name]

根据主题提供的示例配置文件,配置主题的参数
编译并在本地运行

1
hugo server

将仓库推送到Github

4.使用CF Pages/Vercel托管网站

直接从Github导入仓库并选择Hugo框架部署即可,需要注意的时,Vercel的Hugo版本过低,需要在Environment Variables指定版本较新的编译器才行 img

img