Short URL in Hugo

I published a cloud gallery using Notion, but the URL is too long. So I want to configure a short URL in Hugo.

If this is a server-side scenario, it is a classic interview question. However, my blog is a pure static page, and there is no KPI to complete, so I just did it in a simple way.

First, create a redirects directory in the static directory, and then create a cloud-gallery.html file, the content is as follows:

 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>

Then when Hugo builds, this file will be directly built into the public directory, and the browser will automatically redirect to the Notion cloud gallery page.

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

Update: 2025-04-14

In order to quickly generate the above HTML, I wrote a Go program to render the template and write it to the directory. The template is as follows:

 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>

The configuration is in YAML format:

1
2
3
4
5
6
7
8
global:
  lang: "en"
  redirect_message: "If your browser does not automatically redirect, please click"

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

Update: 2025-04-14#

Update: 2025-04-14