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

2,844 阅读2分钟

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便可以了