使用Nuxtjs+cloudflare page部署高可用的半静态博客

船新版本

请看这里:https://blog.halberd.cn/articles/6562

想法

  某次逛 v2ex 看到 cloudflare page 这个东西,cloudflare 我还是知道的,毕竟用梯子经常被查 DNSsticker 。摸鱼无聊便进去瞅了瞅,和 vercel 差不多。但是 cloudflare 的速度还是很好的,于是我就抱着试试的想法开始重写了。   vue 有 Nutxjs 这个框架,专为静态打包设计,可以把一些静态的代码打包成固定的 html,对我来说唯一的好处就是 SEO,搜索引擎搜不到的网站没有灵魂!sticker

操作

  进度比想象中快,差不多一个星期就把整个项目迁移到 nuxt 了,踩的坑其实不多,就是 nuxt 自带的 dev server 实在太慢了。   代码部分无法细说,这里介绍如何做一个和本站一样的博客

  1. fork 项目
  2. 克隆项目代码:git clone
  3. 下载依赖:yarn install
  4. 运行测试:npm run dev,正常情况应该在 localhost:3000 就可以看到网页了。如果你遇到问题了无法解决可以联系我sticker
  5. 进入 cloudflare,创建一个 page,链接 fork 的 github 仓库,选择部署方式为 Nuxt.js选择Nuxt.js选择 Nuxt.js
  6. 回到代码部分,git push
  7. 再回到 cloudflare 控制台,应该就能看到正在部署了。

后话

  这个方案已经算是很不错的,基本只有一个缺点:cloudflare page 免费版限制一个月最多只能部署 500 次。正常情况已经够用了,你也不会天天写博客吧,一月一篇都算勤快的sticker   用电信访问 cloudflare 速度很慢,所以我给 DNS 开了一个电信专线,指到 vercel 的部署,vercel 速度比较快,但是一个月流量限制 100G。

标签:前端
更新于: 2022-02-25 16:49:13