【unraid陪玩】记录在unraid下部署hugo博客

☀️HOMELAB一定要有服务☀️

博主是一个爱折腾的人，但是很多东西都只是玩玩而已，包括这个写博客也没有坚持下来，很多东西弄完之后就没再碰过，也觉得可惜，就比如前几天照着开源的教程打板焊接了一个磁带播放器，成功之后就一直放着不玩了。

既然只玩一次，就想要至少记录一下，于是就再次拾起了博客。几年前在Github上部署过hexo博客，再托管到netlify上，可惜没写过内容，只是觉得部署着好玩，几年过去了，博主现在沉迷NAS ALL IN BOOM，自家部署的unraid主机还没怎么用起来，就想着在上面部署一个博客，从需求上来看选择部署静态博客，相比hexo我选择了更新的hugo框架，是因为hexo部署过了喜新厌旧，也是因为Hugo依靠Go语言进行开发，会有比Hexo更快的部署速度。

实际上完全可以在github page上部署，所以说是脱裤子放屁，但部署在unraid的还是有几点好处

借助nas的smb共享和unraid的User Script可以脱离命令行写代码，专心于书写，也不用再多部署一个CMS在网页上写，我现在就是在typora上打开就写，比较舒服

直接用typora写

撰写内容的方法不经过云服务器提供者（？），满足网络洁癖
剩下还有什么好处我也想不到了，好玩是挺好玩的

部署思路

  %%{init: {'theme':'neutral'}}%%
graph TD
    subgraph Internet[公网环境]
        A[终端用户] -->|HTTPS 443| B(Caddy服务器<br>img.daikonsushi.me<br>100.88.45.67:443)
    end

    subgraph Tailscale[加密组网]
        B -->|Tailscale加密通道<br>100.73.23.15:1313| C[Unraid服务器]
    end

    subgraph Unraid[Unraid系统]
        C --> D[Hugo容器1313端口]
        C --> E[Tailscale客户端<br>100.73.23.15]
        C --> F[Docker引擎]
    end

    subgraph Data[数据流向]
        A -->|用户访问域名| B
        B -->|Caddy反向代理| C
        C -->|Tailscale路由| D
        D -->|返回静态内容| A
    end

    style A fill:#90CAF9,stroke:#42A5F5
    style B fill:#81C784,stroke:#4CAF50
    style C fill:#FFB74D,stroke:#FFA726
    style D fill:#E57373,stroke:#EF5350
    style E fill:#64B5F6,stroke:#2196F3
    style F fill:#BA68C8,stroke:#9C27B0

由于unraid没有一个正经包管理器，最适合部署应用的方法就是使用docker，如框图所示, 通过tailscale和caddy反代，实现了全链路SSL/TLS加密。同时通过tailscale，不要求家里的unraid有公网ip，尽管我有一个公网的ipv6，但出于隐私考虑，通过caddy反向代理，用户不会知道家里的ip是多少✍️✍️✍️

开始部署

基于unraid 7.0，具体操作可能与您不同

安装tailscale

Community Applications提供有官方的tailscale，我选择了插件版，tailscale是一个基于wireguard的内网穿透工具，tailscale很强大，很易用，我对tailscale的理解很浅，具体可以观看：

【司波图】基于Wireguard组网技术的内网穿透教程_哔哩哔哩_bilibili

I Made a Personal VPN to Access EVERYTHING… and You Can Too!

安装好后在插件页找到tailscale，根据它给的链接登陆，你就可以在后台看到给出的100开头的虚拟内网ip了，这样就配置好了taiscale。

使用docker-compose部署hugo容器

尽管unraid的Community Applications中有一个Hugo，这个Hugo是一个精简版的镜像，我在使用中遇到了一些问题，我现在已经不太记得具体是什么了，总之我选择使用docker-compose部署全量的Hugo，unraid并不自带docker-compose，你需要到社区商店里安装

安装好后在unraid的"docker"标签页，你会看到底下多了一个"compose"，新建一个stack，可以按照我下面的配置文件来填入compose file。compose底下会显示你的docker-compose.yaml的路径。

