前言

前言📝
这部分教程有参考tzy大佬的文章:基于 Hexo 从零开始搭建个人博客(三)基于 Hexo 从零开始搭建个人博客(四)

阅读本篇前,请先阅读前面的文章:Hexo 博客搭建基础教程 (一)

1. 前言

  1. 博客搭建过程遇到任何问题,优先在本页面搜索,检查是否已经有该配置教程。

  2. 遇到问题可以优先在文章评论区留言,注意留言时请填写正确的邮箱以确保能收到站长的回复。

  3. 实在解决不了的问题可添加站长的微信进行交流,备注自己的个人信息。

2. Vercel部署与自定义域名

2.1 Vercel部署

Vercel简介:vercel是一个代码托管平台,它能够托管你的静态html界面,甚至能够托管你的node.js与Python服务端脚本,是不想买服务器的懒人的福音

使用Vercel部署Hexo项目步骤:

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

    image-20230316145325197

  2. 当你用你的Github账户关联并绑定手机号登录之后,点击右上角的Add New Project创建新的项目,之后导入选项那里选择Continue with Github,这时候应该能看到你Github账号的仓库,选择你刚刚部署成功的存储静态博客的仓库<username>.github.io右边的Import选项,表示你要导入该仓库。

    image-20230316145520042

    image-20230316145629190

  3. 起一个只能有字母、数字或者或者连字符的项目名称,然后其他默认,点击Deploy,等待一分钟即可部署成功,部署成功后点击Continue to Dashboard跳转到控制面板,下图所示就是控制面板,看到就代表成功部署到了,但是我们现在还不能访问他给出的域,因为GFW最近把Vercel屏蔽了。

    image-20230316145830895

    image-20230316145953453

2.2 绑定自定义域名

现在你的个人网站的地址是 username.github.io以及在Vercel上有一个777nx-github-io.vercel.app。如果觉得不够定制化,可以购买一个专属域名。

这一步不是必要的,如果目前还不想买域名可以先跳过。

腾讯云、阿里云等都是不错的域名代理商,建议选用comcncc这类常用好记的顶域,对SEO比较友好,自定义部分的长度尽可能短别人才会更容易地记住你的网站,要知道域名就是你网站的卡片。此处以阿里云域名为例进行说明,购买域名后,实名认证进入阿里云控制台,点云解析进去,找到你刚买的域名,点进去添加Vercel所需的解析记录,注意博主这里是解析二级域名只需要解析一条即可。但是如果是一级域名,需要解析两个,一个是@,另外一个是www,Vercel建议是@的解析重定向至www

以我的域名:777nx.cn为例进行说明

主机记录解释
www解析后的域名为 www.777nx.cn
@直接解析主域名 777nx.cn
*泛解析,匹配其他所有域名 *.777nx.cn
mail将域名解析为 mail.777nx.cn,通常用于解析邮箱服务器
二级abc.777nx.cn,填写 abc
手机网站m.777nx.cn,填写 m
显性URL不支持泛解析(泛解析:将所有子域名解析到同一地址)

将域名指向云服务器,请选择「A」; 将域名指向另一个域名,请选择「CNAME」; 建立邮箱请选择「MX」,根据邮箱服务商提供的 MX 记录填写。

记录类型解释
A用来指定域名的 IPv4 地址(如 8.8.8.8),如果需要将域名指向一个 IP 地址,就需要添加 A 记录。
CNAME如果需要将域名指向另一个域名,再由另一个域名提供 IP 地址,就需要添加 CNAME 记录。
MX如果需要设置邮箱,让邮箱能收到邮件,就需要添加 MX 记录。
TXT在这里可以填写任何东西,长度限制 255。绝大多数的 TXT 记录是用来做 SPF 记录(反垃圾邮件)
NS域名服务器记录,如果需要将子域名交给其他 DNS 服务商解析,就需要添加 NS 记录。
AAAA用来指定主机名(或域名)对应的 IPv6 地址(例如:ff06:0:0:0:0:0:0:c3)记录。
SRV记录了哪台计算机提供了哪个服务。格式为:服务的名字、点、协议的类型,例如:_xmpp-server_tcp。
显性URL从一个地址 301 重定向到另一个地址的时候,就需要添加显性 URL 记录(注:DNSPod 目前只支持 301 重定向)。
隐性URL类似于显性 URL,区别在于隐性 URL 不会改变地址栏的域名。

添加自定义域名的步骤:

  1. 点击Vercel控制面板右上角的View Domains查看当前的域,我们可以看到仅有Vercel给你预分配的一个域名,此时我们输入刚刚购买的域名,我这里以二级域名demo.777nx.cn为例进行说明,添加后他会提示你添加一条DNS解析记录。

    image-20230316151509927

    image-20230316151714732

    image-20230316153445442

PS:如果你是新买的域名,直接输入你新买的一级域名即可,例如demo123.com,他会推荐你将demo123.com重定向至www.demo123.com,点ADD即可,然后他会提示你添加两条解析记录,一个是@开头的和CNAME开头的,添加记录的方法和二级域名一致。

66c6d6f8fac84481b788228c4222864d

d6dd5ec65e93439482a7ddd5833ebd9d

  1. 在阿里云域名解析记录里面添加如下记录,其中记录类型对应Type,主机记录对应Name,记录值对应Value,其他的设置默认即可。

    image-20230318143716719

  2. 回到Vercel刚刚查看域名的地方,如果操作没问题,应该会显示域名配置成功的提示,此时就可以通过自定义域名来访问我们搭建的网站了。

    image-20230318143814742

    image-20230318144509465

  3. 当你有了新的域名之后,需要[BlogRoot]\_config.yml文件中的url配置项为自己的新域名,这样博客的文章链接才会正确生成。

    image-20230318144403975

3. 安装主题

本教程用的 🦋 hexo-theme-butterfly 主题 v4.5.1最新版,请放心食用。

本教程用的是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更新会直接覆盖成新的包。

在你的博客根目录里(我这里路径为【C:/Hexo-Blog/blog-demo】),打开Git BASH工具,执行命令即可。

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

安装成功后可在【C:/Hexo-Blog/blog-demo/themes】文件夹下找到butterfly文件夹,可以将landscape文件夹删掉。

升级方法:在主题目录下,运行git pull

在你的博客根目录里(我这里路径为【C:/Hexo-Blog/blog-demo】),打开Git BASH工具,执行命令即可。

1
git clone 4.5.0 https://gitee.com/iamjerryw/hexo-theme-butterfly.git themes/butterfly 

升级方法:在主题目录下,运行git pull

4. 应用主题

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