Skip to content

如何使用 Vercel 托管博客

· 6 min
TL;DR

本文详细记录了将 Hexo 博客从 GitHub Pages 迁移到 Vercel 平台的完整过程。文章首先介绍了安装 Vercel 命令行工具并登录账户的基础步骤，然后详细说明了如何部署预览版和生产版本的博客站点。除了基本部署外，还探讨了 Vercel 的高级功能，包括 Analytics 数据分析、域名管理和日志系统等企业级特性。通过对比 GitHub Pages 与 Vercel 的优缺点，作者得出结论：两个平台可以并行使用，一次代码推送触发双平台部署，从而同时享受两者的优势。

我使用的是 Stellar 主题的 Hexo 博客，使用 GitHub Pages 托管。前段时间使用 Giscus 作为博客的评论插件，与之前的基于 GitHub Issue 作为评论的 utterances 不同，Giscus 是基于 GitHub Discussions 的。之后又进行了一点小改进，见 在 timeline 中展示 Github Discussion 最新评论，如我在这篇博客里说的，由此我解锁了使用 Vercel 托管服务的经验。这篇就大概记录一下如何托管的，以及与 GitHub Pages 相比，Vercel 的优势。

本地安装 Vercel 命令#

很简单：

Terminal window
npm i -g vercel

去 Vercel 官网登录#

使用 Github 账号登录即可

在本地项目中登录到远程#

Terminal window
$ vercel login
Vercel CLI 37.3.0
? Log in to Vercel Continue with GitHub
> Success! GitHub authentication complete for xxx@foxmail.com
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).


# 验证完成后，回到本地命令行界面

部署到 Vercel#

Terminal window
$ vercel
Vercel CLI 37.3.0
🔍  Inspect: https://vercel.com/cactusinhands-projects/my-blog/xxxx [27s]
✅  Preview: https://my-blog-xxxx-cactusinhands-projects.vercel.app [27s]
📝  To deploy to production (my-blog-beta-pearl.vercel.app), run `vercel --prod`

Vercel 首先会把本地项目所有资源上传到远程，作为 Vercel 上一个新的 project。

因为本地仓库的 remote 仓库是在 GitHub 上，现在上传到 Vercel 后，Vercel 上也自动与 GitHub 关联了。后面只要本地往 GitHub 推送代码，在 Vercel 上会自动触发 build，deploy 等步骤。

这里的输出显示，目前有个预览版 (Preview)，点击链接即可查看预览版效果。 如果要部署生产版本，使用下面的命令：

部署为生产版本#

Terminal window
$ vercel --prod
Vercel CLI 37.3.0
🔍  Inspect: https://vercel.com/cactusinhands-projects/my-blog/xxdyy [4s]
✅  Production: https://my-blog-xadda-cactusinhands-projects.vercel.app [4s]

此时生产版本已经部署完成了，可以点击上面提供的链接直接进入查看。

Analytics#

回到 Vervel 项目页面，很很多功能值得探索，比如 Analytics: image.png 可以查看网页的一些数据。但是这个功能不是默认打开的，需要对项目进行一点点更改。 这里有官网提供的 Quickstart，其实很简单： 对于静态网站，如 Hexo 这种的，不用安装 @vercel/analytics 包，只需要在 HTML 里注入以下几行代码就行：

<script>
  window.va =
    window.va ||
    function () {
      (window.vaq = window.vaq || []).push(arguments);
    };
</script>
<script defer src="/_vercel/insights/script.js"></script>

对于 Stellar, 在 _config.stellar.yml 中是这样的：

inject:
  head:


  script:
    - <script> window.va = window.va || function () { (window.vaq = window.vaq || []).push(arguments); }; </script>
    -  <script defer src="/_vercel/insights/script.js"></script>

在本地更新了代码，然后重新执行分别执行 vercel, vercel --prod 即可。

domain#

注意到刚才使用 vercel 命令部署成功后，给出的地址都是 https:// 开头的。其实 Vercel 已经为你分配了一个域名。 在 Settings 中找到 Domains 可以进行设置： image.png 也可以绑定到自己其它的域名。

Logs#

Vercel 项目的 Logs 模块的功能也很丰富，可以在上面查看部署的服务的各种运行日志。

GitHub pages？#

对于托管在 Vercel 上的服务，还有很多功能可以尝试，比如 Firewall，Storage 等等。 与 Vercel 相比，GitHub pages 简直是没法比，它看起来就像十年前的产物。而 Vercel 却是现代的，功能丰富的，是能托管企业级，生产级服务的平台。对于个人开发者简直是完美。 关于 Vercel，在知乎有个这样的话题： vercel 是什么神仙网站？ 看完觉得我怎么没有早点知道这个平台。 但是 GitHub pages 也不是完全找不到优点，依靠 GitHub 这平台本身，它就足够安全可靠。不像某些平台，服务说关就关，或者产品稳定性堪忧还不知改进。 GitHub pages 在有代码推送后会自动触发部署，前面也说过推送代码时 Vercel 也会触发部署。所以现在这个问题不是谁好不好，而是我全都要。一次推送，两地部署，何乐而不为呢。