Hugo搭建个人博客（2）：域名访问

Qin Yang
阅读量:
目录

关键字

Hugo，域名，个人博客，反向代理

背景环境

环境：Ubuntu 22

我期望通过域名访问我的个人博客网站。

解决过程

总结

先总结一下解决过程：

  1. 购买一个域名。我购买的域名是 qinyangx.top。为啥是.top 域名呢？主要考虑价格因素。.com，.org，.xyz 我都考虑过，最终选择在最便宜的.org，.xyz 两个中选一个，虽然我觉得.org 酷酷的。经过一些调研以后，我最终选择了.top 域名，因为.xyz 虽然首年比较便宜，但是第二年续费就开始很贵了，而且很多不健康的网站多用.xyz。不要问我为什么知道。ლ(́◕◞౪◟◕‵ლ)
  2. 购买一台云服务器，2 核 2G 就够用了。这样配置的服务器，在国内阿里云，腾讯云，华为云都可以 100 块钱/年拿下，首年估计 50 左右。我手上有两台云服务器，一台华为云，一台腾讯云。华为云便宜首年 49 元，续费最多 99 元/年。腾讯云略贵，在没有活动的情况下，一年 360 元。为啥贵这么多，因为我买的这台在新加坡。(´･ω･`) 最后，我选择把博客部署到新加坡的服务器上。为什么呢？我开始是在两台服务器上都尝试部署，但是在使用华为云的过程中出现了一个问题，域名需要备案！！！很优秀。 我了解了一下，原因大概是域名解析到国内的 IP，如果提供对外访问的话，都需要备案。我了解了一下，备案流程特别麻烦，我个人是这么觉得的。国内服务器的服务能不能不需要备案就能使用域名？我不知道。（这点很重要，没弄好备案，就没法使用域名服务。）但是域名解析国外服务器就没有这个限制。
  3. 在购买域名的平台上配置域名解析，这个很简单，按照提示配置就行。
  4. 方案选择：方案一，启动 hugo server，然后配置 nginx 的反向代理。但是这种方案在实际过程中会遇到一些奇奇怪怪的问题。方案二，使用 hugo 生成博客的静态文件，然后直接把静态文件放到 nginx 中就可以了。先说结论，我最终选择了方案二。因为方案一有些问题，让我很困惑，我没有找到好的解决方案。

方案一

配置 Nginx

配置 Nginx 的反向代理，我提供核心配置：（注释有点多，去掉注释就清晰了）

location / {
    # 反向代理，将匹配到的请求转发到指定的后端服务器。
    proxy_pass http://127.0.0.1:1313;
    # 将客户端的原始 Host 请求头传递给后端。防止后端服务因反向代理而丢失原始域名信息。$host 变量自动获取客户端请求的域名（优先取 Host 头，若不存在则取 server_name）。
    proxy_set_header Host $host;
    # 传递客户端的真实 IP 地址。$remote_addr是客户端的直接IP（如果客户端通过代理访问，此值为最后一个代理的IP）。后端可通过 X-Real-IP 头获取用户真实 IP。
    proxy_set_header X-Real-IP $remote_addr;
    # 记录完整的客户端 IP 链路。X-Forwarded-For 是一个链式头，格式为 客户端IP, 代理1IP, 代理2IP, ...。proxy_add_x_forwarded_for 会自动追加当前请求的客户端 IP 到现有值中。
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    # 告知后端客户端与 Nginx 之间的通信协议（HTTP/HTTPS）。
    proxy_set_header X-Forwarded-Proto $scheme;
    # 传递客户端原始请求的域名。与 Host 头类似，但明确用于标记“原始域名”。
    proxy_set_header X-Forwarded-Host $host;
    传递客户端访问 Nginx 时使用的端口。$server_port 是 Nginx 实际监听的端口（如 80 或 443）。若客户端通过非标准端口访问，需确保此值与实际一致。
    proxy_set_header X-Forwarded-Port $server_port; # 动态获取Nginx监听端口
    try_files $uri $uri/ =404;
}

配置 Hugo

...
# 必须配置，可以解决静态生成的问题。 但是，却不能解决动态服务hugo server的问题。
baseURL = 'http://qinyangx.top/'
# 使用相对URL
relativeurls = true
...

这两个配置的作用？我在实际部署过程中遇到一个问题：

    # hugo 生成的静态文件 index.html 中的一个标签内容
    <a
      class="-translate-y-[1px] text-2xl font-medium"
      href="http://qinyangx.top/"
      >Why Not Today?</a>

    # 通过域名访问，客户端浏览器中元素查看的内容
    <a class="-translate-y-[1px] text-2xl font-medium" href="http://localhost:1313/">Why Not Today?</a>

很明显，这客户端里的 href 链接被替换了。直接导致访问失败，这个问题浪费了很多时间。 上面 index.html 中的 href=“http://qinyangx.top/"，这个用的就是 baseURL 的值。所以配置了 baseURL，静态文件中的 href 内容就是正常的。 把这个打开以后，部分 href 链接将会使用相对位置，比如：

<a class="block text-center text-xl leading-[5rem] lg:text-base lg:font-normal" href="./blog/">文章</a>
<a class="block text-center text-xl leading-[5rem] lg:text-base lg:font-normal" href="./archive/">归档</a>

但是通过以下命令启动，也只是解决部分 href 的问题：

hugo server --bind 0.0.0.0

最后通过在启动命令中添加–baseURL 参数才解决了问题。所以正确的启动命令：

nohup hugo server --baseURL http://qinyangx.top/ --bind 0.0.0.0 --port 1313 > mysite.log 2>&1 &

最后的最后，似乎还是没有解决问题，浏览器生成的链接：

# 通过域名访问，客户端浏览器中元素查看的内容
    <a class="-translate-y-[1px] text-2xl font-medium" href="http://qinyangx.top:1313/">Why Not Today?</a>

没错，客户端浏览器中的 href 链接，域名倒是正确了，但是还有端口号，我始终没有找到解决这个问题的方法。我只能理解 hugo 只是一个高效的静态博客网站的生成器。

方案二

nginx 保持初始配置小改即可

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        # 静态文件目录
        root /var/www/html;

        index index.html;

        server_name qinyangx.top;
}

打包静态文件

# 无法直接执行需要权限
hugo --gc --minify --cleanDestinationDir -d /var/www/html

执行以下命令：

sudo mkdir -p /var/www/html
sudo chown -R $USER:$USER /var/www/html  # 让当前用户拥有所有权

# 直接把静态文件生成到Nginx配置的目录里面
hugo -d /var/www/html  # 无需 sudo 即可写入 或者 hugo --gc --minify --cleanDestinationDir -d /var/www/html

总结

区分 hugo 生产环境和测试环境

  • 在 config.toml 中手动设置生产环境
[params]
  env = "production"  # 手动设置为生产环境
  • 通过 hugo server 构建也是开发模式，最佳实践：
# 正确生产环境构建方式
hugo --minify  # 生成优化后的静态文件

补充 Linux 目录权限的执行

# 查看目录权限
ls -ld /var/www/html

# 输出示例：
drwxr-xr-x 2 ubuntu ubuntu 4096 May 20 10:00 /var/www/html

权限解析：drwxr-xr-x d：目录。 rwx：所有者 ubuntu 有读、写、执行权限。 r-x：组用户有读、执行权限（不可写）。 r-x：其他用户（如 www-data）有读、执行权限。

问题启发，阿巴阿巴

href 链接问题困扰了我很久，两天有吧，我一直在网上找各种资料，不停尝试各种。我觉得我需要甩一个锅，我最近一直在使用 AI 工具 Deepseek，它分析问题也在理，它从缓存，baseURL，nginx 配置等方面分析了这个问题，但是没有考虑从启动参数分析，过程中它也给了我正确的启动参数。只是被我忽略了，最后我还是手动去搜索找到的答案。

我发现我喜欢干一件蠢事，我总是重复去尝试一些方案，期望获得不一样的结果，这很蠢。我之前并没有理解这句话，今天中午看《周期》，一本金融投资相关的书，里面提到了一件很蠢的事情，就是人们对经济活动的记忆时间很短，总是犯同样的错误，而期望得到不同的结果。我发现我解决问题，也喜欢犯这个错误。

我复盘这件事，我在想，我如果把我的操作步骤好好记下来，通过控制变量，我可能会很早就发现，我曾使用过参数。如果，我更了解前端相关的东西，我也许也能很快推断出错误。但是我觉得我的死磕能力还是挺强的，不行我就死磕，一直到问题解决为止。

保持谦逊，保持清醒，保持学习。