如何优雅的采用vercel托管vuepress静态网站

如何优雅的采用vercel托管vuepress静态网站

最后修改时间:a month ago

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

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

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

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

# 采用github|gitlab|bitbucket托管

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

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

就简单说下如何去配置

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

image-20210323201345174

选取根路径即可。

  1. 依据下图进行配置

image-20210323201545437

  1. 等待 yarn 打包后即可

    image-20210323201935055

我们来看一下打包的日志

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"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

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

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

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

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

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

image-20210323204118205

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

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

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

# vercel-cli

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

  1. 安装
npm i -g vercel
or
yarn global add vercel
1
2
3
  1. 安装成功后,初始化 vercel
vercel
1

依提示键入注册 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).

  1. 初始化项目
vercel deploy
1

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

In which directory is your code located

直接跳过即可。

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

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

  1. 新建 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 -
1
2
3
4
5
6
7
8
9
10
11
12
13
  1. 在命令行键入 ./deploy.sh 测试 一键打包成功后,即可看到正常的页面。

  2. 其他命令 ./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
1
2
3
4
5
6
7
8
9
10

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

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

优雅万岁!


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

- 全文完 -

留下一条留言?
默认颜色

主题颜色

标准颜色

更多颜色...