[{"data":1,"prerenderedAt":75},["ShallowReactive",2],{"content:\u002Farticles:7832":3},{"item":4,"md":15,"html":16,"menu":17,"excerpt":28,"related":29},{"title":5,"len":6,"tags":7,"id":9,"time":10,"modifyTime":11,"encrypt":12,"showComments":13,"customSlug":14},"使用Nuxtjs+cloudflare page部署高可用的半静态博客",1118,[8],"前端",7832,1617817756615,1679560048470,false,true,"",null,"\u003Cfieldset data-marked-line=\"1\">\u003Clegend>船新版本\u003C\u002Flegend>\u003Cp>请看这里：\u003Ca href=\"https:\u002F\u002Fblog.yunyuyuan.net\u002Farticles\u002F6562\">https:\u002F\u002Fblog.yunyuyuan.net\u002Farticles\u002F6562\u003C\u002Fa>\u003C\u002Fp>\n\u003C\u002Ffieldset>\u003Ch1 data-marked-line=\"5\">\u003Csup class=\"fake-head\" id=\"%E6%83%B3%E6%B3%95\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E6%83%B3%E6%B3%95\">想法\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"7\">  某次逛v2ex看到\u003Ccode>cloudflare page\u003C\u002Fcode>这个东西，cloudflare我还是知道的，毕竟用梯子经常被查DNS\u003Cimg src=\"\u002Fsticker\u002Faru\u002F15.png\" alt=\"sticker\"\u002F>\n。摸鱼无聊便进去瞅了瞅，和vercel差不多。但是cloudflare的速度还是很好的，于是我就抱着试试的想法开始重写了。\n  vue有\u003Ca href=\"https:\u002F\u002Fnuxtjs.org\u002F\" target=\"_blank\">Nutxjs\u003C\u002Fa>这个框架，专为静态打包设计，可以把一些静态的代码打包成固定的html，对我来说唯一的好处就是SEO，搜索引擎搜不到的网站没有灵魂!\u003Cimg src=\"\u002Fsticker\u002Fyellow-face\u002F32.png\" alt=\"sticker\"\u002F>\u003C\u002Fp>\n\u003Ch1 data-marked-line=\"11\">\u003Csup class=\"fake-head\" id=\"%E6%93%8D%E4%BD%9C\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E6%93%8D%E4%BD%9C\">操作\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"13\">  进度比想象中快，差不多一个星期就把整个项目迁移到nuxt了，踩的坑其实不多，就是nuxt自带的dev server实在太慢了。\n  代码部分无法细说，这里介绍如何做一个和本站一样的博客\u003C\u002Fp>\n\u003Col data-marked-line=\"16\">\n\u003Cli>fork \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fyunyuyuan\u002Fcloudflare-blog\" target=\"_blank\">项目\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>克隆项目代码:\u003Ccode>git clone\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>下载依赖:\u003Ccode>yarn install\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>运行测试:\u003Ccode>npm run dev\u003C\u002Fcode>，正常情况应该在\u003Ccode>localhost:3000\u003C\u002Fcode>就可以看到网页了。如果你遇到问题了无法解决可以联系我\u003Cimg src=\"\u002Fsticker\u002Fyellow-face\u002F56.png\" alt=\"sticker\"\u002F>\u003C\u002Fli>\n\u003Cli>进入\u003Ca href=\"https:\u002F\u002Fdash.cloudflare.com\u002F\" target=\"_blank\">cloudflare\u003C\u002Fa>，创建一个page，链接fork的github仓库，选择部署方式为\u003Ccode>Nuxt.js\u003C\u002Fcode>。\n\u003Cspan class=\"image-container\">\u003Cimg data-viewer alt=\"选择Nuxt.js\" title=\"选择Nuxt.js\" style=\"width: 40rem !important;\" src=\"https:\u002F\u002Fr2-blog.yunyuyuan.net\u002FVRHGgWIQ3xjrk6w.png\"\u002F>\u003Csmall class=\"desc\">选择Nuxt.js\u003C\u002Fsmall>\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli>回到代码部分，\u003Ccode>git push\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>再回到cloudflare控制台，应该就能看到正在部署了。\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch1 data-marked-line=\"25\">\u003Csup class=\"fake-head\" id=\"%E5%90%8E%E8%AF%9D\">\u003C\u002Fsup>\u003Ca class=\"header-link\" href=\"#%E5%90%8E%E8%AF%9D\">后话\u003C\u002Fa>\u003C\u002Fh1>\u003Cp data-marked-line=\"27\">  这个方案已经算是很不错的，基本只有一个缺点:\u003Cspan style=\"color: red\">cloudflare page免费版限制一个月最多只能部署500次\u003C\u002Fspan>。正常情况已经够用了，你也不会天天写博客吧，一月一篇都算勤快的\u003Cimg src=\"\u002Fsticker\u002Faru\u002F13.png\" alt=\"sticker\"\u002F>\n  用电信访问cloudflare速度很慢，所以我给DNS开了一个电信专线，指到vercel的部署，vercel速度比较快，但是一个月流量限制100G。\u003C\u002Fp>\n",[18,22,25],{"size":19,"text":20,"url":21},"big","想法","%E6%83%B3%E6%B3%95",{"size":19,"text":23,"url":24},"操作","%E6%93%8D%E4%BD%9C",{"size":19,"text":26,"url":27},"后话","%E5%90%8E%E8%AF%9D","船新版本 请看这里：https:\u002F\u002Fblog.yunyuyuan.net\u002Farticles\u002F6562 想法 某次逛v2ex看到cloudflare page这个东西，cloudflare我还是知道的，毕竟用梯子经常被查DNS 。摸鱼无聊便进去瞅了瞅，和vercel差不多。但是cloudflare的速…",[30,42,51,58,65],{"item":31,"count":41},{"title":32,"len":33,"tags":34,"id":37,"time":38,"modifyTime":39,"showComments":13,"encrypt":12,"customSlug":40},"关于本站的重构 (又双叒叕重构了)",1503,[8,35,36],"vue","杂谈",8500,1741528184917,1759579038298,"about-renovate",1,{"item":43,"count":41},{"title":44,"len":45,"tags":46,"id":48,"time":49,"modifyTime":50,"showComments":13,"encrypt":12,"customSlug":14},"用React实现跟随鼠标的3D透视效果",863,[8,47],"react",6856,1731479185023,1734350101562,{"item":52,"count":41},{"title":53,"len":54,"tags":55,"id":56,"time":57,"modifyTime":57,"encrypt":12,"showComments":13,"customSlug":14},"vue3用于管理axios异步请求一致性的功能函数",3227,[35,8],9820,1725014139074,{"item":59,"count":41},{"title":60,"len":61,"tags":62,"id":63,"time":64,"modifyTime":64,"encrypt":12,"showComments":13,"customSlug":14},"Nuxt3创建SSE server以及client的简明教程",1905,[8,35],5449,1720261091923,{"item":66,"count":41},{"title":67,"len":68,"tags":69,"id":72,"time":73,"modifyTime":74,"encrypt":12,"showComments":13,"customSlug":14},"树莓派监控摄像头制作",1673,[70,71,8],"树莓派","python",1010,1669896775319,1679559691141,1793351210650]