创建一个个人主页(无需租赁服务器版)

236 阅读2分钟

1 需求

本方案适用于以下情况:

  1. 用于建立个人网站/个人博客
  2. 没有租赁服务器的经济条件
  3. 对网站可靠性、性能要求不高
  4. 对服务端了解甚少的前端同学,单纯想部署一个网站

2 步骤1——vercel(方式1)

  1. 首先去vercel官网使用github/gitlab账号登录

  2. 安装node

  3. 命令行安装vercel, npm run vercel -g

  4. 在cmd里打开要部署的项目的文件夹的路径 image.png

  5. 输入命令 vercel --prod

  6. 跳出若干选项,如果部署的是纯html/css/js组成的文件,就按照以下的方式去选择 image.png

  7. 如果部署的是Vue项目之类的,就在箭头指向的那一行选择n即可,这样就部署完成了 image.png

3 步骤1——vercel(方式2)

  1. 首先去vercel官网使用github/gitlab账号登录
  2. 将自己要部署的项目上传到gitlab/github的仓库里(就是自己登录的那个账号)
  3. 新建一个项目 image.png
  4. 网站会自动跳出github里面的仓库,选择自己之前上传的仓库,选择import image.png
  5. 先选择skip(这不是一个合作项目),在箭头2输入自己喜欢的项目名,最后选择箭头3 deploy image.png

4 步骤2——申请域名

步骤1的两个方式任选其一即可,部署后会生成一个域名,比如main-site-nu.vercel.app image.png 但是这个自动生成的域名经常被禁止访问(有许多不法分子会用这个方式建立网站,所以.vercel.app结尾的网站国内访问非常不稳定),那么就需要自己去申请域名了,我这里选择阿里云。

  1. 在阿里云官网购买域名,比如说xxx.asia(这个首年6块挺便宜的)
  2. 按照指引完成实名认证
  3. 进入域名的控制台 image.png
  4. 按照如下方式配置域名解析 image.png image.png
  5. 按照如下配置DNS image.png image.png
  6. 在vercel里,配置域名,箭头3处输入域名,选择add image.png
  7. 弹框里选择最后一项,然后就可以访问了 image.png