近日闲来无事，想将之前的旧站点继续维护起来，奈何使用的搬瓦工服务器因为搭建了的缘故，总是会出现IP被封的问题，用来搭建站点并不合适(需要经常变更IP地址)。但因为预算有限也不愿意再单独购买一台主机用来建设站点，所以就想着找找免费的建站服务提供商来部署自己的网站，如今站点初步建设完成，总结分享给希望低成本建站的朋友。

这套部署方案并不需要你懂代码，按部就班复制粘贴完成配置即可，对非技术人员来说相对简单。

免费的建站服务提供商

这里面WordPress.com、Wix、Weebly免费版本都有内置广告，这不是我想要的，我需要干净的页面。GitHub Pages、Google Sites都有离开了VPN无法访问的问题。Netlify注册居然需要身份证验证？？

当然还有传统的wordpress方案，这个和Wordpress.com不是一个东西，因为我不准备购买额外的主机所以不在选择内。而且即使购买主机还需要有数据库，如果选择ALL IN ONE的模式部署，稳定性是很大的问题，而且我个人不会php，无法自己二次开发，所以如果你是技术人员Wordpress的可折腾性是不够的，而如果你是非技术人员Wordpress部署非专业人士也是不太好解决的而且没有源码未来的拓展性也受限。

最终选择的方案是Vercel和Vercel Template的一个轻量级建站模版Platforms Starter Kit，不过结论是这东西其实并没有想象中那么好，主要是bug有不少完成度不高，但是作为个人博客或者独立站的基础模板完全够用，于此同时还能得到完整的SSL服务、监控、日志、存储、图片服务、云服务的高稳定性，而这些功能的费用是0。

相关资源地址

模板地址：https://vercel.com/templates/next.js/platforms-starter-kit

部署流程以及注意点

• 准备工作：

1. Github账号(https://github.com/)，注册流程省略了
2. Vercel账号(https://vercel.com/)，可以通过github账号一键注册，注意下Plan Type选择Hobby是免费的，其他省略了
3. 购买一个域名(省略)

• 部署流程

1. 部署很简单，访问模版地址(https://vercel.com/templates/next.js/platforms-starter-kit)，点击Deploy

2. 接下来就是创建代码仓库（仓库名随意）、创建存储数据库（数据库名随意）

3. 配置项目，这一步稍麻烦一点，但也都是复制粘贴的事，下面挨个讲一下具体配置方法

• 域名NEXT_PUBLIC_ROOT_DOMAIN，这里要注意填写你申请的根域名，比如你申请的是gooddomain.com，那就写gooddomain.com不需要加任何前缀，因为代码里有很多和域名硬编码的东西，所以建议不要写其他形式

• 登陆主账号认证信息设置，这个账号主要是登陆后台进行网站管理使用，三个配置项NEXTAUTH_SECRET, AUTH_GITHUB_ID，AUTH_GITHUB_SECRET

这几个配置项通过https://github-client-generator.vercel.app/↗这个地址生成即可，访问上面的地址，一路点击，需要输入名字的地方随意输入，然后就得到了想要的秘钥，拷贝之后填进去即可。

注意在这一步创建完github秘钥并拷贝完成后，需要回到github页面修改该秘钥的回调地址，否则将会出现登陆后回调不正确的问。访问https://github.com/settings/apps进行修改

添加回调地址，把localhost:3000替换为app.你自己域名即可

• 图片存储TOKEN配置BLOB_READ_WRITE_TOKEN，需要先创建一个Blob Storage的库，打开项目或者应用页面，点击Storage选项卡，点击create输入一个名字即可创建完成，然后复制粘贴即可

• 以下配置非必须项，主要是为了实现这个模板多租户的功能，需要调用vercel的Api，所以需要配置，如果你不需要这些功能，那么就可以随便填（因为不填无法部署）

- 认证的Vercel秘钥配置AUTH_BEARER_TOKEN，在这个链接https://vercel.com/account/tokens创建，名字随意，注意创建完成需要复制一下秘钥，因为秘钥只会在创建完成后给你展示一次，后续你就复制不了了

- 项目ID配置PROJECT_ID_VERCEL，这个值在你的Vercel应用的Settings(路径大概是这样：https://vercel.com/<你的项目名称>/<你的应用名称>/settings)里即可找到

- TeamID配置TEAM_ID_VERCEL，这个值在你的Vercel项目的Settings(路径大概是这样：https://vercel.com/<你的项目名称>/~/settings)里即可找到

- OPENAI_API_KEY，这个值的作用是发表文章的内置编辑器内嵌入了一个AI提示的功能，只需要你有openAI的apiKey，填了之后在你进行文章的时候可以通过/快捷性进行AI自动续写。

配置完成，等待部署成功。

域名配置

域名配置有两套方案：

1. 将你的域名完全托管到Vercel，由Vercel负责域名解析服务
2. 在你的域名原托管服务商配置域名映射到Vercel的入口IP

两种方案都没有问题，按照Vercel的域名配置提示进行设置即可。

最后即可使用你的域名访问到你的网站了，访问https://app.你的根域名即可访问到站点管理后台，来创建你域名下的子站点（也就是说你完全可以使用这一套应用来部署很多个独立站点）

创建完成子站点后，就可以向子站点中添加文章之类的内容，并通过为子站点设置的子域名访问到你的子站点。

你还可以访问https://app.vercel.pub/体验官方Demo，或者我的博客体验子站点的样式https://blog.justinmad.com/

前面提到这套模版有一些bug，在我的博客里有提到如何解决，我自己也在克隆的仓库里做了修复，除了bug以外，我额外为这个子站点的页面增加了分页、社媒分享、联系我一类的小功能，后面如果有需要的朋友我可以贴出代码的仓库地址。总的来说作为个人博客或者轻量级的外贸产品介绍页来说完全没问题，毕竟这一套下来什么费用都不需要，何况还有源码可以随意修改，更重要的是你还可以白嫖到一套云端的（1个Postgresql实例 1个类似Redis的KV库实例1个对象存储BlobStorage实例， 这些存储甚至为你做了隔离的开发、预览、生成环境）。

Vercel的模版里还有一些功能非常齐全的电商类模板，后续可以分享一个强大的电商解决方案Medusa的部署流程，这个东西比本文的这个模板可要强大太多了，功能涵盖完整的电商功能：交易、商品、营销、用户、购物车、支付（支持10+种类货币和主流的境外支付平台）、订单、库存、履约（正向、逆向、换货、赔付）、税务等等，最重要的是开源，对于二次开发非常友好。