V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
MFWT
V2EX  ›  程序员

请教各位大佬的个人博客(或别的网站),使用『内容缓存』的好方法

  •  
  •   MFWT · 2023-07-06 08:46:56 +08:00 via Android · 4808 次点击
    这是一个创建于 507 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景

    手头有一个写到一半的纯静态博客,由于手动生成 HTML 文件太麻烦,也不好维护,打算改成 PHP 动态生成

    当初为什么选择纯静态,原因在于,我考虑着,静态页面对 VPS 的负荷要求应该会低一些(我曾经用过超低配服务器建站,打开 WordPress 都要八九秒那种),但是纯静态页面的一些缺点(比如在线编辑较麻烦,文件内容大量重复等)让我最终选择回了动态页面

    诚然,动态页面需要吃服务器资源,但是考虑到我能有的服务器都是『有计算资源,但不强』的状态,因此还是多少想利用下的

    设想

    博客使用 MarkDown 编写,服务器在保存 MD 原文的同时解析好 HTML 内容(用 ParseDown 库),同样存储起来

    访问时,取出正文部分的 HTML ,和其他 HTML 块(比如 head/footer 部分)组合起来后再返回给用户

    我设想中的和 hexo 之类的静态博客的区别是,hexo 会预先解析好整个 HTML 页面,但是我的仅仅解析正文部分

    一些疑惑之处

    1. 像这样预先解析好一部分内容,对比完全用的时候再解析 MD ,性能节省程度明显吗?
    2. 解析前和解析后的内容都需要存储,那么是写入文件好(可能会有权限问题?)还是在 MySQL 中以 LongText 字段存储好?

    望不吝赐教

    第 1 条附言  ·  2023-07-06 12:11:51 +08:00
    补充一下,我现在有的博客是 Hexo 做的,托管在一台香港 VPS 上,走 CF CDN ,一直想改版,但是直到现在才有时间:

    https://mfwt.top/
    63 条回复    2023-07-09 14:37:48 +08:00
    blankmiss
        1
    blankmiss  
       2023-07-06 08:49:40 +08:00
    hexo 不是直接把 markdown 转为 html 吗
    5ibug
        2
    5ibug  
       2023-07-06 08:50:10 +08:00
    md 大多都是前端解析
    LeegoYih
        3
    LeegoYih  
       2023-07-06 08:51:28 +08:00
    纯 Markdown 可以试试 Docsify
    https://docsify.js.org/
    LxnChan
        4
    LxnChan  
       2023-07-06 08:57:57 +08:00
    hexo ,直接编译成静态 html ,没办法从编译好的 html 逆推回 markdown ,重写了文章或主题需要重新编译,变化比较小的话支持差异编译,相对比较快,编译过程均在本地,云端不参与任何 markdown 解析和(或)动态内容解析。

    https://lxnchan.cn
    mencounter
        5
    mencounter  
       2023-07-06 08:59:04 +08:00
    hexo+h2 ?
    mencounter
        6
    mencounter  
       2023-07-06 09:00:51 +08:00
    错了是 pm2
    aru
        7
    aru  
       2023-07-06 09:02:32 +08:00
    存储为 sqlite 数据库,然后生成 html 静态文件
    sunxiaping521
        8
    sunxiaping521  
       2023-07-06 09:03:55 +08:00
    很多 markdown 是转换为 json 格式的,然后通过 Mongodb 进行存储,并且这不是 mongodb 的优势吗?
    aru
        9
    aru  
       2023-07-06 09:04:38 +08:00
    话说个人 blog 有啥访问量和数据量,
    肯定用动态方便啊,写个 compose 一键拉起一键备份
    sqlite 数据库很合适,备份方便,如果还是担心性能问题,就生成静态文件缓存,但是备份就不用了
    tomiaa
        10
    tomiaa  
       2023-07-06 09:07:42 +08:00
    可以参考我的博客,kuangyx.cn
    vue 写的 md 文件,在 build 的时候会编译成 静态的 html 文件
    前端在访问的时候影响速度的就是
    1 、库文件
    2 、文件图片 src
    3 、静态资源
    我目前是这样做的
    1 、可以把大文件放在 github ,再部署成 github page 做一个外链,目前文件和图片、资源都是这样做的,可以参考我弄的 live2d ( https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/JS%20Lib/Live2d.html ),和游戏的 ROM ( https://kuangyx.cn/pages/game.html
    2 、https://www.jsdelivr.com/可以用 cdn 引用 github 仓库的文件
    3 、图片、js 文件懒加载
    wuzhanggui
        11
    wuzhanggui  
       2023-07-06 09:19:00 +08:00
    我的博客 https://blog.dumogu.top/
    存的时候 markdown 原文和解析的都存,简介名称这些也存个,反正存个能读取出个列表的结构,启动的时候读取简单的列表,访问的时候后端就读取解析好的然后用个模板引擎啥的拼接好 html 发给前端(想省事的直接字符串拼接,反正就返回个 html 字符串嘛),就完事儿了,不用啥数据库,自己的博客也不考虑文章量大功能多的情况。
    说前端解析的也可以,但是不用后端渲染的 seo 不好,保存文章啥的我前端先解析,耗费计算的就前端干,后端就接收字符串,存字符串,但是生成完好的 html 还是得后端拼接好
    我的博客就是这么做的,快得很
    zuijiapangzi
        12
    zuijiapangzi  
       2023-07-06 09:37:25 +08:00
    不太懂,有个东西叫 Gridea ,你可以看看
    zhhanging
        13
    zhhanging  
       2023-07-06 09:39:16 +08:00
    @wuzhanggui #11 抓个 bug 首页的文章图片在 safari 下拉伸严重
    LavaC
        14
    LavaC  
       2023-07-06 09:43:05 +08:00
    @tomiaa 文章也是 git 提交的吗?那好像有点麻烦。我的博客也是这么搞的,因为想到每次写都得 git xxxx 就不想更新了。
    wdssmq
        15
    wdssmq  
       2023-07-06 10:00:53 +08:00
    Z-BlogPHP + MD + Git 飘过……

    wdssmq/Markdown-To-Z-Blog: 使用 GitHub Actions + Markdown 更新 Z-Blog 博客。#md2zb
    https://github.com/wdssmq/Markdown-To-Z-Blog
    lwrench
        16
    lwrench  
       2023-07-06 10:03:47 +08:00
    我想你说的应该是 ssg ?现在很多文档站都是
    lete
        17
    lete  
       2023-07-06 10:28:30 +08:00
    不是很明白你这句话 (比如在线编辑较麻烦,文件内容大量重复等)

    1. 同样是打开电脑写文章,要不要在线编辑都一样,一个是在电脑里打开 markdown 编辑器,一个是打开浏览器,输入网址,登录,写文章。(难道你是要在手机上写文章?)
    2. 又不想让 vps 解析 markdown 又想直接得到 解析后的 html 文件,还吐槽文件内容重复,一个网站基本上很多页面局部部分都是重复的,不可避免,只有主要部分是变动的,比如文章内容是变动的,其它导航栏、页脚都一样

    在这里唧唧歪歪,还不如多掏钱买个好点的 vps ,要么 hexo 免费部署到 github
    Rache1
        18
    Rache1  
       2023-07-06 10:29:11 +08:00   ❤️ 1
    你用 WordPress 开 OpCache 再配上 SQLite ,再怎么的都不至于八九秒加载不出来吧。

    大概率是 CSS 和 JS 和 一些大图阻塞了页面加载。
    huolong
        19
    huolong  
       2023-07-06 10:32:06 +08:00
    换个好点的服务器就再加上 CDN 速度应该还好吧。
    https://vwo50.club/
    我这个 2H4G 的,感觉速度也不错。
    MFWT
        20
    MFWT  
    OP
       2023-07-06 10:44:31 +08:00
    @lete

    1. 是的,比如这篇主题,就是在手机上完成的(外出逛街的时候,或者排队的时候写两句)
    2. 我从来没有说不想让 VPS 解析 MD ,我只是考虑『用户访问时(可以是前端,也可以是后端)解析』还是『站长写完后缓存解析结果,用户直接访问』这两个的问题而已
    MFWT
        21
    MFWT  
    OP
       2023-07-06 10:45:48 +08:00
    @Rache1

    当时是用上海阿里云的学生机,5Mbps 带宽,不过为了免备案,用 SakuraFRP 的线路绕道了日本,再加上全站几乎都是单服务器,包括背景大图也是从这个服务器加载,可能这也是因素之一
    MFWT
        22
    MFWT  
    OP
       2023-07-06 10:47:35 +08:00
    @lete

    我现在是考虑『在线编辑』和『写好 MD 再上传』,尽量两种方式都支持,方便选择
    Rache1
        23
    Rache1  
       2023-07-06 10:51:06 +08:00
    @MFWT 学生机我记得起配好像就是 1C2G5M ,主要在于带宽太小, 跑个 5.5 、5.6 版本的 MySQL 应该没啥问题,就是带宽确实小。
    zpf124
        24
    zpf124  
       2023-07-06 10:57:11 +08:00
    相对简单的方式,其实是用 github pages ,使用 github action 或者其他 CI/CD 工具。

    你直接提交 md 到 git 仓库,对应的 ci 工具检测到代码更改后自动触发生成 html 的流程。
    这样你新建以及修改都会立即生成,不需要手动操作,Hexo 也可以用这种方式。
    x86
        25
    x86  
       2023-07-06 11:00:33 +08:00
    装个 WPJAM 该关的关,然后做做 memcached 或 redis 之类就差不多了
    wuzhanggui
        26
    wuzhanggui  
       2023-07-06 11:06:50 +08:00
    @zhhanging 之前也有人说,我苹果手机看着没啥问题,是电脑吧,没设备复现呐
    gps949
        27
    gps949  
       2023-07-06 11:20:36 +08:00
    我还是觉得我这种实践方式挺优的:
    https://reurl.cc/qLKZZp

    还可以配合 Obsidian 服用
    mytsing520
        28
    mytsing520  
       2023-07-06 11:29:14 +08:00
    国内 ZF 以及大型门户网站的内容,是前后台分离,后台编辑好内容生成静态页直接单向推送到前台
    后台有草稿箱机制,如果发布后有问题,那就重新编辑内容后再次发起推送流程,把前台服务器上的静态页面覆盖掉

    有 CDN 的话,这些步骤完成之后再到 CDN 上推送缓存刷新,再进一步的话,会调用 CDN 的接口直接让 CDN 刷新缓存
    tomiaa
        29
    tomiaa  
       2023-07-06 11:38:01 +08:00
    @LavaC 肯定啊,我博客开源的,弄了自动化,git 提交上去后自动部署到我的服务器
    janus77
        30
    janus77  
       2023-07-06 11:38:24 +08:00
    没这个必要的,生成 html 只是一次性任务,平时访问网站的时候又没有多少负载。你所说的只解析正文部分完全没有必要。
    况且按照 hexo 这类框架的主流性能来看,生成整个网站也就一分钟,大一点的就几分钟,这没什么好说的
    所以直接生成整站就行了
    mudssky
        31
    mudssky  
       2023-07-06 11:40:05 +08:00
    有服务器和域名肯定用动态,服务器资源放着浪费。
    我目前还是用 github pages ,github actions 自动部署已经很方便了,也不求别人看。单纯满足自己的。
    Lax
        32
    Lax  
       2023-07-06 11:54:09 +08:00   ❤️ 1
    为了“性能”去搞静态化,基本是方向跑偏了。服务器端生成页面的开销,在总延时中的贡献几乎是九牛一毛。
    建议先测一测整个链路的延时(因为你访问上海的云服务器但是绕了日本,这个延迟估计 140ms 起步),然后看一下整个页面加载了多少的资源文件( js/css 等)。浏览器中开发工具开瀑布图就知道时间花费在哪里了。
    WordPress 性能差众所周知的原因是主程序和插件的资源引用多,可以通过合并请求减少网络交互的深度,从而优化总体的加载时间。

    自己写一套真的是劳民伤财,不如直接用现有的基于 markdown 的方案。
    不要忘了,写个人博客,核心价值是内容,不是那个页面。
    deepzz
        33
    deepzz  
       2023-07-06 12:00:06 +08:00
    可以参考: https://github.com/eiblog/eiblog#%E5%8A%9F%E8%83%BD%E7%89%B9%E6%80%A7 ,为了加快加载速度做的优化。
    zephyru
        34
    zephyru  
       2023-07-06 12:04:30 +08:00
    只考虑两个问题
    1 、明显,如果服务器端解析,如果服务器性能不行会有延迟(并发情况下会明显不过一般遇不到),客户端解析,则是看客户端性能。
    2 、如果你打算写一套内容系统,可能存数据库会好点(推荐 sqlite 主要好迁移),如果只是单纯的博客,写文件会好点,以后想从动态改静态也可以直接用。

    核心,还是你想用 php 实现什么功能,说到底无论是静态生成博客还是动态的 php 博客都有很多成熟的解决方案。
    真的想折腾,静态资源上 CDN ,打开速度会快不少。

    附上,我的博客 https://saltfish.vip/ 。
    最开始使用的 Hexo 部署在 github Page 上。
    后面自己用 Nodejs 进行了一些改造 ,买的服务器配置也和你的差不多,5mb 的带宽,不过我备案了。
    其中也做了你现在想做的部分,编辑器,pjax ,文件预览,在线热更,预渲染,动态渲染(存数据库和文件也试过),live2d 之类的小插件。
    然后服务器到期了,换了现在用的 Typecho ,部署在自己家里的迷你主机里,通过通道服务解析域名。
    结论就是,如果只是想写博客,现成的方案会好一些。如果想顺便学点东西,什么想法都试下,会比较直观。
    lambdaq
        35
    lambdaq  
       2023-07-06 12:05:34 +08:00
    静态文件不是吃不吃服务器资源的问题,而是很容易放到 CDN 上去。
    MFWT
        36
    MFWT  
    OP
       2023-07-06 12:08:42 +08:00
    @Lax

    嗯,主要是想要减少页面加载的内容,目前的话在保证效果的情况下一个页面几十 KB 就搞定(头像占了一半空间)
    mephisto
        37
    mephisto  
       2023-07-06 13:54:22 +08:00
    @tomiaa 网站 favicon 有特点
    NoString
        38
    NoString  
       2023-07-06 14:11:54 +08:00
    啊?我 1h2c 3mbp 没啥访问了 WordPress 加完 cdn 感觉也还行啊

    https://kelovp.tech
    zzzmh
        39
    zzzmh  
       2023-07-06 14:20:14 +08:00
    如果你会 go 的话,推荐用 go 写后端,效率比 php 所谓的 8~9 秒快很多很多
    另外 md 转 h5 有个快速的方案,我目前在用,zzzmh.cn ,就是后端给前端 md ,前端用 js 做 md2h5 ,配合好的话还是飞快的,而且压力全部给到客户端 chrome ,服务器飞快。
    duke807
        40
    duke807  
       2023-07-06 14:34:00 +08:00 via Android
    https://blog.d-l.io/about-zh

    我的 blog ,不用数据库,免注冊可评论、删评论,md 写内容,浏览器端渲染,cf cdn ,定期生成快照 照顾部分爬虫
    chenjia404
        41
    chenjia404  
       2023-07-06 15:00:49 +08:00
    加一个 cloudflare 的 cdn ,然后页面全部缓存在 cdn 。
    zzzsy
        42
    zzzsy  
       2023-07-06 15:55:23 +08:00
    放 vercel ,静态很快的
    goldeye0351
        43
    goldeye0351  
       2023-07-06 15:59:24 +08:00
    我是用 notion 笔记当网站的数据库, 写完笔记, 就自动增量更新 blog 了.
    <a href="https://mynotion.life">https://mynotion.life</a>
    goldeye0351
        44
    goldeye0351  
       2023-07-06 15:59:42 +08:00
    我是用 notion 笔记当网站的数据库, 写完笔记, 就自动增量更新 blog 了.

    https://mynotion.life
    tLbf2p3UC4BM3H1N
        45
    tLbf2p3UC4BM3H1N  
       2023-07-06 16:19:35 +08:00   ❤️ 2
    改来改去发现,如果内容不好,谁关心你的页面,打不打得开重要吗?
    内容质量第一,页面排版和速度倒是其次。
    先搞出名气,再考虑体验。
    dfkjgklfdjg
        46
    dfkjgklfdjg  
       2023-07-06 17:18:16 +08:00
    搞一个私有仓库,然后每次提交的时候执行一下 github action 自动编译然后推送到你的 `xxx.github.io` 仓库不就好了吗?
    都不需要去管它了,每次用 md 编写玩文章之后点一下 push 后面的事情就交给 github 了。


    如果要考虑速度的问题,不应该优先考虑 CDN 吗?直接读最近节点的静态文件,肯定比访问你的服务然后拼接完了再返回快啊。
    divilbs
        47
    divilbs  
       2023-07-06 17:36:32 +08:00
    你的输出文章是否有人关注有人阅读,之后考虑你的“加速”吧
    di1012
        48
    di1012  
       2023-07-06 17:47:52 +08:00
    同意楼上说的,页面啥样不重要,重要的是内容!
    xiaohui1219
        49
    xiaohui1219  
       2023-07-06 19:12:01 +08:00
    用宝塔不挺好的吗,
    zhhanging
        50
    zhhanging  
       2023-07-06 22:33:39 +08:00
    @wuzhanggui #26 .content-container>.item .img 的 height: fit-content 去掉就好了,只有 safari 有这样的问题,手机 safari 横屏也是。就是 safari 把 height: fit-content 不知道为什么把高度设置成图片原始大小的高度了
    harrozze
        51
    harrozze  
       2023-07-06 23:34:06 +08:00
    可以考虑 用户第一次访问时才转换 md =>html ,并且程序检测 两个文件的更新时间,发现 md 更新的时候,重新转换。这样你的 php 负载很小,大部分都可以 redirect 到 html 文件的 url 去。
    harrozze
        52
    harrozze  
       2023-07-06 23:37:57 +08:00
    @harrozze #51 你想让第一个用户访问的时候也很流畅的话,就自己做真正的第一个用户。发布完 md 就去访问一下
    harrozze
        53
    harrozze  
       2023-07-06 23:41:51 +08:00
    想起来有一种格式叫 shtml ,支持服务器端 include ,这样你的页头页尾等等就可以不用重新编译,只需编译内容页后,include 了
    WhaleFall2020
        54
    WhaleFall2020  
       2023-07-07 01:04:44 +08:00 via Android
    @wdssmq 我是 hexo + github action build 一把梭,只需要维护存储 markdown 文件的目录 Git push 到 repository 上就触发 action 自动 build 对应的 github pages branch 。
    xuelang
        55
    xuelang  
       2023-07-07 08:07:26 +08:00
    我的 https://selfboot.cn/ 也是 hexo ,本来放 github pages ,最近迁移到了 netlify ,自带 CDN 加速。
    图片是放腾讯云 cos 上,没用 cdn 。图片压缩后,不用 cdn 速度也还可以。
    coolloves
        56
    coolloves  
       2023-07-07 09:11:34 +08:00
    直接用 nginx 的 proxy_cache 就可以了吧
    wuzhanggui
        57
    wuzhanggui  
       2023-07-07 09:52:09 +08:00
    @zhhanging #50 感谢感谢,没想到搁楼主这儿划个水热心网友帮忙给解决问题😘
    jaylee4869
        58
    jaylee4869  
       2023-07-07 11:34:35 +08:00
    我的博客直接基于 nextjs 做基于 markdown 的 ssg ,结合 html 的 ast 也可以在 markdown 中增加 jsx 组件和复杂的 dom (类似 mdx),放 GitHub 配合 Vercel CI/CD 和 serverless/edge function 花样能玩出很多,另外还套了 cloudflare cdn 大部分静态内容请求甚至都打不到 vercel 上,免费账户完全够用。

    https://lawrenceli.me
    naminokoe
        59
    naminokoe  
       2023-07-07 11:40:00 +08:00
    没那么复杂,wordpress + Super Page Cache for Cloudflare 插件完事,全球同步

    springwood.me
    jianyang
        60
    jianyang  
       2023-07-07 15:28:26 +08:00
    那么请问在一百万数据的情况下
    jianyang
        61
    jianyang  
       2023-07-07 15:30:32 +08:00
    回车发布了。。。
    那么请问在一百万数据的情况下
    是在目录里从一百万静态文件中找出并打开快
    还是在数据库里从一百万行记录查询快
    FarmerChillax
        62
    FarmerChillax  
       2023-07-07 16:20:59 +08:00
    静态博客为啥还要台服务器挂。。。 对象存储+ CDN 流量不高的情况下每个月都不花钱,非常适合个人使用
    lixuehan123
        63
    lixuehan123  
       2023-07-09 14:37:48 +08:00 via iPhone
    我的 Wordpress 挂 cf https://dajiayouxuan.com/
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2878 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 12:20 · PVG 20:20 · LAX 04:20 · JFK 07:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.