我的博客全家桶方案：网关路由与多实例跳转实现

2025-12-21

OK，这是一次通过网关实现的简单实践。

如今市面上有太多眼花缭乱的技术栈可以用来搭博客了。过去我用了将近 5 年的 hexo，如今我想使用 wordpress 。还有 hugo，halo 等等。

这些不同的框架各有好处的同时，还有丰富的主题可以选择。

我个人的主题也是换了又换，从最早的 kratos ，到 icarus 再到 fluid。最近迷上了 wordpress 这里的国产开源主题 puock 。

So，just do it.

想要享受到所有的这些设计和体验，网关的反向代理可以帮助我们实现这一目的。

最初想的时候很简单，直接部署多个站点就完事儿了。

想想有点 low，改改代码跳一下就完事了。干脆都放在一个域名下得了，可以省不少钱。

简单计划一下：

部署多个博客实例
给每个实例加个功能，让不同博客实例的内容头可以随意指定 URL 跳转
反向代理分配不同的子路径给次要实例

技术选型是 Caddy，最近 SSL 管理机构表示未来将逐步减少证书有效期，会把最大有效期减少至约 47 天。

我很早就从 nginx 切换到了 Caddy，原因是阿里云不再提供免费证书了。

记得偶然一次技术冲浪，我发现 Caddy 可以自动申请 SSL 证书，于是我在摸鱼的时候稍微翻了翻 Caddy 的文档。

相比 nginx 他的配置更简单。

我最初接入的两个博客实例分别是 wordpress 和 hexo 。

让 wordpress 支持点击文章跳转到第三方链接

一番搜索，我发现了 wordpress 提供了自定义字段，可以实现这个场景。

进入文章编辑页面，在右上角打开显示选项的 tab，勾选自定义字段。

在页面下方添加一个字段，比如说叫 redirect_to，值填一个 url 。

比如说我的主博客实例部署在 master.com，次要实例 1 部署在 master.com/s1/ ，则填 https://master.com/s1/

接下来修改当前主题文件的 template ，以 puock 为例，找到在首页上显示的文章头的元素模板为 templates/module-post.php

找到对应的 a 标签，将 href 后的内容修改为：

1<?php 
2$redirect_to = get_post_meta( get_the_ID(), 'redirect_to', true );
3$link = $redirect_to ? $redirect_to : the_permalink();
4echo $link ?>"><?php the_title() 
5?>

代码大意就是如果有 redirect_to 字段，就把文章链接改为 redirect_to 的值。

其他的比如 header bar 互相在实例之间跳转，就不做了，对于 wordpress 来说这个很简单。

让 hexo 实现跳转

由于 hexo 是 markdown 语法的，markdown 有文档头也就是 hexo 官方文档上的 Front-matter，因此我们做一个约定，也叫 redirect_to

参考文档：https://hexo.io/zh-cn/docs/variables

hexo 可以通过页面变量 page 来获取到这个 redirect_to

我是先改的 fluid 主题的实例，观察一下，发现文章标题是一个 index-header 类，那么就很好定位了：layout/index.ejs

接下来也是改 template

// 原代码
<a href="<%= post_url %>" target="<%- theme.index.post_url_target %>">
  <%= post.title %>
</a>

// 修改后
<% var redirect_to = post.redirect_to ? post.redirect_to : post_url %>
<a href="<%= redirect_to %>" target="<%- theme.index.post_url_target %>">
  <%= post.title %>
</a>

hexo 的 navbar 跳转，大多主题都有支持，同样也可以直接改模板写死。

让 hugo 实现跳转

其实我也是因为这篇文章才开始去使用 hugo 的，hugo 的文档读起来有一些困难，而且我还是个 golang rookie

出于经验和对模板生成这一最佳实践的信任，花了大概 1.5 h 的时间读了下 hugo 的官方文档，最后发现其实和 hexo 用同样的思路就可以解决。

定义 front-matter
学习 hugo 获取 front-matter 的方式
修改主题使用的 go-template 语法

Params

以 hugo-theme-stack 为例

我修改了以下文件：

layouts/partials/article/components/header.html
layouts/partials/article/components/details.html

details.html

 1<div class="article-title-wrapper">
 2    <h2 class="article-title">
 3        {{ if .Params.redirect_to }}
 4        <a href="{{ .Params.redirect_to }}">
 5            {{ else }}
 6            <a href="{{ .RelPermalink }}">
 7                {{ end }}
 8                {{- .Title -}}
 9            </a>
10    </h2>
11</div>

header.html

1<div class="article-image">
2    {{ if .Params.redirect_to }}
3    <a href="{{ .Params.redirect_to }}">
4        {{ else }}
5        <a href="{{ .RelPermalink }}">
6            {{ end }}

简单观察一下交互行为，替换掉原来注入 href 的值即可。查阅官方文档得到获取 front-matter 的 api 即可。

网关

我还是思考了一下的，把 hexo 实例代理到 /s1/*，那么会有一些问题，css / js 该怎么处理呢？

好在官方文档早已想到了这样的问题：

参考文档：配置 | Hexo

通过修改 _config.yml 中的 url & root 可以解决这个问题，

因为是部署到 master.com/s1/ 那么我们直接把 root 改为 /s1/ 即可。

我们假设 wordpress 部署在 11111，hexo 部署在了 22222

1myblog.com {
2    reverse_proxy :11111
3
4    handle /s1/* {
5        reverse_proxy :22222 
6    }
7}

我不会告诉你，我因为网关缓存，以及画蛇添足的 SSL 问题导致，我研究了 4 个小时的 308 强制重定向问题。