使用vercel快速部署vuepress-next项目

简介: 使用vercel快速部署vuepress-next项目

我选择白嫖!使用vercel快速部署vuepress-next项目

本篇文章将使用vercel部署一个vuepress-next demo项目,关于如何快速搭建一个vuepress-next项目,可以参考这篇文章: 😮零成本也能快速开发个人博客?vuepress快速入门! - 掘金 (juejin.cn)

什么是vercel?

vercel是一个免费的网站托管服务平台,虽然是一个外国的平台,但是 Vercel CDN 有香港节点。当你使用你自己的域名时,访问速度还是挺快的。如果你需要发布的站点是一个静态站点,那么你只需要像vercel这样的托管平台就能简单的对项目进行部署。

为什么选择vercel?

同样可以进行网站托管服务的平台有github page,nestify。但是vercel相对于它们更快,而且部署和发布也非常简单快速。如果你发布了一个项目,你只需要在git中push后,vercel就会自动进行更新。

开始部署

在github中新建项目

我们先在github中新建一个项目:

image-20221122130730099

然后我们在本地打开我们的项目,将pull拉取一下我们在github上新建的项目中code下的ssh key:

image-20221122131104091

然后我们将本地的代码进行push:

git add .
git commit -m demo
git push git@github.com:qian357891/vuepress-demo.git //ssh key

我们的项目现在就push到了github上

image-20221122131438715

登录vercel并链接github仓库

Login – Vercel

推荐使用github登录,登录后点击add new,然后点击project,我们开始导入git储存库,依然是选择github。

image-20221122160935667

然后我们选择我们要部署的库vuepress-demo

image-20221122161129310

完成操作后点击save,我们回到刚才的页面。可以看到vuepress-demo出现到了我们的导入列表中:

image-20221122161456477

我们点击import,在出现的界面中进行如下的配置:(我们需要填入打包的指令和下载包的指令)。完成后点击deploy

image-20221122172539850

随后,我们就完成了部署

image-20221122175743341

你可以通过vercel分配的网址打开,也可以使用自己的域名。

如果要使用自己的域名,你应该这样做:

  • 在搜索栏中输入你的网址,并且add

image-20221122175909198

  • 打开你的网址运营商的添加解析,将value的值输入。

image-20221122181012385

  • 回到vercel的域的设置,可以看到已经生效了

image-20221122180907899

整个部署就结束了,当你使用git push进行项目更新时,vercel也能够自动的进行更新。是不是很方便呢?

相关文章
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
538 0
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
994 0
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1171 0
OY
|
NoSQL 数据库连接 atlas
Twikoo Vercel 部署
Twikoo Vercel 部署
OY
771 0
|
存储 缓存 前端开发
npm私服搭建—verdaccio方案及其最佳实践
如今前端圈已十分繁荣,一个跟得上技术时代脚步的互联网公司必定是前后端分离的(至少在狭义上是分离的),这就导致了前端承受的分工压力会越来越大,很多公司的前端项目变得十分庞杂,因此技术负责人可能会考虑根据业务线进行拆分为几个工程系统,这样又引申出一个问题:这几个系统之间如何共用一套公司内部的组件库呢?
2350 0
|
3月前
|
敏捷开发 缓存 前端开发
阿里云云效产品使用合集之前端打包时npm安装卡住一般是什么导致的
云效作为一款全面覆盖研发全生命周期管理的云端效能平台,致力于帮助企业实现高效协同、敏捷研发和持续交付。本合集收集整理了用户在使用云效过程中遇到的常见问题,问题涉及项目创建与管理、需求规划与迭代、代码托管与版本控制、自动化测试、持续集成与发布等方面。
|
3月前
|
资源调度 JavaScript 前端开发
搭建和部署nuxt项目
【8月更文挑战第4天】
|
5月前
|
Web App开发 Windows
VitePress 构建的博客如何部署到 Netlify 平台?
VitePress 构建的博客如何部署到 Netlify 平台? 前言 之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】,有个老哥说 github page 访问太慢了,希望放到 Netlify 平台上面。 咱也没部署过,就试了一下,发现比在 github 上部署简单多了... 一、注册账号 注册 netlify 账号 【Netlify】 地址:app.netlify.com/ 可以使用 github 账号注册,这样可以直接拉取 github 的内容进行部署,更简单
91 0
|
5月前
VitePress 构建的博客如何部署到 github 平台?
VitePress 构建的博客如何部署到 github 平台?
92 0
|
6月前
|
Devops Java 开发工具
【DevOps】(三)jekins插件下载和安装
【DevOps】(三)jekins插件下载和安装
56 0