Trilium 搭建个人知识库+博客

2024–07–01

一直在寻找着知识库+博客一站式的方案，尝试了halo、obsidian+mkdocs+github pages之后，偶然发现的Trilium+Ankia正中我的需求。

开源软件，方便的根据需求修改源码、增加插件、主题。
前后端分离，支持使用桌面端编辑或浏览器编辑。
支持Markdown导出/导出、Katex语法，反链功能、Excalidraw等等，自带版本管理，对我来说已经很足够了。
万物皆"笔记"、"子笔记"的管理方式，更方便管理、修改笔记。
良好的性能——100000篇都不卡顿，这也是我迁移笔记的原因之一（Obsidian笔记太多了 20秒才启动完毕急急急）
自带的"分享"功能很适合博客的发表。

方案概览

本地部署Trilium之后，可以访问 http://127.0.0.1:8080 并输入管理员密码进入App。
文章开启"分享"之后，可以在 http://127.0.0.1:8080/share/xxxxx 以游客身份浏览渲染好的文章。
- 使用Ankia将分享的文章美化、规范化，变为博客文章。
我本地使用的是笔记本电脑，"服务器"使用的是台式机，以实现持久的对外服务。
nginx代理 / 和 /login 到 /share/Index，避免游客默认进入到管理员页面。
为了免去繁杂的备案流程，frp使用香港服务器，因此使用Cloudflare购置的域名白嫖的CDN加速，加速国内访问。
使用Cloudflare的证书配置tls以增强安全性（可选）。

一些会用到的命令

$ docker ps
$ docker exec -it nginx /bin/bash
$ nginx -t
$ nginx -s reload

本地和服务器部署Trilium

Trilium本体

这里使用的是国人整合+汉化的trilium版本：

Nriver/trilium-translation: Translation for Trilium Notes. Trilium Notes 中文适配, 体验优化 (github.com)

本地和服务器都运行一次：

$ wget https://raw.githubusercontent.com/Nriver/trilium-translation/main/docker-compose.yml
$ docker compose up -d

默认笔记存储在 ./trilium-data ，端口为8080。

本地访问 127.0.0.1:8080 即可进入管理员界面，服务器端的管理员页面暂时不需要登录，稍后"同步"的时候会自动处理。

装载博客美化

dvai/Ankia-Theme: A card-style Trilium blog theme (based on Trilium sharing feature) (github.com)

下载 Release 的zip，右键"根笔记"→导入到笔记→关闭"安全导入"即可

然后打开"分享"

Twikoo评论系统（可选）

twikoo是Ankia附加的评论系统。如果需要这个，就需要配置两条隧道、两个域名（支持子域名）。

docker run \
    --name twikoo \
    -e TWIKOO_THROTTLE=1000 \
    -p 8081:8080 \
    -v ${PWD}/data:/app/data \
    -d imaegoo/twikoo

然后为"我的博客"添加属性：

#enableTwikoo #envId="https://twikoo.example.com/"

就会在博文下方显示评论区，如果需要在其他地方也显示，就为那条笔记添加属性

#showComments

配置frp内网穿透（可选）

使用SakuraFrp（没有广告费）

创建隧道，选择海外建站节点，强制https，输入自己的域名，本地端口填443，使用默认证书即可。

如果上面使用了twikoo，另一个隧道本地端口就填8082

使用群晖踩过的坑

frp本地端口只能使用443以让浏览器使用https，否则会访问失败或极其卡顿，而群晖系统本身就占用了443端口，所以需要进行一些操作。

修改 /usr/syno/share/nginx 下的 server.mustache、DSM.mustache、WWWService.mustache中的443端口为8443，80改成8088即可。

然后重启nginx： $ sudo systemctl restart nginx

参考：群晖解除默认的 80/443 端口占用 - 郑道杰 - 博客园 (cnblogs.com)

配置nginx反向代理

使用nginx docker

$ docker run -d --name nginx \
    -v /path/to/ssl:/path/to/ssl \
    -p 443:443 \
    -p 80:80 \
    -p 8082:8082 \
    nginx:latest

其中 8082 为 twikoo评论（可选）

使用OpenAI生成并稍加修改的 nginx-trilium.conf ，复制到 /etc/nginx/conf.d/

server {
    listen 443 ssl;
    server_name example.com; # 替换域名

    ssl_certificate /path/to/ssl/example.com.cert; # 替换证书路径
    ssl_certificate_key /path/to/ssl/example.com.key; # 替换证书路径

    # Redirect root URL to /share/Index
    location ~ ^/(|login|share|share/)$ {
        return 302 /share/Index;
    }

    # Proxy all other requests to the internal server
    location / {
        proxy_pass http://192.169.1.2:8080; # 建议在容器内尝试 curl，观察能否正确获取到内容
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# 如果不需要 twikoo 评论，下面这部分可以忽略
server {
    listen 8083 ssl;
    server_name twikoo.example.com;

    ssl_certificate /path/to/ssl/twikoo.example.com.cert;
    ssl_certificate_key /path/to/ssl/twikoo.example.com.key;

    # Proxy all other requests to the internal server
    location / {
        proxy_pass http://192.168.1.2:8081;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

设置同步

这里的服务器地址不一定是域名，只要能访问到服务器即可。

点击测试同步之后，左下角会出现一个"无线"的图标，点击同步，就可以访问到博客了！

Ankia的更多玩法和踩坑

Trilium第三方仓库：Trilium插件合集 (github.com)
Ankia官方博客：Ankia 使用指南 - 东东的小黑盒

一些标签

置顶博文
#blogPostTop
开启阅读量统计
#enableVisitors
在除了博文以外的地方显示评论插件
#showComments

保持根目录结构

非必要不要修改"我的博客"的根目录结构，如果非要添加一个笔记，就加上属性：

#shareHiddenFromTree(可继承的)=true

因为渲染博客时，是根据下标获取元素的，比如原来的"说说"是 我的博客[0] ，现在添加了一个文件夹img，现在 我的博客[0] 是 imgs，就会导致整个页面渲染错误，崩掉。

Twikoo

邮箱推送设置详见 多图警告 玩转 Cloudflare。

同时支持 Pushplus 推送新评论到微信。

在设置可以进行进一步的配置，如 CORS 限制、管理员账户、密码等等。

美化

CanvasNest 尘埃特效 /dist/canvas-nest.js· hustcc/canvas-nest.js (github.com)

图床配置

2024–08–11 更新

Trilium 博客头图的配置只能使用链接，因此首先要上传到 Trilium 的仓库，然后打开分享链接，再复制链接，这套操作不仅繁琐，而且仓库里会多出很多一次性的图片，造成脏乱。便想到了放进图床里。

使用这个博主的方案，Cloudflare R2 + WebP Cloud + PicGo，即可免费、快速的实现图床。URL

2025–03–28 更新

使用 picgo-core 更快

paru -S picgo-core
picgo add s3
picgo set uploader aws-s3

然后看文档进行配置即可。

picgo