前情

对于前端开发来说，拥有一个自己的个人网站是一种执着也是一种排面，但是大部分前端也都对服务端这一块的东西都停留在了解阶段，但是如果正儿八经的上线一个网站或多或少需要懂一些服务端知识，需要购买服务器，注册域名，申请证书等等，那对于前端er有没有什么方式可以免费托管自己的个人网站了？

Surge ？

Surge 是荷兰的一家静态网站托管服务提供商，提供免费的静态网页托管服务。与大多数静态网页托管提供商不同，Surge 几乎完全基于命令行操作，从注册到删号的全过程（除了激活账户外）都无需图形界面。在其官网的"价格"页面上，只提供两种套餐——"免费"套餐和每月 $30 的"专业"套餐。这两种套餐在流量、存储空间和域名绑定方面都是无限制的，且都可以使用surge.sh后缀的二级域名并支持 https。区别在于"专业"套餐可以为自定义的第三方域名设置 SSL 证书，还支持重定向、跨域设置和密码保护功能，套餐对比详见下图：

对于我们的小小访问量的个人静态站点来说撸免费套餐就足够用了

使用步骤

注：此处是在window11系统上使用测试

STEP1：安装Surge

按位win+r打开运行窗口，输入cmd启动命令提示符，在命令提示符窗口中输入npm i surge -g全局安装surge，如果你用的是Yarn，那就通过yarn add surge，如果你用的pnpm那就用pnpm add surge，再通过输入surge -V确认是否成功

// 下面命令三选一
// npm  npm config set registry https://registry.npmmirror.com 
npm install --global surge
npm i surge -g
// yarn
yarn add surge
// pnpm
pnpm add surge

STEP2：上传文件或者目录

用资料管理器打开你要上传的目录，并在地址栏中输入cmd

在当前目录下启动window下的命令行工具cmd(命令提示符)

在当前命令行中输入surge命令，耐心等待一段时间就会把当前目录上传上去，我的测试项目比较小，上传过程大概10S左右。

如果你要修改上传的目录，你输入目录名即可，不可上传文件，只能上传目录，默认它会提供一个域名，推荐的做法是自定义一个二给域名，我测试中发现用它默认分配的域名出现了上传失败的问题

STEP3：链接测试

上传成功后，在界面底部能看到预览域名和你真正的上线域名，我的地址是：https://xxxx.surge.sh

如果你上传的目录中有多个html，你想访问非index.html页面内容的话你只要带上完整文件名即可，我这里是s可以上传index.html用于测试多文件上传：https://xxxx.surge.sh/index.html

至此大功告成

命令行：

# 绑定自定义域名 surge 目录 自定义域名 解析cname到 na-west1.surge.sh
surge path/to/my-project my-custom-domain.com
# 锁定域名
echo your-own-domain.com > CNAME
#退出账户
surge logout
#清除缓存（手动删除 %APPDATA%/local/surge）
# 重新登录
surge login
# 输入邮箱 rar3@sina.com 和密码
#释放域名（如果占用）
surge teardown your-own-domain.com
# 先查看所有项目
surge list
# 删除所有项目（需要确认每个域名）
surge teardown --all

小结

Surge没有像前面介绍的PinMe那样提供GUI界面，是全命令行的，我大致看了下它的官网文挡，Surge还提供很多有用的用于部署网站的高级功能，比PinMe要强一些，期待各位的深入探索

个人的知识和能力是有限的，天外有天山外有山，如果你有更好的免费服务器或者别的可以部署静态网站的方法非常期待你的分享，一起学习一起进步