Skytyunの文档站

# Hexo博客搭建教程02

本文作者：Skytyun (opens new window)

本站地址：https://gyb.skytyun.top (opens new window)

# 1.Vercel部署与自定义域名

# 1.1-Vercel部署

Vercel简介：vercel 是一个站点托管平台，提供CDN加速， 同类的平台有Netlify 和 Github Pages，相比之下，vercel 国内的访问速度更快，并且提供Production环境和development环境，对于项目开发非常的有用的，并且支持持续集成，一次push或者一次PR会自动化构建发布，发布在development环境，都会生成不一样的链接可供预览。 但是vercel只是针对个人用户免费，teams是收费的

首先vercel零配置部署，第二访问速度比github-page好很多，并且构建很快，还是免费使用的，对于部署个人前端项目路、接口服务非常方便 vercel类似于github page，但远比github page强大，速度也快得多得多，而且将Github授权给vercel后，可以达到最优雅的发布体验，只需将代码轻轻一推，项目就自动更新部署了。 vercel还支持部署serverless接口。那代表着，其不仅仅可以部署静态网站，甚至可以部署动态网站，而这些功能，统统都是免费的 vercel还支持自动配置https，不用自己去FreeSSL申请证书，更是省去了一大堆证书的配置 vercel目前的部署模板有31种之多 使用Vercel部署Hexo项目步骤：

首先需要一个Vercel账号，这里推荐用GitHub账户关联，这样你就可以在vercel中直接托管你的GitHub库中的项目了，实现开发部署一步到位（网络不流畅可以考虑挂梯子）。 Vercel地址:https://vercel.com/

  1. 打开vercel主页 使用GitHub账号去关联vercel，后续代码提交到vercel可以自动触发部署 code
  2. 出现授权页面，点击Authorize Vercel。 code
  3. 当你用你的Github账户关联并绑定手机号登录之后，点击右上角的Add New Project创建新的项目，之后导入选项那里选择Continue with Github，这时候应该能看到你Github账号的仓库，选择你刚刚部署成功的存储静态博客的仓库.github.io右边的Import选项，表示你要导入该仓库。 code code code
  4. 起一个只能有字母、数字或者或者连字符的项目名称，然后其他默认，点击Deploy，等待一分钟即可部署成功，部署成功后点击Continue to Dashboard跳转到控制面板，下图所示就是控制面板，看到就代表成功部署到了，但是我们现在还不能访问他给出的域，因为GFW最近把Vercel屏蔽了。 code code

# 1.2 绑定自定义域名

如果有自己的域名，还可以在 vercel 中进行设置。

  1. 首先进入 blog 的控制台，在Settings -> Domains 添加域名。 code
  2. 接着提示域名需要 DNS 解析到 vercel 提供的记录值 code
  3. 登录所在的域名服务商，根据 Vercel 提供的记录值，添加两条记录 code code
  4. 此时回到Vercel，可以看到记录值成功生效。 code 此时访问自己的域名，同样也能访问到页面，同时还有可观的访问速度。 当主分支有代码被推送，Vercel 将会重新拉取代码，并重新构建部署（构建速度可观）

# 2.安装hexo-theme-butterfly主题

本教程用的是npm方式安装的 hexo-theme-butterfly，后续魔改时更改的文件都是【C:/Hexo-Blog/blog-demo/node_modules/hexo-theme-butterfly】文件夹中的文件。如果你是git clone克隆方式安装的主题，请在【C:/Hexo-Blog/blog-demo/themes/butterfly】文件夹下修改对应的文件。 注意：此方法只支持 Hexo 5.0.0以上版本! 在你的博客根目录（我这里路径为【C:/Hexo-Blog/blog-demo】）打开Git BASH命令窗口执行npm i hexo-theme-butterfly

npm i hexo-theme-butterfly
1

安装成功后可在【C:/Hexo-Blog/blog-demo/node_modules】文件夹下找到hexo-theme-butterfly文件夹 {% tip %}升级方法：在博客根目录下，运行 npm update hexo-theme-butterfly。 升级前请将hexo-theme-butterfly文件夹备份，npm更新会直接覆盖成新的包。{% endtip %}

# 3. 应用主题

  1. 修改站点配置文件_config.yml，把主题改为butterfly
theme: butterfly
1
  1. 如果你没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包：
npm install hexo-renderer-pug hexo-renderer-stylus --save
1
  1. 为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做，高度魔改的一般都不会升级主题了，不然魔改的会被覆盖掉） 把主题文件夹中的 _config.yml 复制到 Hexo 根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml进行配置即可生效。Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。
Hexo博客搭建教程02
编程导航   |