hugo 初使用
#hugo 初使用
本文记录我如何使用 Hugo 创建博客,并在其中通过 JavaScript 接口动态加载数据的完整流程,包括安装、主题设置、Nginx 配置和最终实现一个调用外部 API 的文章效果。
1. 安装 Hugo
我使用的是 Hugo 的 extended 版本:
1 | wget https://github.com/gohugoio/hugo/releases/download/v0.148.1/hugo_extended_0.148.1_linux-amd64.deb |
2. 创建 Hugo 项目并配置主题
1 | hugo new site hugo-demo |
3. 测试运行
1 | hugo server --bind 0.0.0.0 --baseURL http://10.1.75.228:1313/ --disableFastRender |
4. 创建测试文章并引入动态 JS
1 | hugo new posts/test.md |
- content/posts/test.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20---
title: "测试动态 JS 数据加载"
date: 2025-07-18T10:00:00+08:00
draft: false
---
这是一个测试页面,我们将从 API 接口动态加载数据显示:
<div id="api-result">加载中...</div>
<script>
fetch("https://apis.fushisanlang.cn/apis/v1/jira/pong")
.then(response => response.json())
.then(data => {
document.getElementById("api-result").innerText = "resolved_count: " + data.resolved_count;
})
.catch(error => {
document.getElementById("api-result").innerText = "加载失败: " + error;
});
</script>
同时需要配置 hugo
支持 js
渲染,通过更改配置文件实现。
- hugo.toml
1
2
3
4
5
6
7
8
9baseURL = 'http://10.1.75.228/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true ### 注意:只有 unsafe = true 设置正确时,这个 <script> 标签才会被保留并执行。5. 小结
通过本文的流程,我们成功实现了:
使用 Hugo 快速创建博客
配置支持原生 HTML/JS
通过 JS 动态调用外部 API 展示数据
后续我们还计划将本地 Markdown 编写和 AI 自动清洗、整理结合起来形成一个完整的写作工作流。
同时 hugo
默认支持发布到 s3
、gitlab page
、github page
等,可以一键发布。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 符十三郎!