使用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也能够自动的进行更新。是不是很方便呢?

相关文章
|
Shell iOS开发 MacOS
|
JavaScript 搜索推荐 程序员
Vuepress + gitee五分钟免费搭建个人博客(保姆级教程)
前言 作为一个程序员,没有折腾过个人博客是不算完整的。技术文章的输出是我们程序员能力的一种体现,也是一种非常好的个人总结。 市面上有很多搭建个人博客的工具或框架,包括hexo、wordpress等等。不可否认,市面上有些博客系统做得很好,博客主题也很丰富,但是往往存在一个问题:比较重。 作为一个Vue程序员,我就比较推荐使用vuepress搭建个人博客,因为它毕竟是Vue出品的,大家熟知的vue官方就是利用vuepress搭建的。 本篇文章就从零开始教大家搭建一个免费的博客,零基础小白也可以学习哦!
4557 0
Vuepress + gitee五分钟免费搭建个人博客(保姆级教程)
|
10月前
|
人工智能 API 开发工具
2025技术实战:在国内如何调用 Google Gemini 3.0 Pro?
Gemini 3.0 Pro 的发布带来了原生的多模态能力,但在国内(CN Region)进行 API 对接时,开发者常面临 Geo-blocking 和支付验证两大难题。本文将从网络层和应用层出发,解析主流的接入方案,并提供一份基于 Python 的标准化调用示例。
3846 4
|
前端开发 JavaScript Go
开箱即用的 GoWind Admin|风行,企业级前后端一体中后台框架:介绍
风行(GoWind Admin)是一款开箱即用的企业级Golang全栈中后台框架,基于go-kratos与Vben Admin,支持单体/微服务架构。功能完备,涵盖用户、租户、角色、权限、日志等管理模块,助力开发者高效构建管理系统。
1659 0
|
前端开发 JavaScript
vue实现页面截图、保存图片功能
vue实现页面截图、保存图片功能
1912 1
|
资源调度 关系型数据库 API
一、next-auth 身份验证凭据-使用电子邮件和密码注册登录
本文是关于如何在Next.js应用中使用next-auth库实现基于电子邮件和密码的注册和登录功能的详细教程,包括环境配置、项目初始化、前后端页面开发、数据库交互以及用户状态管理等方面的步骤和代码示例。
一、next-auth 身份验证凭据-使用电子邮件和密码注册登录
|
人工智能 编解码 自然语言处理
AI文生图模型DALL·E 3
8月更文挑战第15天
|
运维 监控 双11
起底:“问题终结者”GOC的真实战力
在阿里巴巴隐藏着很多神秘的部门,GOC就是其中之一,你在互联网甚至搜不到关于它的一丁点儿信息。但就是这么一个“名不见经传”的部门,却“指挥”着阿里巴巴旗下几乎所有业务的运行情况。
10722 0
|
存储 Go Python
[golang]使用gopsutil获取系统信息
[golang]使用gopsutil获取系统信息
804 0