Vercel部署个人博客+白嫖个人域名

vercel

（补充：vercel 在国内已被墙，一个悲伤的消息，网站只能科学上网查看，或者自己绑定域名）

测试

使用vuepress+github 托管

我们可以使用 vercel 进行部署，vercel 和 github actions 很相似，都是通过将博客的所有必须文件（包括 package.json,docs 等）push 到 github 的某个仓库仓库中，然后在 vercel 中创建一个项目，导入此仓库，之后的一切就交给 vercel 去做了
并且 vercel 还能够自动部署，如果你 commit 了新的内容，vercel 监测到有新的 commit 之后，便会重新运行 npm run build 命令进行部署，你只需要将新的修改，从本地 push 到 github 便可以了（比如新增一篇文章），而不需要像 github pages，服务器部署那样，每次新增文章，都需要在本地运行 npm run build，然后再将 docs/.vuepress/dist 目录中的所有文件，上传到 github 或者服务器中才能完成博客新内容的改变

而且 vercel 还自带 cdn 加速，在速度上比使用通过 github pages 托管，通过 xxx.github.io/xxx 访问的速度快，除此以外，还可以自定义域名，可以使用我们自己的域名。

1. 首先就是使用 Vue-press 构建自己的博客

vuepress 有很多博客主题，https://marketplace.vuejs.press/zh/themes/blog.html

推荐VuePress Theme Hope，

接下使用 VuePress Theme Hope 来先简单搭建一个博客，官方给出的方式很是简单，只需一行代码，就能构建一个博客

pnpm create vuepress-theme-hope hope-project

image.png

经过上面一系列选项，成功构建一个博客项目可以在本地查看

image.png

image.png

项目目录结构如下图，博客配置在这里就不说了，想要了解具体内容，请前往VuePress Theme Hope，查看具体配置，和使用

image.png

此配置的作用就是，运行npm run build命令后，打包后的文件，将会放在dist目录中，默认是docs/.vuepress/dist目录 也可以自己更改目录配置

image.png

将项目放在 GitHub 托管

将项目推送至 GitHub，自行完成，

image.png

打开 vercle 官网

使用 GitHub 登录官网

image.png

new Project ，import 自己刚刚创建的 GitHub 仓库

image.png

下一步，如下图操作这里的 Output Directory 就是上面设置的 base，都使用默认配置

image.png

点击Deplay,开始部署

等待部署完毕出现 烟花界面，恭喜你成功了！！！

image.png

点击 continue to Dashboard

image.png

image.png

自定义域名（也不是太自定义）

image.png

设置访问域名

image.png

自定义域名这里域名只能以 vercel.app 结尾，不然就是绑定自己的域名了

image.png

修改成 juejin123，修改成功！，（juejin 已经被占用了）

image.png

image.png

更新博客

vercel 监测到有新的 commit 之后，便会重新运行 npm run build 命令进行部署，你只需要将新的修改，从本地 push 到 github 便可以了