自定义404页面 | 实现国内正常访问

本文部分信息可能已发生改变，请自行甄别

平台即服务

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
Github: vercel.app Blocked by SNI and DNS Pollution in China