免费部署静态网页，国内外访问套餐 GitHub Pages、Vercel、CLOUDFLARE

部署自己的博客或者前端静态页面，要嘛找一些免费托管平台，要嘛自己买服务器和域名。买了服务器，还得自己配置 nginx 和域名解析等。如果希望国内外都能访问，服务器最好是香港的，域名也可以不用备案。如果只是博客，有一些免费的托管平台，可以很容易的实现。

GitHub Pages

正常来说，入行了程序员，GitHub 都会注册一个，蛮多人会使用 GitHub Pages 来进行博客的托管，免费域名一般是 username.github.io，博客的话，非常合适。入口是头像下面的 GitHub Docs，多语言有中文，很容易就能托管博客或者静态网页。只要代码提交了变动，就会自动打包发布，还支持自定义域名，当然，国内外都能访问，可能，国内访问会慢一点，还支持本地部署 Jekyll。GitHub Pages 没有用过，只能说到这了。

Vercel

Vercel 是一个云服务平台，支持静态网站和动态网站的应用部署、预览和上线，还能直接接入 GitHub，支持多种打包工具（webpack、vite、angular、nextjs）和纯静态的部署，只要代码有变动，就自动重新部署。

说说 Vercel 的几个点

• 有免费版本，最多两个项目，每个项目可以 100 个部署，每个部署 100 个构建，1000 个构建分钟数，源码大小限制 100M，这是每个月的限制。简单理解就是你最多部署两个免费的网站，至于其它限制，可以理解成一个月内你能够更新的次数。
• 内置 CI CD，代码提交变动了，就自动部署更新，支持一些自定义打包命令
• 不同分支可以单独发布

没有用的太深入，还能区分是测试环境、线上环境，也可以进行一些复杂的配置，如果真的会比较复杂，还是不要用免费的托管平台了，自己买一个服务器好一些。

进入官网注册之后，使用也比较简单，本来要截图一波，发现步骤蛮多的，有问题的话欢迎打扰。我是直接在网站部署，本地也支持部署，需要全局安装 vercel 的 npm 包，还是建议使用网站直接部署。

要注意，部署过程会选择 node 的版本，默认是 18，在项目的 settings 里面可以设置，目前看见的只有 16.x、18.x、20.x，不知道付费的是不是可以选择的更多。

当部署成功之后，会跟你一个带有 vercel 的访问域名，xxx.vercel.app，如果可以接受那就直接用，不能的话，可以自定义域名，自定义域名的话，就需要在购买域名的地方修改 DNS 的解析。

我只是普通的部署了一下，还有很多其它配置就没有了解了，可以大胆猜想一下，你需要的百分之八十都有，就是免费和付费的区别。

CLOUDFLARE

Cloudflare 百度百科：
Cloudflare 是一家美国的跨国科技企业，总部位于旧金山，在英国伦敦亦设有办事处。Cloudflare 以向客户提供网站安全管理、性能优化及相关的技术支持为主要业务。通过基于反向代理的内容分发网络(CDN, Content Delivery Network)、任播(Anycast)技术 [1]、基于 nginx+lua 架构的 Web 应用防火墙(WAF, Web Application Firewall) [2]及分布式域名解析服务(Distributed Domain Name Server)等技术，Cloudflare 可以帮助受保护站点抵御包括分布式拒绝服务攻击(DDoS, Distributed Denial of Service)在内的大多数网络攻击，确保该网站长期在线，同时提升网站的性能、访问速度以改善访客体验。

通过 Vercel 部署之后，我用流量访问了一下，访问不了，不知道国外是怎么样。因为 Vercel 支持自定义域名，很多会买一个域名，毕竟域名比服务器便宜太多了，然后通过 CLOUDFLARE 去解析，达到国内外都能访问。

Cloudflare 也有中文版，也能毕竟流畅的直接使用下来，有一些服务器域名方面的配置其实我也不是很了解，就跟着一步一步的走下来，然后去域名控制台修改了 Cloudflare 提供的两个 DNS 解析，修改之后都说要一定的时间，我配置之后，还挺快就能访问了。

总结一下，没有服务器域名，使用 GitHub Pages 或者 Vercel 可以免费部署自己的博客或者静态网站，免费的访问地址标识都比较明显，但是都支持自定义域名。只不过在国内，访问会比较缓慢（嗯，只是缓慢？）。可以自己买一个域名，域名便宜的多，然后使用 Cloudflare 达到加速，国内外都能访问。也可以自己有服务器和域名，使用 Cloudflare 达到国内外都能访问，毕竟香港服务器还是比较贵的。

免费的静态网站托管还是蛮多的，比如 Netlify、Firebase Hosting、Surge 等。

欢迎关注订阅号 coding个人笔记