Vercel使用有不少需要仔细配置的地方,可惜的是,自定义Vercel缓存时间,Vercel重定向等使用方法略复杂,不是开箱即用,有一定使用门槛,故这里单独列一篇文章详细说明Vercel的一些高级使用方法!

为什么使用 vercel

  • 国内 Github Pages 速度较慢。
  • vercel 速度快且能够自定义域名,能实现和 Github Pages 一样的效果

vercel 官方地址:vercel.com/

开始使用

img

  • 然后通过绑定的 github 或者 gitlab 导入需要部署的项目

img

  • 如果导入的项目是打包好的静态页,FRAMEWORK PRESET 选择 Other

img

  • 点击 deployed 进行部署,如果部署失败可以查看报错信息是不是上一步的某些选项没有覆盖。部署成功后会进入如图所示的界面

img

如何自定义域名

vercel 自定义域名

  • 下面演示如何自定义域名,默认情况下部署成功后 vercel 会给你生成一个默认的域名,如果想要修改成自己的域名可将域名名称修改成自己的。
  • 当选择修改成自己的域名名称后,vercel 会检查域名指向的 DNS 对不对,如果不对的话会提示你域名的 DNS 应该如何配置,按照 vercel 提示的 DNS 信息

在自己的域名的 DNS 配置中进行配置,如图

img

配置多个域名

对其他新增的域名选择重定向到自己的主域名即可

vercel 多域名配置

自定义Vercel服务器位置

Vercel线路已经很快了,但是可以通过选择Vercel部署服务器位置,更进一步加快中国大陆,亚洲区域的访问速度!

Vercel服务器选择

香港服务器虽然没有严格测试,但是中国大陆速度应该是最快的!

自定义Header缓存时间

vercel.com/docs

使用Vercel必备配置,本地缓存加速访问!

vercel.json

{
  "headers": [
    {
      "source": "/sw.js",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=0, must-revalidate"
        }
      ]
    },
    {
      "source": "(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, s-maxage=86400, max-age=86400"
        }
      ]
    }
  ]
}

Vercel自定义404

learn how to customize the 404 page.

Vercel流量超标怎么办?

最近查看了一下Vercel流量使用情况,发现RSS订阅流量太大了,占了30GB流量!

免费Vercel账户每月只有100G免费流量,怎么办?

有两种解决方法:

  1. 使用 DNS 多线路分流,例如DNSPOD 多线路负载均衡
  2. 使用 Vercel 提供的 redirects 或者 rewrites功能,把rss访问重定向到其它部署方式,例如Cloudflare

Vercel 流量

查看方法:dashboard -> usage

由于个人blog也部署到Cloudflare上面了,https://cfblog.17lai.site,Cloudflare的流量目前看着没限制,如是,可以使用如下重定向方法

"redirects": [
		{ "source": "/atom.xml", "destination": "https://cfblog.17lai.site/atom.xml" },
		{ "source": "/rss.xml", "destination": "https://cfblog.17lai.site/rss.xml" }
  	]

详细 Cloudflare 部署方法,戳 cloudflare Pages 部署

乒乓部署

也可以叫旋转门部署。

解决调试博客插件,修改半成品文章时部署到云端会影响正在查阅博客的用户的问题!

使用Docker版本本地预览是很不错,但是 jsdelivr 版本发布需要在 Github 生成新 release 这时本地就不行了。乒乓部署可以解决这个问题!

具体方法就是同时部署到两个地方A和B,博客域名在两个服务器之间切换。这里以 Vercel 为例

准备工作:

  • 创建2个Github仓库,对应服务器A和B的部署
  • 建立两个服务器A和B,分别关联两个 Github 仓库
  • 把调试完毕的代码上传到两个仓库
  • 这时通过服务器A和B都是可以正常浏览的

要调试的时候:

  • 发布到A之前,把博客域名转移到服务器B
  • 在服务A做一些调试,在线 debug 工作
  • 特别是在线 pageseed 测试调优,这种事必备方法。简单不需要新的 jsdelivr 版本调试本地 docker-hexo 调试即可!

输入想转移的域名

点击确认转移域名

调试完毕后:

  • 把域名切换到服务器A
  • 同时部署到服务器B,服务器B同步A的部署内容,以便下次备用

总结就是服务器A现行,服务器B做后备,调试发布使用A,调试A的时候B就顶上前台!

这样,调试和正常部署网络服务两不误。是不是感觉自己是个大聪明!

参考&致谢

系列教程

全部文章RSS订阅

Hexo系列

HexoRSS分类订阅

[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程

  • markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe

笔记系列

Note分类RSS订阅

Gitbook使用系列

Gitbook分类RSS订阅

Gitlab 使用系列

Gitlab RSS 分类订阅


文章作者: 夜法之书
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 夜法之书 !
评论
 上一篇

阅读全文

Potplayer终极优化教程实现PC视频播放最强画质
Potplayer终极优化教程实现PC视频播放最强画质 Potplayer终极优化教程实现PC视频播放最强画质
视频播放器使用还是有不少细节需要注意的。本文介绍流行播放器Potplayer 配置方法,搭配 Emby 和 embyLaunchPotplayer 使用的效果更佳!
2022-09-06
下一篇 

阅读全文

hexo博客博文撰写篇之完美笔记大攻略终极完全版
hexo博客博文撰写篇之完美笔记大攻略终极完全版 hexo博客博文撰写篇之完美笔记大攻略终极完全版
hexo博客文章卷写技巧,包括MarkDown,hexo技巧,html插入,美化方法,写作方法,写作工具,知识储备方法,开发工具,等一系列全介绍!终极攻略篇
2022-08-17
  目录