1、前言
一个网站上线的步骤无非分成两步：将网站部署到服务器中，然后将域名解析到该服务器。如果不使用域名，则只能使用服务器IP地址访问该网站，不利于网站的SEO和传播。但是在国内注册域名需要实名认证，需要备案，因为现在规定不备案的国内域名是不给解析的，不解析的域名就不能用，网站也就不能打开。备案对网站的内容、用途，甚至备案填写的信息都作出了限制，可以说是十分麻烦。
对于博客、官网这种简单的静态网站，一般直接采用Github Pages、Coding Pages、Netlify和Vercel等方式进行静态托管即可，无需租借服务器进行部署（网站的服务器或域名，只要有其一是国内的，都需要备案，否则都会被拦截）。但是拿Github Pages来说，很多时候不开启科学上网的话，页面会十分卡顿（网站测速可用：www.itdog.cn 。同时域名也不是完全可自主定义，这时候也会去考虑将自定义域名解析到我们的网站上。但是使用国内的域名，即使不使用服务器，只进行一个简单的URL转发工作，都需要实名认证+网站备案。。。
因此，把目光瞄准的国外相关厂商，减少冗余流程的同时满足我们的需求。笔者选择的方案是：Porkbun+Vercel+Cloudflare。其中Porkbun用于购买域名，然后用Cloudflare解析我们的域名（Porkbun也提供了DNS解析服务，但不稳定），解析到Vercel这个网站托管和自动化部署平台（Cloudflare本身也提供了网站托管和自动化部署服务，但速度一般）。
2、Porkbun 租借域名
2.1 Porkbun 介绍
1、Porkbun是一家通过ICANN认证的域名商，成立于2016年，总部位于美国。
2、Porkbun创始人Raymond同时也是SnapNAMES的创始人，域名界的名人。
3、Porkbun支持支付宝买域名，比较方便，因为是国外运营商，所以不用备案。
4、另外，Porkbun有很多的优点：免费送WHOIS隐私保护，后台操作简单，没有隐藏费用，客服回复快，URL转发（301，302，屏蔽转发），账号登陆二次验证和账号登陆邮件通知。
2.2 Porkbun 账号注册流程
在Porkbun上买域名，首先要注册一个账号，否则无法完成后续的结账付款，注册流程如下。
1、访问 porkbun.com，点击右上角的SIGN IN进入注册页面：
2、然后在右侧的Create a New Account区域填好相关信息（除了邮箱，其它必填信息都可以随便填）：
3、填写完所有的注册信息，点最下方的Create Account按钮，这时会收到Porkbun发来的账号验证邮件，将验证码粘贴到注册页面的验证码填写弹窗，就完成Porkbun的账号注册了
2.3 Porkbun 域名购买教程
账号注册完，接下来登陆你的Porkbun账号，开始购买域名。
1、搜索框输入你想要购买的域名，如下图所示：
2、选择你想要的域名，先点加号后点check out，如下图所示：
3、确认无误后结账付款，付款方式支持双币信用卡、paypal、支付宝和比特币。
4、付款之后，你的邮箱里会收到Porkbun给你发的账单邮件，如下图所示：
5、去到DOMAIN MANAGEMENT页面也能看到已购买的域名：
3、Vercel 托管网站
3.1 Vercel 介绍
根据 【常见静态网站托管平台使用及多节点部署方案】这篇博客可知常见的静态网站托管平台有平台有Github Pages、Coding Pages、Netlify和Vercel等若干种，结合【使用 Vercel/Netlify/Cloudflare 托管个人博客】这篇博客的测评结果，最终决定用Vercel来托管网站。
Vercel是一个云服务平台，支持静态网站（纯静态页面，没有接口数据交互）和动态网站的应用部署、预览和上线。如果你用过GitHub Pages，那么心里可能不会太陌生，但你也能通过Vercel集成GitHub后，在GitHub项目进行代码推送，PR合并自动部署的目的，且你不需要考虑服务器问题。
3.2 Vercel 账号注册流程
1、首先去到 Vercel 官网，点击右上角的Sign up按钮：
2、选择Hobby类型即可：
3、直接选择Github进行登录即可：
4、填好校验手机号并输入验证码：
5、登录成功可看到：
3.3 Vercel 静态托管流程
1、点击Add Github Account关联我们的Github仓库：
2、选择要部署的存储库，并设置构建命令和存放构建的页面的目录（默认配置即可）：
3、可以看到网站正在构建：
4、可以在Overview页面看到我们已部署的网站：
且Vercel会自动检测到代码更新，并触发构建和部署流程。
Cloudflare Pages是一个静态网站托管服务，功能和Github Pages差不多，可以存放静态网页，还可以直接部署前端项目。如果你的网站只是静态博客或帮助文档的话，可以完全不需要购买服务器。Cloudflare是全球最大的几个CDN服务商之一，速度应该会比Github Pages好一些，而且Cloudflare Pages一个账户可以创建多个网站。
2、关联 Github 存储库：
3、选择要部署的存储库，并设置构建命令和存放构建的页面的目录：
4、Cloudflare克隆存储库后会自动执行npm install之类的命令下载所需的依赖，然后执行构建命令，然后把构建完成的文件放到网站目录。点击保存并部署后Cloudflare Pages就会开始构建和部署，如下：
5、部署完成后点击继续处理项目就可以看到部署的网站了，且默认开启了自动部署，如下：
6、同时可以设置自定义域，将网站域名改为前面在Porkbun上申请的域名，此处不作赘述。
4、Cloudflare 使用
4.1 Cloudflare 介绍
Cloudflare是一家全球最著名的CDN加速服务商，提供了免费和付费的网站加速和保护服务。即使是免费版，也提供了比较全面和强大的功能，非常不错。我们可以使用它进行 网站的 DNS 解析和 CDN 加速，也可 使用 Cloudflare Pages 托管静态网站。
4.2 Cloudflare 账号注册流程
1、访问 www.cloudflare.com/zh-cn/plans，点击右上角的登录进入登录页面：
2、点击注册按钮进入注册页面：
3、填写完邮箱和密码，点下方的Sign up按钮确定注册，这时会收到Cloudflare发来的账号验证邮件，点击下方的验证链接即可完成验证：
4.3 Cloudflare 静态托管流程
Cloudflare Pages是一个静态网站托管服务，功能和Github Pages差不多，可以存放静态网页，还可以直接部署前端项目。如果你的网站只是静态博客或帮助文档的话，可以完全不需要购买服务器。Cloudflare是全球最大的几个CDN服务商之一，速度应该会比Github Pages好一些，而且Cloudflare Pages一个账户可以创建多个网站。
2、关联Github存储库：
3、选择要部署的存储库，并设置构建命令和存放构建的页面的目录：
4、Cloudflare克隆存储库后会自动执行npm install之类的命令下载所需的依赖，然后执行构建命令，然后把构建完成的文件放到网站目录。点击保存并部署后Cloudflare Pages就会开始构建和部署，如下：
5、部署完成后点击继续处理项目就可以看到部署的网站了，且默认开启了自动部署，如下：
6、同时可以设置自定义域，将网站域名改为前面在Porkbun上申请的域名，此处不作赘述。
4.4 Cloudflare 解析使用流程
4.4.1 添加站点
1、点击右边的添加站点按钮进入添加解析页面：
2、输入我们刚在Porkbun购买的域名并点击继续按钮进入下一步：
3、选择Free服务（个人项目足矣）并点击继续按钮进入下一步：
4、可以看到该域名目前的DNS记录为空，如果不为空（可能是Porkbun域名本身自带的解析）则删掉现有的记录：
4.4.2 更新名称服务器
1、在网站页面可以看到我们刚刚添加的站点，看到文案待处理的名称服务器更新：
2、可以点击进去看到更新名称服务器流程：
3、按照流程说明，先在 ICANN WHOIS 上查找该域名的注册机构：
4、我们这个域名是在Porkun上注册的，以Porkun为例，我们来学习如何修改域名服务器。如果你在阿里云、namesilo注册的域名，可以查看这篇教程：如何使用NS进行域名解析。首先登录 Porkbun，进入域名管理界面：
5、按下图序号操作，进入域名详细显示页面：
6、在DNS RECORDS处点击进行编辑，清空Porkun域名自带的DNS解析记录：
7、在NAMESERVERS处点击进行编辑，先清空已有的NS记录，然后将已分配的Cloudflare名称服务器黏贴到此处，然后提交即可。通常需要48h生效，实际经过测试，大约5-10分钟大部分地区都能生效的。
8、回到Cloudflare，点击立即检查名称服务器按钮进行检查：
9、检查通过后，会收到邮件：
检查通过后，可以在Cloudflare添加相应记录让该域名发挥作用，下面讲三种用途，分别是URL转发、域名重定向和映射到服务器。
4.4.3 解析可实现的一些功能
4.4.3.1 实现URL 转发
一些第三方博客平台的主页链接可能不太美观，包含一些数字和难以记忆的字符，例如掘金的个人主页链接形式为https://juejin.cn/user/数字。为了解决这个问题，可以考虑使用一个域名来进行 URL 转发。
用阿里云/腾讯云等国内云服务厂商实现类似的效果可看笔者的另一篇文章：不是吧，都2023年了，你的掘金个人主页还在用传统域名？
用Cloudflare实现则是通过以下的步骤：
1、首先我们模仿阿里云中实现的方法，添加一条DNS记录，类型为URL，名称直接填上面的域名、内容填需要转发的URL即可：
此时发现不起作用，lajiao.blog 并没有跳转到掘金博客。
2、此时回到Cloudflare系统，添加一条A记录，IPv4 地址随便写即可，因为后面是要做域名跳转的，这里填写的 IPv4 不是真正要跳转的 URL。
3、点击左侧的页面规则为站点添加如下规则：
这样就完成域名跳转的配置了。具体的规则配置帮助可以参考：developers.cloudflare.com/rules/page-…。
在浏览器里输入 lajiao.blog 就能跳转到目标 URL。
4.4.3.2 为已托管网站提供 DNS 解析
上面我们用了Vercel托管网站，支持绑定自定义域名进行解析，且Vercel本身有边缘网络节点，在国内的速度其实还不错，即便后来流量改道去了新加坡。但是为什么要使用Cloudflare来加速Vercel，因为Vercel以前出现过被屏蔽的情况(详见《vercel无法访问带来哪些影响 》)。Cloudflare虽然速度不是特别快（因为免费版无法使用大陆节点），但是用来防止部署在Vercel上面的项目再次出现无法访问的情况也算是一个不错的选择。
同时Vercel部署之后会自动生成一个以vercel.app为后缀的域名，也支持自定义域名。自定义域名可以通过 CloudFare等域名控制台进行域名解析并利用代理服务达到访问Vercel的目的。
1、来到Vercel的网站设置界面，将网站域名改为前面在Porkbun上申请的域名：
2、回到Cloudflare的域名控制台，将上述说明的DNS记录添加到网站中：
注意：可以添加CNAME解析，也可以添加A解析，两者选其一即可：
CNAME解析：默认记录值容易被墙，可以改用cname-china.vercel-dns.com.。A解析：记录值填入76.223.126.88，也可以前往 Vercel All IP 自行挑选记录值。
3、此时可以看到Vercel的DNS检查通过：
4、Cloudflare导致的重定向次数过多可以通过将“SSL/TLS 加密模式”设置为完全（Strict）解决：
（参考解决博客：【Vercel + Cloudflare = 重定向次数过多？Cloudflare + Vercel err_too_many_redirects 解决方法】）
5、此时便可通过自定义域名去访问我们在Vercel托管的静态网站了。（如果没有看到网站完全的效果，则尝试CTRL+F5强制刷新。）
4.4.3.3 实现映射到服务器
关于部署，可看笔者的另一篇文章：三分钟学会使用 Docker 部署前端项目
目前操作的前提是已购买服务器且已进行网站部署，直接用服务器的公网IP地址可进行网页访问。但是经过实践发现，即使该域名不用备案就可被Cloudflare进行解析，但是由于服务器是国内的阿里云、腾讯云等云服务器厂商，过十几分钟依旧会被拦截：Non-compliance ICP Filing，需要租借外国云服务器可看文章：10大国外云主机服务器推荐。
1、添加一条类似下面的A记录，内容指向我们的服务器公网地址：
2、此时去 www.lajiao.blog 即可访问我们的网页。
3、使用Cloudflare接管网站的CDN后，默认就可以用https访问网站，但同时也保留了http协议的访问。如果站长希望强制使用全站https，Cloudflare面板也是支持的。
4、点击TLS/SSL，概述，保持“灵活”：
5、点击“边缘证书”，点击启用“始终使用 HTTPS”：
经过这个设置后，客户再次访问类似于 www.lajiao.blog 的网址，则会强制跳转到 www.lajiao.blog 达到全站https的效果。
