# 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的配置,其优先度较高。
编程导航   |