关于如何创建一个国内能够访问的站点

相信很多程序员都希望能够拥有一个属于自己的static site,保存自己时不时的想法。但是苦于github pages加载速度慢，且对国内访问不友好，经常就是connection failed / 404的状态。

今天我就来教一下，如何利用Vercel+Cloudflare实现cdn加速国内代理，完全免费哦！

了解博客、SSG、静态站点#

Start 从博客的定义讲起, 什么是博客?

博客（英语：blog）是一种在线日记型式的个人网站，借由张帖子章、图片或影片来记录生活、抒发情感或分享信息。博客上的文章通常根据张贴时间，以倒序方式由新到旧排列。

如何创建一个博客，有很多开源的静态站点生成器(SSG)可以选择，比如:

可以选择的static site generator

Hexo: 老牌的静态站点生成器，生态成熟，主题选择丰富，适合快速上手。 Hugo: Go 语言编写，速度极快，支持多语言，部署简单。 Astro: 近几年兴起的新星，支持部分渲染、MDX、整合 React/Vue/Svelte 等框架，非常适合写博客或文档。 Next.js: 严格意义上不算 SSG，但它提供 next export 静态导出能力，和 Vercel 原生契合，能做更复杂的动态功能。

这些工具允许你用 Markdown 写文章，然后一键生成整站的静态文件。

那么，`静态`站点是什么意思？#

Web开发，这个技术本身就是依托于浏览器的，比如我们众所周知的Chrome浏览器，本质上是一个巨大的执行引擎。执行什么东西呢? Javascipt代码，所以说js的解释器其实内置在了V8引擎里。

光有js还是不够的，我们还需要一个可视化的GUI界面来让用户看到访问的数据，并且还需要美观的样式，这就引入了Html和CSS。好的，你已经掌握了前端开发的所有技能(开玩笑)，不过说实话，前端开发的本质就是如此，构建一个用户友好且稳定、快速访问的交互式界面。All you need is the THREE things above.

TIP

说回静态，其实已经很明了了。我们知道现代Web开发是C-S架构，客户端-服务端，而静态的意思就是html,css,js都已经固定好了，不会改变了。由server端生成静态的前端打包文件夹dist，发送给客户端（浏览器），这就是静态网站的含义。它在构建时生成，不需要网络I/O请求，虽然实时性弱，但因为所有数据都在本地，因此访问起来非常快。

话虽如此，现代个人博客并不是完全静态的，比如大部分播客网站都有评论区集成，比如giscus这种github自托管的小工具，肯定也是需要访问IO的。但一般来说，只要网站主要内容blog是静态的，那么就是个静态网站。

Vercel#

Vercel是一家总部在美国的公司，前身叫 Zeit。

它提供了一个云端平台，让开发者可以一键部署前端项目，尤其是静态站点和 Serverless 应用。

其中Serverless是一个国外很流行的技术，属于云服务，这里就不展开。

Vercel还和 GitHub/GitLab 深度集成，提供了优质的CI/CD服务，每次git push的时候，都会自动重新构建、部署项目。

使用静态站点生成器构建一个部署在vercel的博客#

SSG之前介绍了，我之前有使用过Hexo,Hugo,但现在切换到了Astro。

跟着官网的教程创建一个站点并部署在github上，然后你需要在vercel中，add new project打开这个项目。import Github repository将你的github项目导入，进入配置界面。在这里配置框架预设，如果你是astro就用其预设。

一般来说不需要动其他的，因为SSG的预设足够了。如果需要自定义的话也可以配置构建和输出的设置，环境变量。示例如下：

// Build Command
astro build
npm run build
// Output Directory
dist
outputs
// Install Command
pnpm install
yarn install

NOTE

deploy完成后，vecel会给你一个类似 [项目名].vercel.app的域名，通过这个域名你就可以访问你的项目了（前提是开了vpn），在中国大陆一般是访问不了的。这个时候就需要另外一个东西：Cloudflare。

CLoudFlare通过cdn加速访问#

Cloudflare 是一家美国公司，提供全球范围的 CDN（内容分发网络）、DNS 解析、网站安全和边缘计算服务。

它的目标是：让网站更快、更安全、更可靠

Cloudflare 在全球有 300+ 数据中心，为什么能够通过cdn加速？

当用户访问网站时，请求会自动就近到 Cloudflare 节点，再由节点缓存内容或回源请求。
好处：减少延迟，提高国内/海外访问速度。

此外，这家公司还提供了dns解析服务

Cloudflare 提供免费且非常快的 DNS（著名的 1.1.1.1 公共 DNS）。
你可以把域名托管到 Cloudflare，在它后台配置解析记录。

IMPORTANT

在此之前，你需要去一个国内域名平台，购买一个域名，比如阿里云域名，因为如果没有国内的域名，是解析不到国内的，最好也备案并添加了ssl证书。

首先，我们登录cloudflare官网，注册一个账号，然后把你的自定义域名输入，等待cloudflare验证后，进入dns解析的控制面板，把你的域名重定向到[项目名].vercel.app，也就是你vercel提供的域名。

这里我把blog.baoyuxiag.fun解析到了cname.vercel-dns.com，类型是CNAME。解析到的域名为什么并不是携带项目名的域名呢？因为vercel本身也支持自动根据你的项目，分配应该解析到的域名。你只要在vercel主页点击domains，添加你购买的国内根域名，虽然说会弹出一个warning弹窗，因为已经检测到了代理服务器cloudflare，但是不要紧。此时cloudflare就知道了应该缓存哪个域名的数据。

这么做之后，你的网站就被cloudflare反向代理了。所有的请求都会先打到cloudflare代理服务器上，因为代理服务器在中国或者日韩香港这样的周边节点，所以可以在中国地域上进行cdn加速访问，再由这些服务器去缓存国外的服务器的数据。实际测试下来，这样子你的vercel app基本上能够被流畅访问了。

如果你喜欢我的博客，不妨关注一下! YuxBao

Next 解决Nacos容器本地环境下外部MySQL服务配置问题