我用 Notion 发布了一个云图集，但是 Notion 的 URL 太长了，所以我想在 Hugo 中配置一个短网址。

此类重定向如果是服务端的场景，就是一个经典的面试题目了。不过我的博客是一个纯静态页面，并且也没有什么 KPI 要完成，就怎么简单怎么来了。

首先在 static 目录下创建一个 redirects 目录，然后创建一个 cloud-gallery.html 文件，内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Redirecting to Cloud Gallery...</title>
    <meta http-equiv="refresh" content="0;url=https://ringsaturn.notion.site/1c44ba581cd780308b68e2f3449d7683?v=1c44ba581cd780ffac9f000cbdfb9f66&pvs=74">
    <link rel="canonical" href="https://ringsaturn.notion.site/1c44ba581cd780308b68e2f3449d7683?v=1c44ba581cd780ffac9f000cbdfb9f66&pvs=74">
</head>
<meta>
    <meta name="description" content="Redirecting to Cloud Gallery">
</meta>
<body>
    <p>If your browser does not automatically redirect, please click <a href="https://ringsaturn.notion.site/1c44ba581cd780308b68e2f3449d7683?v=1c44ba581cd780ffac9f000cbdfb9f66&pvs=74">here</a>.</p>
</body>
</html>

这样当 Hugo 构建的时候，这个文件本身就会直接被构建到 public 目录下，浏览器访问的时候就会自动重定向到 Notion 的云图集页面。

访问 URL: http://blog.ringsaturn.me/redirects/cloud-gallery

补记: 2025-04-14

为了能快速批量生成上述 HTML，我编写了 Go 程序进行模版渲染然后写入目录，其中的模版如下:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html lang="{{.Lang}}">
<head>
    <meta charset="UTF-8">
    <meta name=generator content="generate_redirects v0.1.0">
    <meta name=generator:time content="{{.Time}}">
    <title>Redirecting to {{.Title}}...</title>
    <meta http-equiv="refresh" content="0;url={{.To}}">
    <link rel="canonical" href="{{.To}}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<meta>
    <meta name="description" content="Redirecting to {{.Title}}">
</meta>
<body>
    <p>{{.RedirectMessage}} <a href="{{.To}}">here</a>.</p>
</body>
</html>

使用的配置为 YAML 格式:

1
2
3
4
5
6
7
8

global:
  lang: "zh"
  redirect_message: "如果浏览器没有自动跳转，请点击"

redirects:
  - from: /cloud-gallery
    to: https://ringsaturn.notion.site/1c44ba581cd780308b68e2f3449d7683?v=1c44ba581cd780ffac9f000cbdfb9f66&pvs=74
    title: Cloud Gallery