使用 Memos 搭建轻博客（朋友圈）

最近看到周围各种个人博主又在折腾 Memos ，记得 23 年的时候 Memos 也曾出现过一次流行，当时部署后的体验（V0.12）只能用三个字评价：不好用。最近 Memos 二次翻红后，又一次体验了一下（V0.21）感觉好了不少，虽然还是有这样那样的问题，但已经好用了不少。于是决定基于 Memos 给博客加入已经计划许久“碎碎谈”功能。

我的 Memos 地址：https://memos.tjsky.net
我的博客内嵌 Memos 页地址：https://www.tjsky.net/memos
目前我还在折腾 Memos 本身的优化，博客内嵌页还没开始折腾，大家凑合看下效果就行。

前言

最近在独立博客圈少部博主中流行的这种叫做“随笔、b言b语、微博客、朋友圈”的 “轻博客”。

为什么大家在已经有博客的基础上还有搞一个“轻博客”呢，从我自己的感觉来说，虽然现在能够表达自己言论的平台很多。先不说这个博客本身，热门的平台，从国内的微信，微博，知乎，豆瓣，小红书，QQ群，贴吧，B站。到国外的脸书，推特，TG，Whatapp，line reddit。巨量的内容平台百花齐放，仿佛每次都有一个合适的平台等待着我的表达，但是我依然遇到了一些问题：

在日常生活中，会有很多小想法想要表达出来：一方面我希望有地方公开这些想法，而不是记录到仅自己可见的笔记里；一方面我感觉频繁发布这种低价值内容会打扰关注者。而且我也不想为了各种平台政策原因去进行严格的自我审查。

博客+轻博客的架构，可以有效的解决这个问题，高价值长文输出在博客，日常稀碎的“废话”就放到轻博客。

部署 memos 与 twikoo

memos 官方是推荐用 Docker 来部署，当然也有一些人会使用 Zeabur 和 Railway 之类的服务部署 memos。twikoo 是作为评论系统使用的。

0、前置任务

1. VPS 服务器（或能跑 Docker 的 SaaS 平台）
2. Web 技能（Docker、Nginx）
3. 搭建好最基础的运行环境（Docker、Docker Compose、Nginx）

1、新建目录与docker-compose.yml文件

# 切换到你想要放置memos的docker-compose.yml文件的目录上层
cd /www/wwwroot/
# 新建memos网站的文件夹
mkdir memos.example.com
# 切换进去
cd /www/wwwroot/memos.example.com
# 新建docker-compose.yml文件
vim docker-compose.yml

#以上你可以用面板搞定

输入以下内容：

version: "3"
services:
    memos:
        container_name: memos
        ports:
            - 5230:5230
        volumes:
            - /home/data/memos:/var/opt/memos
        image: neosmemo/memos:stable
    twikoo:
        container_name: twikoo
        environment:
            - TWIKOO_THROTTLE=1000
        ports:
            - 5086:8080
        volumes:
            - /home/data/twikoo-db:/app/data
        image: imaegoo/twikoo

如果不想要评论系统 twikoo 只想运行 memos 的话，请使用下边的内容

version: "3"
services:
    memos:
        container_name: memos
        ports:
            - 5230:5230
        volumes:
            - /home/data/memos:/var/opt/memos
        image: neosmemo/memos:stable

• 注意这里的这两行，目的是将 memos 与 twikoo 在 docker 内的储存卷，映射到本机目录/home/data/下，实现持久化储存（不然一旦删了镜像的话，整个数据库直接就无了）
  冒号前的目录是本机目录，可以根据你的喜好修改，冒号后的目录是是 Docker 中储存卷的目录，不应修改。

- /home/data/memos:/var/opt/memos
- /home/data/twikoo-db:/app/data

• ports看你自己情况，如果遇到端口冲突，请修改冒号前的端口号

2、启动 Memos 与 twikoo

在docker-compose.yml文件目录下执行docker-compose up -d
等待镜像拉取完成，Memos 就运行在服务器的5230端口了。
打开 http://你的公网IP:5230 就能访问 Memos 了。
打开 http://你的公网IP:5086 就能访问 twikoo 了。

3、升级 Memos 与 twikoo

• 强烈建议，升级前备份你的数据库因为官方时不时会搞出数据库不兼容或者会重置配置的升级

  cp -r /home/data/memos/memos_prod.db /home/data/memos/memos_prod.db.bak
  

  需要备份的数据是/home/data/memos/目录下的memos_prod.db文件，默认状态下 Memos 所有设置、用户信息、附件、想法 都保存在这个文件中。你直接备份走整个文件夹也可以。

• 官方升级命令为

  docker-compose down && docker image rm neosmemo/memos:latest && docker-compose up -d
  

说实话这个命令有点蛋疼，他是先停止容器，然后移除，然后再拉取新镜像。你要是网不好，这个 pull 的过程还是挺久的。

• 修改后的升级命令如下

  docker compose pull && docker compose up -d --force-recreate && docker image prune
  

  咱们先pull新镜像到本地，然后再停止旧容器，升级到新镜像，最后再清理旧镜像。（清理时，请注意确认，不要把你机器上其他还在用的镜像也给清理了）

4. 用 Nginx 反代 Memos 与 twikoo

