王志远 微医医疗技术部前端
前言
我们都知道一个个人博客对一个技术人的重要性（其实非技术同学如果有个个人博客作为自己的秘密花园也很有趣）；我们知道最简单的静态资源服务器版博客也得历经
购买服务器花钱且费时费力，更别提静态资源部署、服务器域名部署、证书等等让非技术同学甚至技术小白同学一面懵的名词了；那我们就没办法了吗？
今天小菜同学基于surge这个 npm 工具包，给大家带来【一条命令拥有自己的 https 域名版博客】的魔幻方案。
**补充：**其实对于个人项目作为前端的测试环境也很好，毕竟公司里有 cicd，但自己去搭建一个肯定费时费力。
目标
- 外网可访问的个人博客
- 博客拥有域名
- 域名已实名 https
补充：其实不只是个人博客，只要需求是【静态资源公网可访问】都能实现，类似一个 nginx 反向代理服务器
实现步骤
静态资源仓库
先准备要展示的内容，现在一般就是前端项目打包后（npm run build）的产物dist文件夹等，下文假定有了dist文件夹
注意：只支持纯静态项目，不能是 ssr 项目
安装工具包并初始化
安装依赖
npm i surge -g
登陆或注册
surge login
输入自己的邮箱和密码即可
发布
前面都是准备工作，事实上我们的日常只需要执行下面的一步命令，就能实现【拥有自己的 https 域名版博客】的目标。
surge ./dist [自己的三级域名].surge.sh
访问自己定义的域名，就可以看到啦，比如南方小菜的 blog
**注意：**日后的每次发布，需要先清除空间，再发布，可以执行如下命令
surge teardown [自己的三级域名].surge.sh && surge ./dist [自己的三级域名].surge.sh
常见命令
- teardown：删除
- list：查看本账号已经发布的域名
- whoami：查询登录的账户
其余命令可以通过surge --help查看
常见问题
Aborted - Unable to remove xxx.surge.sh.
域名还没部署，或者不是你申请的，才会导致删除失败
you do not have permission to publish to xxx.surge.sh
域名被占用
前端项目中的应用
在项目中，我们都是在package.json中配置脚本命令，建议配置如下命令，方便构建
"build:test": "[打包生成 dist 目录的命令]",
"deploy:test": "npm run build:test && surge teardown [自己的三级域名].surge.sh && surge ./dist [自己的三级域名].surge.sh"
