1.Vercel部署与自定义域名

Vercel部署与自定义域名

2.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

    2.2 绑定自定义域名

    如果有自己的域名,还可以在 vercel 中进行设置。
  5. 首先进入 blog 的控制台,在Settings -> Domains 添加域名。
    code
  6. 接着提示域名需要 DNS 解析到 vercel 提供的记录值
    code
  7. 登录所在的域名服务商,根据 Vercel 提供的记录值,添加两条记录
    code
    code
  8. 此时回到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
    1
    npm i hexo-theme-butterfly
    安装成功后可在【C:/Hexo-Blog/blog-demo/node_modules】文件夹下找到hexo-theme-butterfly文件夹

    升级方法:在博客根目录下,运行 npm update hexo-theme-butterfly。
    升级前请将hexo-theme-butterfly文件夹备份,npm更新会直接覆盖成新的包。

    3. 应用主题

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