前言
最近看了很多大佬开始使用vercel部署各种应用,又忍不住开始想着折腾,研究一番发现vercel真是个名不虚传的好东西,可惜技术有限只能懂个皮毛 vercel部署网站 (静态网页) 网上有很多教程就不多说了,本篇以 "Vercel自动部署自定义导航网站" 作为例子和大家分享。
先说一下vercel给我的感觉:
1、国内速度快而稳,据说在香港台湾都有服务器。
2、与GitHub无缝连接,自动部署各类应用。
3、免费2级域名和每月100G的流量,要是挂个简历、导航页啥的足够使用了。
Vercel介绍
大家先访问一下我在vercel上部署的这个导航网站:https://demo-map.vercel.app
感觉速度不错吧 看看我测的速度,惊人的快!
这个导航站基于ViggoZ的WebStack开源项目、hexo博客程序、hexo-theme-webstack主题模板以及github和vercel 搭建而成。
我自己修改的源码供参考,地址:https://github.com/404gods/map-demo 效果如下:
操作过程
一、搭建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、选择左侧的导入库,继续。
4、Git库地址填写GitHub内map-demo项目的http地址,点击继续。
最后,弹出五彩缤纷的花来,就导入成功了。
5、回到个人仪表盘,可以看到map-demo库已经被成功导入,并且分配了2个二级域名。
这个域名可以自定义选择,或者绑定自己的其他主域名。
以后维护只要在本地更新好内容,push到GitHub仓库,vercel就会自动完成部署几乎感觉不到时间差。
结束语
这篇文章就简要介绍到这里了,主要是介绍vercel的优势。很多地方说的比较概括是因为网上有太多教程,并且具体操作首先应该参照官方文档,希望大家使用愉快
文章评论