为什么使用 vercel 而非 xxxpages、obs等静态托管

因某些不言而喻的原因，git pages 在国内的速度一言难尽。

又因为某些不言而喻的原因，我没法备案，也就无法绑定域名了，所以 vercel 也就成为了首选。

如果你没有域名，或者已经备案，同时又不经常更新。完全可以采用 GITEE PAGES 或者 腾讯、阿里、华为云的文件存储来托管。

采用github|gitlab|bitbucket托管

其实这个无甚好说，常规操作，应该绝大多数人采用的就是这种模式。

优点是自动更新无需打包，很是省力。

就简单说下如何去配置

1. 登录
2. 新增项目
3. 选取 vuepress 的库
4. import

选取根路径即可。

5. 依据下图进行配置

6. 等待 yarn 打包后即可

我们来看一下打包的日志

20:16:08.612  	Cloning github.com/sickeeer/warm-house (Branch: master, Commit: e3dd74f)
20:16:09.765  	Cloning completed in 1153ms
20:16:09.769  	Analyzing source code...
20:16:10.332  	Installing build runtime...
20:16:13.954  	Build runtime installed: 3621.746ms
20:16:16.642  	Looking up build cache...
20:16:16.982  	Build cache not found
20:16:17.938  	Detected package.json
20:16:17.939  	Installing dependencies...
20:16:18.406  	yarn install v1.22.10
20:16:18.491  	[1/4] Resolving packages...
20:16:19.113  	[2/4] Fetching packages...
20:16:25.973  	warning url-loader@1.1.2: Invalid bin field for "url-loader".
20:16:43.634  	info fsevents@1.2.13: The platform "linux" is incompatible with this module.
20:16:43.635  	info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
20:16:43.659  	info fsevents@2.3.2: The platform "linux" is incompatible with this module.
20:16:43.659  	info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
20:16:43.667  	[3/4] Linking dependencies...
20:16:43.671  	warning "@vuepress/theme-blog > @vuepress/plugin-blog > vuepress-plugin-sitemap@2.3.1" has unmet peer dependency "chalk@^2.0.0".
20:16:43.672  	warning "@vuepress/theme-blog > @vuepress/plugin-blog > vuepress-plugin-sitemap@2.3.1" has unmet peer dependency "commander@^2.0.0".
20:16:43.672  	warning "@vuepress/theme-blog > @vuepress/plugin-blog > vuepress-plugin-sitemap@2.3.1" has unmet peer dependency "esm@^3.0.0".
20:16:52.826  	[4/4] Building fresh packages...
20:16:54.021  	Done in 35.62s.
20:16:54.561  	yarn run v1.22.10
20:16:54.597  	$ vuepress build docs
20:16:55.856  	wait Extracting site metadata...
20:16:55.859  	tip Apply local theme at /vercel/workpath0/docs/.vuepress/theme...
20:16:55.884  	tip Apply theme local ...
20:16:55.912  	tip Apply plugin container (i.e. "vuepress-plugin-container") ...
20:16:55.913  	tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
20:16:55.914  	tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...
20:16:55.914  	tip Apply plugin @vuepress/medium-zoom (i.e. "@vuepress/plugin-medium-zoom") ...
20:16:55.915  	tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
20:16:55.915  	tip Apply plugin @vuepress/blog (i.e. "@vuepress/plugin-blog") ...
20:16:56.759  	[info] [webpackbar] Compiling Client
20:16:56.782  	[info] [webpackbar] Compiling Server
20:17:10.168  	[success] [webpackbar] Server: Compiled successfully in 13.39s
20:17:17.786  	[success] [webpackbar] Client: Compiled successfully in 21.03s
20:17:17.891  	wait Rendering static HTML...
20:17:18.472  	success Generated static files in docs/.vuepress/dist.
20:17:18.509  	Done in 23.95s.
20:17:19.488  	Uploading build outputs...
20:17:20.796  	Deploying build outputs...
20:17:26.598  	Build completed. Populating build cache...
20:17:42.207  	Uploading build cache [17.36 MB]...
20:17:43.850  	Build cache uploaded: 1642.714ms
20:17:44.079  	Done with "package.json"

可以看到， vercel 主要做了这些工作。

• clone 下你的代码
• 通过 yarn or npm 安装依赖
• 运行打包

每当代码库更新后，vercel 就会自动再次执行该流程。

但是，有优点就有缺点。首先，不算缺点的缺点，即是国内访问这些代码托管网站的速度异常的感人。

另我又遇到了另外一个问题，

在代码打到一定复杂度后，会使得 vercel 无法正确打包。

此时，打包后上传到 github 上似乎成为了最后的选择。

但是，实在过于麻烦。不适合我这种懒人~由此契机，也就诞生了如下的方法。

vercel-cli

vercel-cli^[1]，在本地直接打包上传至 vercel

1. 安装

npm i -g vercel
or
yarn global add vercel

2. 安装成功后，初始化 vercel

vercel

依提示键入注册 vercel 使用的邮箱 3. 从邮箱激活账户 激活后，命令行会提示如下

√ Email confirmed Congratulations! You are now logged in. In order to deploy something, run vercel. 💡 Connect your Git Repositories to deploy every branch push automatically (https://vercel.link/git).

4. 初始化项目

vercel deploy

依据提示关联或新建一个项目,当询问

In which directory is your code located

直接跳过即可。

之后，会生成1个网站地址，暂时忽略。

此时就可以在根路径看到 .vercel 的文件夹了，反过来说如果不存在该文件夹，则失败了。

5. 新建 deploy.sh 文件 键入

#!/usr/bin/env sh
set -e

# 生成静态文件
npm run docs:build

cp -rvf .vercel docs/.vuepress/dist
# 进入生成的文件夹
cd docs/.vuepress/dist

vercel --prod

cd -

6. 在命令行键入 ./deploy.sh 测试 一键打包成功后，即可看到正常的页面。

7. 其他命令 ./pushToGit.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
#set -e
time=$(date "+%Y-%m-%d %H:%M:%S")
#当未配置远端时，将下方的 # 移除
#git remote set-url origin  https://gitee.com/sickeeer/blog-resource.git
git add -A
git commit -m "$time"
git push -u origin master

至此，我们就可以优雅的将源码提交至代码库，而 build 的文件直接上传至 vercel

再也不用忍受 github 的龟速，再也不用忍受 vercel 的龟速打包，再也不用苦逼的打包后上传静态文件！

优雅万岁！

---

1. vercel-cli首页 (opens new window) ↩︎