就很常规的反代配置,分别为 Memos 与 twikoo 设置反代，绑定域名。
如果你用面板服比如BT，1P ，NNPM啥的话设置反代更方便一点。

location ^~ /
{
proxy_pass http://127.0.0.1:5230;
proxy_set_header Host host;
proxy_set_header X-Real-IPremote_addr;
proxy_set_header X-Forwarded-For proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOSTremote_addr;
proxy_set_header Upgrade http_upgrade;
proxy_set_header Connectionconnection_upgrade;
add_header X-Cache $upstream_cache_status;
# cache
add_header Cache-Control no-cache;
expires 6h;
}

5. 将 Memos 与 twikoo 结合到一起

目的是让你的memos可以有个评论区，如果你不需要，请跳过这部分
登录你的memos，在设置-系统-自定义脚本里，插入以下代码,
并修改https://artalk.tjsky.net/为自己的twikoo地址。

    var twikooENV = 'https://artalk.tjsky.net/'
function addTwikooJS() { 
  var memosTwikoo = document.createElement("script");
    memosTwikoo.src = `https://cdn.jsdelivr.net/npm/twikoo@1.6.32/dist/twikoo.all.min.js`;
  var tws = document.getElementsByTagName("script")[0];
  tws.parentNode.insertBefore(memosTwikoo, tws);
};
function startTwikoo() {
  startTW = setInterval(function(){
    var nowHref = window.location.href;
    var twikooDom = document.querySelector('#twikoo') || '';
    if( nowHref.replace(/^.*\/(m)\/.*/,'1') == "m"){
      if(!twikooDom){
        addTwikooJS()
        setTimeout(function() {
          var memoTw = document.querySelector('.gap-2') || '';
          memoTw.insertAdjacentHTML('afterend', '<div id="mtcomment"></div>');
          twikoo.init({
            envId: twikooENV,
            el: '#mtcomment',
            path: nowHref.replace(/^.*=?(http.*\/m\/[0-9]+).*/,'1'),
            onCommentLoaded: function () {
              startTwikoo();
            }
          })
        }, 1500)
      }else{
        clearInterval(startTW)
      }
    }
  }, 2000)
}

6. 美化 memos 页面

使用 Bing 每日背景图

body {background-color: transparent !important;}
html {background-image: url('https://bing.immmmm.com/img/bing?region=zh-CN&type=image');width: 100%;height: 100vh;background-position: center;background-size: cover;background-attachment: fixed;}  
.w-full,.bg-zinc-50,.bg-white,.hover\:bg-white:hover,.dark .dark\:bg-zinc-700,.dark .dark\:hover\:bg-zinc-700:hover,.memo-wrapper,.bg-gray-200,.dark .memo-wrapper,.memo-editor-container {--tw-bg-opacity: 0.66 !important;}
.dark header.dark\:bg-zinc-800,aside.dark\:bg-zinc-800,.bg-gray-100,.dark html,.dark body {--tw-bg-opacity: 0!important;}
:is(.dark .dark\:text-gray-500) {--tw-text-opacity: 1;color: rgb(147, 158, 181);}

代码放置于：设置-系统-自定义样式 (基于网络上那个常见的 Memos v0.11 美化代码，修改适配 v0.21)
PS：上线比较仓促，并未去除原有代码中失效的CSS。

使用「霞鹜文楷」在线字体

body{font-family: "LXGW WenKai Screen", sans-serif !important;}

代码放置于：设置-系统-自定义样式

function changeFont() { 
  const link = document.createElement("link");
  link.rel = "stylesheet";
  link.type = "text/css";
  link.href = "https://fastly.jsdelivr.net/npm/lxgw-wenkai-webfont@1.6.0/lxgwwenkai-light.css";
  document.head.append(link);
};
changeFont()

代码放置于：设置-系统-自定义脚本

7. 把 memos 嵌入到博客里

在你博客的后台新建一个独立页面，插入以下代码就可以实现（代码来自段先森。试了下 Typecho 以及WordPress 这些动态框架都可以）

 <div id="bber"></div>
<script type="module" src="https://immmmm.com/emaction.js?v=230811"></script>
<script src="https://fastly.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/Tokinx/ViewImage/view-image.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/Tokinx/Lately/lately.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/twikoo@1.6.32/dist/twikoo.all.min.js"></script>
<script type="text/javascript">
  var bbMemos = {
    memos : 'https://memos.duanxiansen.com/',//修改为自己部署 Memos 的网址，末尾有 / 斜杠
    limit : '',//默认每次显示 10 条
    creatorId:'' ,//早期默认为 101 用户，新安装是 1； https://demo.usememos.com/u/101
    domId: '',//默认为 bber
    twiEnv:'https://artalk.duanxiansen.com/',//启开 twikoo 评论，修改为自己部署 artalk 的网址，末尾有 / 斜杠。不需要的话就删除这行。
  }
</script>
<script src="https://fastly.jsdelivr.net/gh/tjsky/tjsky/memos24.js"></script>

Hexo之类的静态框架可以参考这个文章：基于Memos实现说说和清单功能。 | Leonus

我的 Memos 地址：https://memos.tjsky.net
我的博客内嵌 Memos 页地址：https://www.tjsky.net/memos

主要参考文章：

博客添加memos的方法 | 段先生
关于Memos | Barryの小站