实际上安装好了社区应用里的compose manager, 你也可以选择使用命令行来写docker-compose.yaml，并使用docker-compose up 来部署容器, 但是我这里选择使用web-ui的图形界面操作了

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


version: '3.8'

services:
  # 开发模式：带实时热重载
  hugo_dev:
    image: peaceiris/hugo:latest-full
    container_name: hugo_develop
    networks:
      - hugo_network
    volumes:
      - /mnt/user/appdata/hugo/blog:/src      # 项目根目录
    ports:
      - "1313:1313"
    command: 
      - "server"
      - "--bind=0.0.0.0"
      - "--baseURL=http://100.x.x.x:1313" #此处为你的taiscale ip，端口为1313。但这一个字段不确定是否有用。
      - "--buildDrafts"
      - "--watch"
      - "--disableFastRender"
    restart: unless-stopped

  # 生产构建：生成静态文件
  hugo_build:
    image: peaceiris/hugo:latest-full
    container_name: hugo_builder
    networks:
      - hugo_network
    volumes:
      - /mnt/user/appdata/hugo/blog:/src
    command: 
      - "--minify"  # 压缩HTML/CSS/JS
      - "--cleanDestinationDir"  # 清除旧文件
    restart: on-failure


networks:
  hugo_network:
    driver: bridge
    ipam:
      config:
        - subnet: 172.28.0.0/24

这个镜像较大，如果你没有好的网络环境可能会花较长时间。

部署好之后你会在docker标签页下看到通过compose生成的镜像，这样就算几乎部署完成了，容器hugo_builder在每次运行的时候会清除旧文件并部署，每次点击运行后运行完命令hugo _builder会再次停止。

部署完这两个容器不意味这博客就能用了，你需要使用unraid的命令行控制台/mnt/user/appdata/hugo/blog下配置你的博客，网上的教程很多，这里就不再重复赘述，总之你必须需要先下载一个主题，主题里说不定会有配置文件，复制到hugo/blog/下覆盖对应文件大概就能启动镜像并在1313端口看到网页了

云服务端Caddy反向代理，安全地在公网发布

如果您没有公网ip，或者不想要使用本机的公网ip发布，你可以选择使用云服务器来反代，caddy也真的很简单，官方文档写得很清楚，这部分对你来说应该很简单

Welcome — Caddy Documentation

至此，博客就成功发布了

如何方便的写博客

很多静态博客是使用cms后台来方便的写的，但是unraid不容易部署cms后台，所以我选择直接使用User Script脚本新建博客（简单的新建一个md文件并不能用，必须符合一定的规范，具体因主题和配置而异），将/blog/content目录链接到smb共享目录，这样用typora打开smb里的文件就可以在线编辑，实时更新

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35


#我的脚本配置
#!/bin/bash

# --- 配置 ---
HUGO_CONTENT_POST_DIR="/mnt/user/appdata/hugo/blog/content/post"
# 将上面的路径替换为你 Hugo 项目中 content/post 目录的实际路径

# --- 脚本逻辑 ---

# 获取当前日期和时间，格式为 YYYY-MM-DDTHH:MM:SSZ (符合 Hugo 常用格式)
CURRENT_DATE_TIME=$(date +%Y-%m-%dT%H:%M:%S%z)

# 构建新的文件夹路径
NEW_POST_DIR="$HUGO_CONTENT_POST_DIR/$CURRENT_DATE_TIME"

# 创建新的文件夹，如果不存在则创建父目录（使用 -p 参数）
mkdir -p "$NEW_POST_DIR"

# 构建 index.md 文件的完整路径
INDEX_MD_FILE="$NEW_POST_DIR/index.md"

# 创建 index.md 文件并写入默认内容
cat <<EOF > "$INDEX_MD_FILE"
---
title: "新文章"
date: "$CURRENT_DATE_TIME"
draft: true

---



EOF
chmod 777 "$INDEX_MD_FILE"
echo "已在 $NEW_POST_DIR 中创建 index.md 文件。"

写完在1313端口就有内容了，没有就重启一下容器试试。

实际上你也许要de更多bug，不过折腾就是乐趣，祝你成功。