用vercel部署一个前端项目

3,258 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情

作为一名小前端,可能很多小伙伴像我一样苦恼于部署一个自己可访问的站点,因为说到部署网站,那涉及的知识面可就太广了,比如需要注册一个域名,购买一个服务器,要学nginx,或者是docker。妈妈耶,我作为一名小前端,我不想学习这些东西。我只想把我的index.html给你,你给我一个可访问的站点ok?

okok,当然ok。vercel将解决您的部署痛点,给你带来春天,话不多说,开整!

vercel初探

新建项目

bb73a59c9a7b0db4fb7aec2d1c04e07.png

选择模板

51629da01a2d8cbdc2c36565ca0e3de.png vercel给我们预制了很多项目模板,这些模板可以在我们提交代码后自动打包部署,无需自己手动打包。我们就选第一个Next.js 01769660bf4941c8a8a9550e61b1be5.png

创建git仓库

给仓库起个名字,点击Create d4f8d6bdc51b9fb2b3f702c57a80c62.png

vercel会同步模板代码到你的仓库

484944c39808be483d019a6a76b1a2a.png

开始编译打包

378501f9024bde40edc02895b86123b.png

打包成功

c5f8f37c5b54b6df20a7f2f95e6fa03.png

访问页面

vercel会自动分配一个可访问的站点路径给我们,直接访问即可。以上全部操作都是vercel帮你完成的,完全解放了你的双手。 b4c36167460d6414704bcac9b01f010.png

修改主页内容

29c14eb60ba90419eaec29924640a10.png

即时更新

b98b603f1c269f2140b975239d3c4c3.png

vercel进阶

等我研究后更新...