Vercel自动部署自定义导航网站

2020年09月25日 5037点热度 1人点赞 0条评论
本文为 本站原创文章。未经许可禁止转载,如有需求请联系本站获得授权。

前言

最近看了很多大佬开始使用vercel部署各种应用,又忍不住开始想着折腾,研究一番发现vercel真是个名不虚传的好东西,可惜技术有限只能懂个皮毛 :persevering:  vercel部署网站 (静态网页) 网上有很多教程就不多说了,本篇以 "Vercel自动部署自定义导航网站" 作为例子和大家分享。

先说一下vercel给我的感觉:

1、国内速度快而稳,据说在香港台湾都有服务器。

2、与GitHub无缝连接,自动部署各类应用。

3、免费2级域名和每月100G的流量,要是挂个简历、导航页啥的足够使用了。

 

Vercel介绍

大家先访问一下我在vercel上部署的这个导航网站:https://demo-map.vercel.app

感觉速度不错吧 :mrgreen: 看看我测的速度,惊人的快!

 

这个导航站基于ViggoZ的WebStack开源项目、hexo博客程序、hexo-theme-webstack主题模板以及github和vercel 搭建而成。

我自己修改的源码供参考,地址:https://github.com/404gods/map-demo  效果如下:

Vercel部署网站

 

操作过程

一、搭建hexo博客

GitHub新建仓库任意取名,例如“map-demo”,为了方便本地也新建一个“map-demo”文件夹。

本地git环境下安装好hexo博客程序

npm install -g hexo-cli

hexo init map-demo

cd map-demo

npm install

然后运行

hexo g

hexo server

打开本地localhost:4000,查看默认hexo博客是否成功。

二、安装导航主题

npm install hexo-theme-webstack -S

查看\map-demo\themes 目录下是否成功安装新主题“webstack”

在\map-demo目录下打开_config.yml ,修改默认主题为 theme: webstack

主题个性化操作在\map-demo\_config.webstack.yml 文件内修改。

主题部分如遇到困难,请查看主题文档 

修改完成本地调试完毕后,push到刚才新建的map-demo库。

三、vercel操作

1、打开https://vercel.com/,登录选择GitHub

2、授权成功后进入主界面,在右上角点击“Import Project”导入项目。

3、选择左侧的导入库,继续。

Vercel部署网站

4、Git库地址填写GitHub内map-demo项目的http地址,点击继续。

最后,弹出五彩缤纷的花来,就导入成功了。

Vercel部署网站

5、回到个人仪表盘,可以看到map-demo库已经被成功导入,并且分配了2个二级域名。

这个域名可以自定义选择,或者绑定自己的其他主域名。

Vercel部署网站

 

以后维护只要在本地更新好内容,push到GitHub仓库,vercel就会自动完成部署几乎感觉不到时间差。

 

结束语

这篇文章就简要介绍到这里了,主要是介绍vercel的优势。很多地方说的比较概括是因为网上有太多教程,并且具体操作首先应该参照官方文档,希望大家使用愉快 :arrow:

 

 

极客角落

敬请打赏,网站发展需要您的帮助。

文章评论

您需要 登录 之后才可以评论