ᕕ( ᐛ )ᕗ Jimyag's Blog

Cloudflare Pages Hugo 部署：解决静态文件中文乱码与无法预览的问题

我的博客中使用的是 Hugo 静态网站生成器，部署在 Cloudflare Pages 上，在某些博客中，我会提供一些配置文件以及脚本文件。

默认情况下，在浏览器中打开这些文件的 URL 时会自动下载，当我想要先预览这些文件，如果没有问题我再主动下载。

如何解决

在 Hugo 静态文件夹中添加一个 _headers 文件，这个文件是用来配置 Cloudflare Pages 的。

1
2

# 在静态文件夹中添加 _headers 文件
touch _headers

1
2
3
4
5
6
7
8
9

# _headers 文件内容
/*.sh
  Content-Type: text/plain; charset=utf-8
  X-Content-Type-Options: nosniff


/*.conf
  Content-Type: text/plain; charset=utf-8
  X-Content-Type-Options: nosniff

配置完成后，重新部署项目，就可以在浏览器中预览这些文件了。

为什么配置了 _headers 文件后，就可以在浏览器中预览这些文件？

没有配置 _headers 文件时，Cloudflare Pages 中，访问 .sh 和 .conf 会响应为：

1
2

Content-Type: application/octet-stream
X-Content-Type-Options: nosniff
  • application/octet-stream：表示“通用二进制流”，浏览器无法确定内容类型。出于安全考虑，它会选择 下载文件 而不是直接显示。
  • X-Content-Type-Options: nosniff：禁止浏览器进行 MIME 类型嗅探，浏览器不能去猜测这是文本文件，因此无法直接渲染。

而当我们通过 _headers 显式指定：

1
2

Content-Type: text/plain; charset=utf-8
X-Content-Type-Options: nosniff
  • 浏览器会明确知道这是 纯文本文件，并且使用 UTF-8 编码。
  • 因此文件可以在浏览器中直接显示，不会触发自动下载，同时中文也能正常渲染。
  • 注意：Content-Type 的值必须包含 charset=utf-8 参数，如果不包含，遇到中文会乱码。

参考：

#Cloudflare Pages #Hugo

目录