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

前言

最近看了很多大佬开始使用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的优势。很多地方说的比较概括是因为网上有太多教程，并且具体操作首先应该参照官方文档，希望大家使用愉快