前言
最近在github发现一个有趣的项目,今天发个教程,教你们部署
成品展览
老规矩,先让各位看看成品预览,再决定要不要做
成品链接:https://blog.svipwing.xyz/air-conditioner
如果你懒得部署,你可以直接用这个
准备
- github账号
- vercel账号
- 浏览器
- 魔法
- 域名
- 翻译器
github账号你们应该都有(没有的就当我没说,去百度一下,花几分钟注册一个账号,很简单,这里不说了)
vercel账号有的人可能有,没有的别担心,我待会给你们详细讲解
浏览器推荐使用google chrome,避免各种奇怪的兼容性问题
魔法用于快速访问github、vercel,没有的话就用备用方案:
- github镜像站:kkgithub.com
- vercel没办法了,但是没有被墙,只是速度慢,忍忍就好了
域名比较重要吧,不过也不能说必须有,这里说明:因为vercel自己提供的免费子域名vercel.app已经被墙了,你访问不了(可以用魔法),为了更好的用户体验,最好准备域名,
现在很多服务商都有免费或低价活动,你可以去试试
注意了,如果出现英文提示你看不懂,可以使用翻译器翻译(浏览器其实也有翻译功能,不过你不会用也可以拿百度翻译)
如果你完成了以上步骤,那么恭喜你,你已经完成了50%的工作
vercel账号注册
有账号的可以跳过这一步,去登录下,没账号的继续看
打开vercel官网:vercel.com
点击右上角的图标(两条横线),点击“Sign Up”按钮,点击“hobby”选项,然后在弹出的输入框里输入你的名字,
点击“continue”按钮确定,再点击“Continue with GitHub”,这时会弹出github授权界面,授权后就注册成功了!
当然,如果弹出了手机号验证,别慌,点击输入框左边的国旗,找到“中国”,再在输入框填写你的手机号,点击下面的按钮,然后等待一会,
看看手机短信,把收到的短信验证码填入页面,点击确定即可。如果没收到短信可以查看垃圾箱,看看是不是因为被屏蔽了,或者再试一次、等多一会儿,毕竟这玩意比较慢
温馨提示:由于我已经有账号了,所以可能没有出现一些页面,如果出现预料之外的页面弹窗,你可以翻译上面的英文,然后按照实际解决(也可以百度哦)
部署
打开github仓库链接:https://github.com/anzhiyu-c/air-conditioner-vue
点击“Fork”按钮(图标像个叉子的那个),然后输入仓库名字(自己写,方便辨认即可),点击确定,等待fork完毕
接下来咱们回到vercel,打开vercel.com/new,找到文字“Import Git Repository”,下面应该有你刚刚fork的仓库,如果没有的话可以回去检查下是不是做错了哪步
(可能是github账号没绑定成功,点击“Continue with GitHub”,授权成功后方可使用)
点击仓库名字右手边的“Import”按钮(黑色的),然后找找“Project Name”,在下方的输入框内填写一个项目名字(建议英文,默认有名字了,你可以自己改改,或者不理会)
点击“Deploy”,等待一会,你就会看到一个烟花特效,页面提示部署成功,那么恭喜你,只剩下最后一步了!
滚动到页面最底部,点击“Add Domain”,在输入框填写你的域名(不加http/https协议),点击“add”,按照提示去“域名dns解析后台”添加txt记录和cname记录,添加后一般很快就能生效,
如果没生效可以等48h
访问域名
如果你的域名解析生效了,那么恭喜!你已经完成了全部工作,访问你的域名,享受夏日清凉小空调吧!