[{"data":1,"prerenderedAt":394},["ShallowReactive",2],{"page-/post/memos/next-memos-quick-start-website":3,"surrounding-page":385},{"id":4,"title":5,"author":6,"body":7,"date":375,"description":13,"extension":376,"group":6,"lastmod":377,"meta":378,"navigation":379,"path":380,"rawbody":381,"seo":382,"showTitle":5,"stem":383,"tags":6,"versions":6,"__hash__":384},"content/post/Memos/next-memos-quick-start-website.md","Next x Memos 懒人建站",null,{"type":8,"value":9,"toc":366},"minimark",[10,14,17,20,23,26,32,36,39,42,45,53,60,63,66,74,77,80,83,86,101,131,134,137,142,145,148,151,154,157,160,163,166,171,174,177,180,183,190,199,206,216,226,229,232,237,240,250,267,277,287,290,295,298,301,304,315,318,321,324,327,330,336,339,342,345,348,351,354,357,360,363],[11,12,13],"p",{},"我觉得博客站里的内容主要有两种展现形态。",[11,15,16],{},"一种是文章，有头有尾，长篇大论，输出观点，阐述事实。",[11,18,19],{},"一种是动态，即兴发挥，图文为主，类似朋友圈动态，碎片化。",[11,21,22],{},"文章好说，所有框架都能满足，无非就是把文章文件（markdown）放在项目里，然后编译出来，再部署。",[11,24,25],{},"把动态加入进去，也许用Memos（指和Memos类似的开源作品）作为数据来源是个不错的选择。",[11,27,28],{},[29,30,31],"em",{},"那既然能做博客上的动态页，是不是也能给其他站点作为数据源呢",[33,34,35],"h2",{"id":35},"起初我想选一个框架",[11,37,38],{},"都说前端卷，天天造轮子，天天撕逼，堪比娱乐圈。",[11,40,41],{},"我学的速度还没框架更新速度快。",[11,43,44],{},"那卷之后有什么好处呢？",[11,46,47,48,52],{},"我觉得最大的好处就是有",[49,50,51],"strong",{},"工具、插件、模板","等大量的半成品可供我们选择。",[11,54,55,56,59],{},"然而最大的坏处就是：",[49,57,58],{},"太大量","。",[11,61,62],{},"所以说真别乱喷人家造轮子的。造完了，好用，咱不也得用吗？",[11,64,65],{},"2024年了，能建博客站点的框架实在是太多。每个框架的模版又非常多。",[11,67,68,69,73],{},"要是真挨个挑选下来，我估计我这文章也不用写了，时间全浪费在 ",[70,71,72],"mark",{},"选择"," 上了。",[11,75,76],{},"所以我也不推荐什么框架了，萝卜青菜各有所爱，选了之后还是要写文章才有意义。",[11,78,79],{},"但是呢，这个非常繁琐的选择过程，让我产生了一个想法。",[33,81,82],{"id":82},"然后想做一个选框架的导航站",[11,84,85],{},"刚才说到，前端框架卷的狠，产出多。",[11,87,88,89,93,94,93,97,100],{},"所以现在就有了一个问题：只了解了",[90,91,92],"code",{},"Vue","、",[90,95,96],{},"React",[90,98,99],{},"Node","，这不足以让我直接做出东西来。",[11,102,103,104,93,107,110,111,93,114,93,117,120,121,93,124,93,127,130],{},"就必须还得有个开发模板，有人帮我用",[90,105,106],{},"Webpack",[90,108,109],{},"Vite"," 搭建好了项目，再帮我配置好一些基本的功能，像什么前端的",[90,112,113],{},"router",[90,115,116],{},"store",[90,118,119],{},"Tailwindcss","，Node的",[90,122,123],{},"middleware",[90,125,126],{},"orm",[90,128,129],{},"jwt"," 等等。",[11,132,133],{},"配好了还只是第一步，Node版本合不适合，框架版本新不新，数据库用的啥等等类似问题还有很多。",[11,135,136],{},"所以，我去哪里找这些合适的模板呢？",[11,138,139],{},[49,140,141],{},"没有的话要不我搞一个导航站？",[11,143,144],{},"==我寻思着肯定已经有人做过这种类似的导航站了，但是确实没推广到我脸上来。==",[11,146,147],{},"所以，我在准备开始这个导航站前，还是先捋了捋功能点（前端页面），捋了捋需要哪些接口（后端接口），怎么管理这些数据（管理系统）。",[11,149,150],{},"但是捋完之后，肉眼可见的，开发成本太高了。",[11,152,153],{},"还没怎么开始我就不想做了。",[11,155,156],{},"于是我开始做减法，前端页面尽量简洁，后端功能尽量简单，管理系统够用就行。",[11,158,159],{},"然后你懂得，开始之后总会有各种各样的阻碍卡住。",[11,161,162],{},"所以我觉得还是要再做减法。",[33,164,165],{"id":165},"用偷懒的方式实现",[11,167,168],{},[49,169,170],{},"我用我当前的认知继续思考。",[11,172,173],{},"我做一个后端服务，是为了给我的前端页面提供接口以及保存和获取数据。",[11,175,176],{},"至于数据怎么存，表结构合不合理其实无所谓。",[11,178,179],{},"甚至数据安不安全也不重要，我写出来就是给别人看的，没有私密信息。",[11,181,182],{},"我能不能找个现成的后端服务为我提供数据录入和数据获取接口，我只需要写写前端代码，调调接口就行了呢。",[11,184,185,186,189],{},"所以说 ",[90,187,188],{},"Memos"," 貌似能满足我的要求。",[11,191,192,194,195,198],{},[90,193,188],{},"是我用",[90,196,197],{},"docker","直接部署到云服务器上的，现成的开源项目，我不用写代码。",[11,200,201,202,205],{},"也提供了一个前端界面，可以录入文本，可以发图片，可以生成可管理的",[90,203,204],{},"Access Tokens","用于接口请求。",[11,207,208,209,215],{},"这就相当于，",[49,210,211,212,214],{},"我在",[90,213,188],{},"写东西，就是在给前端提供数据","，只要前端通过接口拿到一条Memo后，能根据某种规则解析出内容即可。",[11,217,218,219,222,223,225],{},"我在Memos打个",[90,220,221],{},"导航","的Tag开始发上几条Memo，然后前端获取",[90,224,221],{},"相关Tag的Memos，再把内容以另一种形式呈现出来。这不就是我想要的效果么？",[11,227,228],{},"甚至我在Memos再发点有关其他品类的Memo，比如植物，那前端再换一种方式展示出来，这不又是一个养花养草的科普站点？",[11,230,231],{},"果然，前端页面也是个换皮的游戏。",[11,233,234],{},[49,235,236],{},"一套数据，换个皮，换个交互，就是另一个App了。",[33,238,239],{"id":239},"最终姿势",[11,241,242,243,246,247,59],{},"博客用",[90,244,245],{},"NextJS","的模板搭建。模板是",[90,248,249],{},"tailwind-nextjs-starter-blog",[11,251,252,255,256,259,260,263,264,266],{},[49,253,254],{},"博客的文章部分","，还是用传统的方式，把",[90,257,258],{},"md文件","放在项目中，然后",[90,261,262],{},"build","，",[90,265,197],{},"部署",[11,268,269,272,273,276],{},[49,270,271],{},"动态部分","，自己新开一个页面，用",[90,274,275],{},"Fetch","去请求自己Memos服务的接口，筛选出想要展示的Memo。",[11,278,279,282,283,286],{},[49,280,281],{},"导航站","（如果还做的话），也是用Memos录入，打上指定Tag和权限，在前端获取后，写好一套解析规则，比如Markdown的里一级标题就是",[90,284,285],{},"title","字段，内容标签也区分开来等等。",[11,288,289],{},"这样，Memos就是我的数据录入平台+接口服务+后台管理系统，不需要开发，0成本。",[11,291,292,59],{},[49,293,294],{},"Memos的使用方面",[11,296,297],{},"在电脑端，用Memos的前端页面进行记录。",[11,299,300],{},"在手机端，我喜欢在微信里打开H5页面，然后把页面添加到浮窗里。感觉要比使用Memos的App或者小程序要舒服很多。（不过要用https，不然时间长了可能会禁止访问）",[11,302,303],{},"最后，要生产其他展示类的站点，就可以直接使用Memos里的数据，先把网站做出来，后续觉得有搞头的话，再把必要的后端服务具体实现出来。没人访问的话，只建一个前端也花不了几天，成本比较小了。",[11,305,306,307,310,311,314],{},"然后",[49,308,309],{},"涉及到数据","，记得",[49,312,313],{},"时常备份","，被人攻击就重启+恢复备份。",[11,316,317],{},"或者再给Memos限制一下只接受来自 47.xx.xx.xx 等ip的请求，也可以避免一下被人操作Memos，因为Memos的Api是公开的，别人很容易就知道你创建和删除Memos的接口。",[11,319,320],{},"或者，在本地把Memos请求下来保存到文件里，直接把页面用Next编译成静态网站再发布，对于数据更新不太频繁的网站也是可以的。",[11,322,323],{},"或者，自己在服务器加一层中间层，请求方式改为请求中间层，这样别人就不知道你创建和删除接口是怎么调用的了。",[11,325,326],{},"当然，如果定时备份的话，自己再恢复也可以的。",[33,328,329],{"id":329},"后续优化",[11,331,332,333,59],{},"做好基本的基建工作后，后续优化我觉得就是",[49,334,335],{},"把记录这件事再简化，做到随手可记",[11,337,338],{},"作为手动码字录入，Memos已经是挺方便了，我打开微信就能记录。",[11,340,341],{},"进一步增加录入方式，大概是再加个浏览器插件，在网上冲浪的时候，看到想要记录的内容，选中后弹出个表单，简单填写后，直接通过Memos的接口录入进去。",[11,343,344],{},"文章的话，也是需要一个脚本，在本地写完后，一键发送到博客项目的文章目录下，再触发一下部署动作。",[11,346,347],{},"当然这一切对于非开发者来说，可能最大的问题是：没有现成的好用的工具。",[11,349,350],{},"能做出来给你用的，不一定好用，但一定收费。",[11,352,353],{},"而为爱发电的，虽然不收费，估计也受众也小，也懒得大力推广。",[355,356],"hr",{},[11,358,359],{},"ok，这就是全部内容啦。",[11,361,362],{},"不知道对你有没有帮助呢？",[11,364,365],{},"欢迎一起来讨论~",{"title":367,"searchDepth":368,"depth":368,"links":369},"",2,[370,371,372,373,374],{"id":35,"depth":368,"text":35},{"id":82,"depth":368,"text":82},{"id":165,"depth":368,"text":165},{"id":239,"depth":368,"text":239},{"id":329,"depth":368,"text":329},"2024-08-13T00:00:00.000Z","md","2025-02-12T00:00:00.000Z",{},true,"/post/memos/next-memos-quick-start-website","---\ntitle: Next x Memos 懒人建站\ndate: 2024-08-13\nlastmod: 2025-02-12\nshowTitle: Next x Memos 懒人建站\n---\n我觉得博客站里的内容主要有两种展现形态。\n\n一种是文章，有头有尾，长篇大论，输出观点，阐述事实。\n\n一种是动态，即兴发挥，图文为主，类似朋友圈动态，碎片化。\n\n文章好说，所有框架都能满足，无非就是把文章文件（markdown）放在项目里，然后编译出来，再部署。\n\n把动态加入进去，也许用Memos（指和Memos类似的开源作品）作为数据来源是个不错的选择。\n\n_那既然能做博客上的动态页，是不是也能给其他站点作为数据源呢_\n\n## 起初我想选一个框架\n\n都说前端卷，天天造轮子，天天撕逼，堪比娱乐圈。\n\n我学的速度还没框架更新速度快。\n\n那卷之后有什么好处呢？\n\n我觉得最大的好处就是有**工具、插件、模板**等大量的半成品可供我们选择。\n\n然而最大的坏处就是：**太大量**。\n\n所以说真别乱喷人家造轮子的。造完了，好用，咱不也得用吗？\n\n2024年了，能建博客站点的框架实在是太多。每个框架的模版又非常多。\n\n要是真挨个挑选下来，我估计我这文章也不用写了，时间全浪费在 \u003Cmark>选择\u003C/mark> 上了。\n\n所以我也不推荐什么框架了，萝卜青菜各有所爱，选了之后还是要写文章才有意义。\n\n但是呢，这个非常繁琐的选择过程，让我产生了一个想法。\n## 然后想做一个选框架的导航站\n\n刚才说到，前端框架卷的狠，产出多。\n\n所以现在就有了一个问题：只了解了`Vue`、`React`、`Node`，这不足以让我直接做出东西来。\n\n就必须还得有个开发模板，有人帮我用`Webpack`、`Vite` 搭建好了项目，再帮我配置好一些基本的功能，像什么前端的`router`、`store`、`Tailwindcss`，Node的`middleware`、`orm`、`jwt` 等等。\n\n配好了还只是第一步，Node版本合不适合，框架版本新不新，数据库用的啥等等类似问题还有很多。\n\n所以，我去哪里找这些合适的模板呢？ \n\n**没有的话要不我搞一个导航站？**\n\n==我寻思着肯定已经有人做过这种类似的导航站了，但是确实没推广到我脸上来。==\n\n所以，我在准备开始这个导航站前，还是先捋了捋功能点（前端页面），捋了捋需要哪些接口（后端接口），怎么管理这些数据（管理系统）。\n\n但是捋完之后，肉眼可见的，开发成本太高了。\n\n还没怎么开始我就不想做了。\n\n于是我开始做减法，前端页面尽量简洁，后端功能尽量简单，管理系统够用就行。\n\n然后你懂得，开始之后总会有各种各样的阻碍卡住。\n\n所以我觉得还是要再做减法。\n\n## 用偷懒的方式实现\n\n**我用我当前的认知继续思考。**\n\n我做一个后端服务，是为了给我的前端页面提供接口以及保存和获取数据。\n\n至于数据怎么存，表结构合不合理其实无所谓。\n\n甚至数据安不安全也不重要，我写出来就是给别人看的，没有私密信息。\n\n我能不能找个现成的后端服务为我提供数据录入和数据获取接口，我只需要写写前端代码，调调接口就行了呢。\n\n所以说 `Memos` 貌似能满足我的要求。\n\n`Memos`是我用`docker`直接部署到云服务器上的，现成的开源项目，我不用写代码。\n\n也提供了一个前端界面，可以录入文本，可以发图片，可以生成可管理的`Access Tokens`用于接口请求。\n\n这就相当于，**我在`Memos`写东西，就是在给前端提供数据**，只要前端通过接口拿到一条Memo后，能根据某种规则解析出内容即可。\n\n我在Memos打个`导航`的Tag开始发上几条Memo，然后前端获取`导航`相关Tag的Memos，再把内容以另一种形式呈现出来。这不就是我想要的效果么？\n\n甚至我在Memos再发点有关其他品类的Memo，比如植物，那前端再换一种方式展示出来，这不又是一个养花养草的科普站点？\n\n果然，前端页面也是个换皮的游戏。\n\n**一套数据，换个皮，换个交互，就是另一个App了。**\n## 最终姿势\n\n博客用`NextJS`的模板搭建。模板是`tailwind-nextjs-starter-blog`。\n\n**博客的文章部分**，还是用传统的方式，把`md文件`放在项目中，然后`build`，`docker`部署\n\n**动态部分**，自己新开一个页面，用`Fetch`去请求自己Memos服务的接口，筛选出想要展示的Memo。\n\n**导航站**（如果还做的话），也是用Memos录入，打上指定Tag和权限，在前端获取后，写好一套解析规则，比如Markdown的里一级标题就是`title`字段，内容标签也区分开来等等。\n\n这样，Memos就是我的数据录入平台+接口服务+后台管理系统，不需要开发，0成本。\n\n**Memos的使用方面**。\n\n在电脑端，用Memos的前端页面进行记录。\n\n在手机端，我喜欢在微信里打开H5页面，然后把页面添加到浮窗里。感觉要比使用Memos的App或者小程序要舒服很多。（不过要用https，不然时间长了可能会禁止访问）\n\n最后，要生产其他展示类的站点，就可以直接使用Memos里的数据，先把网站做出来，后续觉得有搞头的话，再把必要的后端服务具体实现出来。没人访问的话，只建一个前端也花不了几天，成本比较小了。\n\n然后**涉及到数据**，记得**时常备份**，被人攻击就重启+恢复备份。\n\n或者再给Memos限制一下只接受来自 47.xx.xx.xx 等ip的请求，也可以避免一下被人操作Memos，因为Memos的Api是公开的，别人很容易就知道你创建和删除Memos的接口。\n\n或者，在本地把Memos请求下来保存到文件里，直接把页面用Next编译成静态网站再发布，对于数据更新不太频繁的网站也是可以的。\n\n或者，自己在服务器加一层中间层，请求方式改为请求中间层，这样别人就不知道你创建和删除接口是怎么调用的了。\n\n当然，如果定时备份的话，自己再恢复也可以的。\n\n## 后续优化\n\n做好基本的基建工作后，后续优化我觉得就是**把记录这件事再简化，做到随手可记**。\n\n作为手动码字录入，Memos已经是挺方便了，我打开微信就能记录。\n\n进一步增加录入方式，大概是再加个浏览器插件，在网上冲浪的时候，看到想要记录的内容，选中后弹出个表单，简单填写后，直接通过Memos的接口录入进去。\n\n文章的话，也是需要一个脚本，在本地写完后，一键发送到博客项目的文章目录下，再触发一下部署动作。\n\n当然这一切对于非开发者来说，可能最大的问题是：没有现成的好用的工具。\n\n能做出来给你用的，不一定好用，但一定收费。\n\n而为爱发电的，虽然不收费，估计也受众也小，也懒得大力推广。\n\n--- \n\nok，这就是全部内容啦。\n\n不知道对你有没有帮助呢？\n\n欢迎一起来讨论~\n\n\n\n\n\n\n\n\n\n",{"title":5,"description":13},"post/Memos/next-memos-quick-start-website","FM9yOrnZ3foAQ0zc-OHXKRYtd8Aorn_HakGcwQSX_qY",[386,390],{"title":387,"path":388,"stem":389},"OpenClaw 安装入门（Windows）","/post/zzao/openclaw/openclaw-install-windows","post/zzao/openclaw/openclaw-install-windows",{"title":391,"path":392,"stem":393},"假设你是AI，你的Skill应该是什么样的","/post/zzao/ai-skill-structure","post/zzao/ai-skill-structure",1779005086753]