📢 部署方式：群辉NAS上，使用Docker容器部署项目，以Blog项目为例

1、群晖准备工作

安装套件

首先 在群辉--套件中心下载并安装套件：Container Manager （新群晖已不支持原Docker容器套件）

下载/导入 镜像

在 Container Manager 套件中点击 映像/操作/导入 从 URL 添加:

填入地址为 mereith/van-blog ， 标签选择默认的 latest 即可：：

因公司群晖未连接外网，只能从原有项目导出后，再导入

列出镜像命令：

C:\Users\Administrator> docker images

REPOSITORY TAG IMAGE ID CREATED SIZE

mereith/van-blog latest 7a718409ee86 2 years ago 1.31GB

mongo 4.4.16 92ff83581bcd 2 years ago 626MB

2、镜像准备工作

镜像导出命令行： docker save -o <输出文件路径> <镜像名称>:<标签> 如：

docker save -o E:\vvv\1.tar mereith/van-blog:latest

docker save -o E:\vvv\2.tar mongo:4.4.16

将备份上传到群晖服务器后：

在 Container Manager 套件中点击 映像/操作/导入 从 文件 添加:

导入成功后可以看到 映像 如图：

两个镜像方法相同，略

3、群晖部署镜像

创建容器

创建 mongoDB 容器

点击 容器/新建 ，选中刚刚下载的 mongo 镜像。

容器名称设置为 mongo，其他的一路下一步就行。

选择 容器/新增 映像就选择刚刚导入的镜像

完成后启动即可。

创建 VanBlog 容器

和上面一样，点击 容器/新建 ，选中刚刚下载的 mereith/van-blog:latest 镜像，容器名称为 VanBlog。

环境变量

点击 高级设置/环境，其他的都可忽略，但下表的环境变量需要设置/新加：

名称	值
EMAIL	你自己的邮箱

链接

为了让 VanBlog 容器内可以访问之前创建的 mongo 容器，在 高级设置/链接 中添加链接到之前创建的 mongo 容器。

端口映射

然后点击下一步，进行端口映射，群晖不能用默认的 80 端口，所以可以映射成其他端口，比如 8880。

存储空间映射

可以参考 以下 中的目录映射部分进行映射（添加文件夹）。

容器内目录	说明
/app/static	图床中数据的存放路径，使用内置图床请务必映射好！
/var/log	日志的存放路径，包括 access 日志、 Caddy 日志和前台服务日志
/root/.config/caddy	Caddy 配置存储路径
/root/.local/share/caddy	Caddy 证书存储路径

完成

然后点击完成即可：

错误排查

如果发生错误，可以在容器日志中查看报错原因。

后续

启动完毕后，请 完成初始化

4、 初始化项目

部署 VanBlog 后，请使用浏览器打开 http://<域名>/admin/init，并按照指引完成初始化。具体设置项可以参考 站点配置。

访问地址端口为修改后的端口：8880，并非群晖默认的80端口：http://192.168.88.57:8880/

也可以直接访问博客地址，并点击导航栏右上角管理员按钮进入后台初始化页面。

5、 迁移

在原项目导出全部数据：

数据与图片没有同时导出，需手动导出

导出后再使用系统功能导入【全部数据】即可（文章、标签、部分系统设置）

图片需单独解压到群晖NAS的img文件夹 \\192.168.88.57\docker\img，如下图：

6、 注意事项

迁移并不会打包个性化代码：

在此备份【单向历】及【Sakana】组件

自定义HTML：

【Sakana】
<div id="sakana-widget" style="position: fixed;bottom: 20px;right:40px;"></div>
<script>
  function initSakanaWidget() {
    new SakanaWidget({ autoFit: true }).setState({ i: 0.001, d: 1 }).mount('#sakana-widget');
  }
</script>
<script
  async
  onload="initSakanaWidget()"
  src="static/config/sakana.min.js"
></script>

【单向历】
<img id="author-card" ></img>
<script>
window.onload = function() {
    // 创建外层的 div 元素
    const newDiv = document.createElement('div');
    newDiv.className = 'hidden lg:block flex-shrink-0 flex-grow-0 vanblog-sider w-52';
    newDiv.style.width = '480px';  // 设置宽度
    newDiv.style.marginRight = '10px';       // 设置右边距

    // 创建内层 div，包含图片并设置属性
    const authorCardDiv = document.createElement('div');
    authorCardDiv.id = 'author-card';
    authorCardDiv.className = 'sticky side-bar no-submenu side-bar-not-top side-bar-unpinned headroom--bottom';

    // 创建 img 元素并设置属性
    const img = document.createElement('img');
    img.src = 'https://xialiu.cn/api/dan/';
    img.alt = 'Image';
    img.style.borderRadius = '20px';

    // 将 img 添加到 authorCardDiv
    authorCardDiv.appendChild(img);

    // 将 authorCardDiv 添加到 newDiv
    newDiv.appendChild(authorCardDiv);

    // 找到要插入的父元素
    const parentDiv = document.querySelector('.flex.mx-auto.justify-center');

    // 将 newDiv 插入到父元素的开头
    if (parentDiv) {
        parentDiv.insertBefore(newDiv, parentDiv.firstChild);
    }
};
</script>

自此 大功告成，可以尽情享受群晖NAS的Docker项目：VanBlog

---

More info call： 微信/企业微信/钉钉/QQ/手机号：183****6036