更换平台即服务为Vercel,自定义404页面,解决*.vercel.app已被SNI阻断和DNS污染屏蔽问题

平台即服务

Github被墙后只能代理访问博客,Vercel国内访问速度还不错,是个不错的替换方案

在其官网选择Hexo项目直接部署即可,不需要任何配置

更新博客

存在两种更新方式:

  • 安装命令行工具直接部署
npm i -g vercel
vercel --prod --confirm

  • Push到Github仓库让Vercel自行拉取

404页面

默认报错页面不美观且会指向官方文档

最简单的自定义方式是在source目录下创建404.html页面

这是一个简单的404页面

<!DOCTYPE html>
<html lang="en">
<head>
<title>404 Error</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
body {
background-color: #f1f1f1;
}
.vertical-center {
min-height: 100%;
min-height: 100vh;
display: flex;
align-items: center;
}
</style>
<body>
<div class="vertical-center">
<div class="container">
<div id="notfound" class="text-center ">
<h1>😮</h1>
<h2>Oops! Page Not Be Found</h2>
<p>Sorry but the page you are looking for does not exist</p>
<a href="https://blog.btwoa.com/">Back to blog</a>
</div>
</div>
</div>
</body>
</html>

Cloudflare

8月27日后,*.vercel.app已被SNI阻断和DNS污染,国内无法正常访问,引起了不小的麻烦。但可以另辟蹊径,套层CDN就可以正常访问了

CDN我选用的是Cloudflare免费方案

国内访问速度前后对比

Cloudflare CDN部署后访问速度仍不理想,可以按这篇教程继续优化

[Cloudflare for SaaS实现CDN自定义节点](通过Cloudflare for SaaS实现CDN自定义节点(自选IP) | Blog | btwoa)

参考资料

Vercel: Custom 404 Page https://vercel.com/guides/custom-404-page#what-if-i-need-to-name-my-404-file-something-different

Github: vercel.app Blocked by SNI and DNS Pollution in China https://github.com/vercel/community/discussions/803