Hexo-2 使用CODING平台部署网站+自定义域名+更换butterfly主题

一、写在前面

0. Hexo和CODEING是什么

• Hexo静态博客框架，快速搭建个人博客网站必备神器，Hexo入门见 Hexo-1 快速搭建个人博客网站

• CODING 是一个面向软件研发团队的研发协作管理平台，提供云原生开发环境、在线编码、代码托管、项目管理、测试管理、持续集成、制品库、持续部署、团队知识库等系列工具产品，帮助研发团队实践敏捷开发与 DevOps。这里我们使用到CODING平台的代码托管功能，类似于github、gitee。

1. 为什么要使用CODING部署Hexo博客

• 起初，使用GitHub Pages进行部署，但是由于GitHub 的服务器在国外，导致访问速度受限
• 然后，使用Gitee Pages进行部署，Gitee 相当于国内的GitHub ，访问速度慢的问题得以解决，但是Gitee 无法自定义域名
• 使用CODING平台进行部署，可以同时解决

  访问速度受限

  AND

  自定义域名

  问题

2. 计划赶不上变化

此前，使用CODING进行Hexo博客部署，可以直接在CODING使用

网站托管服务

2021年12月30日

官网地址：https://help.coding.net/docs/pages/intro.html

因此，使用CODING平台部署Hexo个人博客网站需要两个步骤：

1. 将代码提交至CODING仓库
2. 使用

   腾讯云Serverless

   进行网站托管

二、操作起来

使用腾讯云账号登录，开通CODING DevOps服务

上传代码到Coding

创建团队，团队名称和域名自定义

项目，创建项目

创建代码仓库，并快速初始化

设置部署公钥

新建部署公钥，使用

ssh-keygen

ssh-keygen -m PEM -t ed25519 -C "your.email@example.com"  // 创建新的 SSH 私钥与公钥秘钥对，输入你的邮箱作为标签Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter]  // 推荐使用默认地址Enter passphrase (empty for no passphrase):  // 此处直接回车即可；若设置密码，则每次使用 SSH 方式推送代码时都会要求输入密码

官方详细文档：https://help.coding.net/docs/repo/ssh/config.html

持续部署 - 静态网站，发现没有静态部署这一个选项，因为没有实名认证

https://console.cloud.tencent.com/sls

接着根据指引填写相关信息，应用名称、环境、地域、存储桶配置……；部署方式、代码源、代码仓库等……

购买域名

域名备案

域名解析

接入域名

三、更换butterfly主题

1.事出有因

因为Hexo自带的主题不太beautiful，所以需要更换主题，让我们的博客更加beautiful，常见的主题有很多，例如 Matery、Butterfly……，这里我们使用Butterfly主题来装修我们的博客。

2.clone hexo-theme-butterfly

• 切换到blog目录（这里的目录根据自己hexo根目录切换），打开git bash：

  

• clone Butterfly主题：

  git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

  

• 在blog/themes目录下可以看到我们刚clone的butterfly主题文件夹：

  

• 修改hexo根目录下的

  _config.yml

  中的

  theme: landscape

  改成

  theme： butterfly

  (注意冒号“：”后面有一个空格)：
  

• 这里出现了一些小插曲，hexo s重启后，浏览器访问http://localhost:4000，出现了一串字符：

  

  解决方法：

  hexo根目录下执行命令

  npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

  

  重启hexo，再次访问，成功啦：

3.自定义样式

（1）去掉更新成功的Browsersync:connected提示

第一次启动butterfly主题，发现每次刷新浏览器的右上角总会出现Browsersync:connected的提示，name如何隐藏这个提示呢，只需要在CSS全局样式中加入以下代码：

#__bs_notify__{display: none!important;}

（2）自定义文章封面图和顶部图

（3）网站副标题

可以设置主页中显示的

网站副标题

座右铭

参考

https://blog.csdn.net/qq_43701912/article/details/107375868