Vercel部署与自定义域名
2.1 Vercel部署
Vercel简介：vercel是一个代码托管平台，它能够托管你的静态html界面，甚至能够托管你的node.js与Python服务端脚本，是不想买服务器的懒人的福音！
使用Vercel部署Hexo项目步骤：
- 首先需要一个Vercel账号，这里推荐用GitHub账户关联，这样你就可以在vercel中直接托管你的GitHub库中的项目了，实现开发部署一步到位（网络不流畅可以考虑挂梯子）。
- 当你用你的Github账户关联并绑定手机号登录之后，点击右上角的Add New Project创建新的项目，之后导入选项那里选择Continue with Github，这时候应该能看到你Github账号的仓库，选择你刚刚部署成功的存储静态博客的仓库
.github.io右边的Import选项，表示你要导入该仓库。 - 起一个只能有字母、数字或者或者连字符的项目名称，然后其他默认，点击Deploy，等待一分钟即可部署成功，部署成功后电极Continue to Dashboard跳转到控制面板，下图所示就是控制面板，看到就代表成功部署到了，但是我们现在还不能访问他给出的域，因为GFW最近把Vercel屏蔽了。
自定义域名（可选）
vercel的项目的域名几乎不可用，如果想要使用vercel可以花钱买个域名或者不想要买域名的可以参考免费域名:
注意：免费并不一定是好的，有些等待周期长，有些无法正常注册
请查看免费域名
1.freenom
Freenom是世界上第一个也是唯一的免费顶级域名提供商。用户可以通过它注册到五个顶级域名：.tk（托克劳）、. ml（马里）、. ga（加蓬）、. cf（中非共和国）、. gq （赤道几内亚）。您可以选择运行免费域名与网址转发，免费Freenom DNS服务或您自己的DNS（域名服务器）。非常适合个人网站或小型项目。但是因为meta起诉滥用,freenam实际已经停止新注册。
域名类型：顶级域名
注册地址：https://www.freenom.com/
域名后缀：.tk、.ml、.cf、.gq、.ga
备注：有时候可能会因为使用频率限制回收域名。目前已经停止新注册。
2.eu.org
虽然名称是eu.org，但是和欧洲没有关系。EU.org的免费域名注册服务始于1996年，由于历史悠久、服务稳定、永久免费、不用续期，功能使用上和顶级域名都差不多，因此收适合技术人员和开发者喜欢。EU.org 提供免费的二级域名申请，并且可以绑定到 Cloudflare 等 DNS 管理服务。但近年来申请很难,人工审核时间较长。
域名类型：二级域名
注册地址：https://nic.eu.org/
备注：长期免费，但是人工审核时间较长。
3.us.kg
US.KG 由 DigitalPlat 基金会运营和持有，可以免费为所有人或组织提供免费域名，.KG 是吉尔吉斯斯坦的国家域名，属于海外域名，支持绑定到CF。us.kg 每个账户可注册三个免费域名,有效期365天,需要手动续期,可提前180天续期1次。注册需要KYC验证。最近经常被注册管局禁止，目前又被.kg官方禁止，可用性大大降低。可以关注一下他们的dpdns.org（还没有推出）。
域名类型：二级域名
注册地址：https://nic.us.kg/
备注：注册时需要 KYC，但目前没有验证，可以随意填写,可以使用github issue 验证。
4.FreeDNS (Afraid.org) (freedns.afraid.org)
FreeDNS 提供了丰富的免费二级域名选择，用户可以注册和使用来自社区提供的免费域名。
域名类型: 二级域名
域名后缀：多种二级域名可供选择
注册地址：https://freedns.afraid.org/
优点：大量免费二级域名，支持自定义 DNS 记录管理。
缺点：需要选择特定后缀，可能需要手动配置 DNS。
5.clouddns
cloudDNS是欧洲最大的全球托管DNS服务提供商，除了提供付费服务，CloudDNS还提供免费服务，其中包括一个免费域名（二级）。这个免费域名具备全功能，可以进行解析和转发，并且用户可以选择使用cloudns.org或cloudns.biz的域名后缀。这为某些用户提供了零成本建立网站的机会。
域名类型：二级域名
注册地址：https://www.cloudns.net/index/lang/chs/
备注：对注册ip要求比较严格。
6.InfinityFree (infinityfree.net)
InfinityFree 提供免费托管服务，同时提供免费的二级域名，非常适合小型项目或个人博客使用。
域名类型: 二级域名
域名后缀: epizy.com、.rf.gd
注册地址: https://www.infinityfree.com/
优点：免费托管服务和域名，易于使用。
缺点：域名个性化较低，仅限于二级域名。
7.freedomain.one
freedomain.one提供免费二级域名注册，共有5种后缀，每个账号可注册3个免费域名。
域名类型: 二级域名
域名后缀：多种二级域名可供选择
注册地址：https://freedomain.one/
8.secure.nom.za
只能注册没有商业价值的个人姓名，注册需要人工审核。不需要必须是南非人，可以注册你的名字或姓氏的个人希望使用域名，如果任何字母和连字符字符串与其给定的合法名称有关，则可以接受（前提是它不侵犯任何人的人权）。同一注册人只能注册一个域名，如果发现注册两个或多个帐户所有这些帐户和域名都将被删除，并且注册人将被禁止在NOM注册。该域名可以接入Cloudflare使用其DNS解析、CDN加速、SSL证书等服务。和EU.org免费域名一样，注册后不是立即生效，需要耐心等待审核。
域名类型: 二级域名
注册地址：https://secure.nom.za/
备注：一个月不用会被回收
9.nc.me
Namecheap是一家ICANN（互联网名称与数字地址分配机构）认可的国外域名注册商和网站托管公司，成立于2000年。 它提供域名注册、虚拟主机、VPS主机和独立服务器等综合IDC业务产品。 它家的域名业务拥有较高的知名度，而且域名相对比较便宜。需要注意的是，.me的免费域名，只对学生用户免费。
域名类型：顶级域名
注册地址：https://nc.me/
域名后缀：.me
备注：由Namecheap运营，.me域名只对学生用户免费。
10.js.org
JS.org 专门为 GitHub 上的开源 JavaScript 项目提供免费二级域名，适合需要托管在 GitHub Pages 上的内容。虽然不提供 DNS 解析功能，但对开源项目支持友好。
域名类型：二级域名
注册地址：https://js.org/
优点：专为开源 JavaScript 项目设计，简化 GitHub Pages 托管。
缺点：仅限于 GitHub Pages 托管，不支持其他 DNS 功能。
10.azote.org
Azote.org 提供 6 种免费二级域名，支持 A 记录、跳转以及自定义 DNS 配置。网站默认语言是法语，非法语用户可以通过在线翻译工具完成注册。注册后需要审核，并且该平台主要面向法国用户。
域名类型：二级域名
优点：支持自定义 DNS，提供多种域名配置功能。
缺点：该网站语言是法语，注册之后需要审核。只限法国人(地址)使用。审核过程较为严格。
11.site.ac
土耳其域名,site.ac免费二级域名使用期限为1年，到期前7天可免费续订，到期后3天仍没有续订该域名将被删除。每个账号限注册3个免费二级域名，域名长度最少4个字符。
12.i53.net
I53.NET 由 L53.NET 提供，支持免费注册二级域名，适用于个人和组织使用。注册时不需要 KYC，支持绑定到 Cloudflare，适用于各种建站需求。 域名类型 ：二级域名 注册地址：https://www.l53.net/ 备注：无需 KYC，注册时只需提供基本信息，每个新用户提供一个`newuser的优惠码，可以抵消一年的费用。可快速获取免费二级域名。
- 域名主机记录详情：
根据我自己的主力域名:myxz.top来说明：
| 主机记录 | 解释 | |
|---|---|---|
| www | 解析后的域名为 www.myxz.top，如果@和www一起填写，则按照 myxz.top 跳转 | |
| @ | 直接解析主域名 myxz.top | |
| 将域名解析为 mail.myxz.top，通常用于解析邮箱服务器 | ||
| 二级 | 如 abc.myxz.top，填写 abc | |
| 手机网站 | 如 m.myxz.top，填写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 不会改变地址栏的域名。 |
- 解析到vercel
点击Vercel控制面板右上角的View Domains查看当前的域，我们可以看到仅有Vercel给你预分配的一个域名，此时我们输入刚刚购买的域名，我这里以二级域名demo.fomal.cc为例进行说明，添加后他会提示你添加一条DNS解析记录。
PS：如果你是新买的域名，直接输入你新买的一级域名即可，例如demo123.com，他会推荐你将demo123.com重定向至www.demo123.com，点ADD即可，然后他会提示你添加两条解析记录，一个是@开头的和CNAME开头的，添加记录的方法和二级域名一致。
在腾讯云域名解析记录里面添加如下记录，其中记录类型对应Type，主机记录对应Name，记录值对应Value，其他的设置默认即可。
回到Vercel刚刚查看域名的地方，如果操作没问题，应该会显示域名配置成功的提示，此时就可以通过自定义域名来访问我们搭建的网站了。
当你有了新的域名之后，需要[BlogRoot]_config.yml文件中的url配置项为自己的新域名，这样博客的文章链接才会正确生成。
设置主题
推荐使用4.5.0或者4.5.1版本，导航栏固定且可以支持之前的魔改教程，不会出现导航栏的错误，如果你追求高版本的话不要超过4.7.0，不然大部分代码会失效。
如果你是git clone克隆方式安装的主题，请在【C:/sxiaohe_blog/blog-demo/themes/butterfly】文件夹下修改对应的文件。
如果想要heo的风格，可以选择以下几款主题，如何切换这几款主题可以前往docs：
| 主题 | 状态 | 推荐指数 | |
|---|---|---|---|
| Hexo-theme-solitude | 正常 | 🌟🌟🌟🌟🌟🌟🌟🌟 | |
| Hexo-Theme-Acrylic | 停止维护 | 🌟🌟 | |
| hexo-theme-anzhiyu | 正常 | 🌟🌟🌟🌟🌟🌟🌟🌟 | |
| hexo-theme-Acrylic-Next | 停止维护 | 🌟🌟 |
应用主题
- 修改站点配置文件_config.yml，把主题改为butterfly：
1
theme: butterfly
- 如果你没有pug以及stylus的渲染器，请下载安装，这两个渲染器是Butterfly生成基础页面所需的依赖包：
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
- 为了减少升级主题后带来的不便，请使用以下方法（建议，可以不做，高度魔改的一般都不会升级主题了，不然魔改的会被覆盖掉）
把主题文件夹中的 _config.yml 复制到 Hexo 根目录里（我这里路径为【C:/Hexo-Blog/blog-demo】），同时重新命名为 _config.butterfly.yml。以后只需要在 _config.butterfly.yml进行配置即可生效。Hexo会自动合併主题中的_config.yml和 _config.butterfly.yml里的配置，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。
基础用法说明
Front-matter
Front-matter 是 markdown 文件最上方以—-分隔的区域，用于指定个别档案的变数。
- Page Front-matter 用于页面配置
- Post Front-matter 用于文章页配置Page Front-matter
如果标注可选的参数，可根据自己需要添加，不用全部都写
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15---
title:
date:
updated:
type:
comments:
description:
keywords:
top_img:
mathjax:
katex:
aside:
aplayer:
highlight_shrink:
---
| 写法 | 解释 | |
|---|---|---|
| title | 【必需】页面标题 | |
| date | 【必需】页面创建日期 | |
| type | 【必需】标籤、分类和友情链接三个页面需要配置 | |
| updated | 【可选】页面更新日期 | |
| description | 【可选】页面描述 | |
| keywords | 【可选】页面关键字 | |
| comments | 【可选】显示页面评论模块(默认 true) | |
| top_img | 【可选】页面顶部图片 | |
| mathjax | 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false) | |
| kates | 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false) | |
| aside | 【可选】显示侧边栏 (默认 true) | |
| aplayer | 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置 | |
| highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置) |
Post Front-matter
1 | --- |
| 写法 | 解释 | |
|---|---|---|
| title | 【必需】文章标题 | |
| date | 【必需】文章创建日期 | |
| updated | 【可选】文章更新日期 | |
| tags | 【可选】文章标籤 | |
| categories | 【可选】文章分类 | |
| keywords | 【可选】文章关键字 | |
| description | 【可选】文章描述 | |
| top_img | 【可选】文章顶部图片 | |
| cover | 【可选】文章缩略图(如果没有设置top_img,文章页顶部将显示缩略图，可设为false/图片地址/留空) | |
| comments | 【可选】显示文章评论模块(默认 true) | |
| toc | 【可选】显示文章TOC(默认为设置中toc的enable配置) | |
| toc_number | 【可选】显示toc_number(默认为设置中toc的number配置) | |
| toc_style_simple | 【可选】显示 toc 简洁模式 | |
| copyright | 【可选】显示文章版权模块(默认为设置中post_copyright的enable配置) | |
| copyright_author | 【可选】文章版权模块的文章作者 | |
| copyright_author_href | 【可选】文章版权模块的文章作者链接 | |
| copyright_url | 【可选】文章版权模块的文章连结链接 | |
| copyright_info | 【可选】文章版权模块的版权声明文字 | |
| mathjax | 【可选】显示mathjax(当设置mathjax的per_page: false时，才需要配置，默认 false) | |
| katex | 【可选】显示katex(当设置katex的per_page: false时，才需要配置，默认 false) | |
| aplayer | 【可选】在需要的页面加载aplayer的js和css,请参考文章下面的音乐 配置 | |
| highlight_shrink | 【可选】配置代码框是否展开(true/false)(默认为设置中highlight_shrink的配置) | |
| aside | 【可选】显示侧边栏 (默认 true) |
标签页
前往你的Hexo博客根目录，打开Git Bash执行如下命令：
1
hexo new page tags
在[BlogRoot]\source\会生成一个含有index.md文件的tags文件夹。
修改[BlogRoot]\source\tags\index.md，添加type: “tags”。
1
2
3
4
5---
title: tags
date: 2022-10-28 12:00:00
type: "tags"
---
友情链接
前往你的Hexo博客根目录，打开cmd命令窗口执行如下命令：
1
hexo new page link
在[BlogRoot]\source\会生成一个含有index.md文件的link文件夹
修改[BlogRoot]\source\link\index.md，添加type: “link”:
1 | --- |
- 前往[BlogRoot]\source_data创建一个link.yml文件（如果沒有 _data 文件夹，请自行创建），并写入如下信息（根据你的需要写）：class_name和class_desc支持 html 格式，如不需要，也可以留空。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17- class_name: 1.技术支持
class_desc: 本网站的搭建由以下开源作者提供技术支持
link_list:
- name: Hexo
link: https://hexo.io/zh-cn/
avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
descr: 快速、简单且强大的网志框架
siteshot: https://source.fomal.cc/siteshot/hexo.io.jpg
- class_name: 2.友情链接
class_desc: 一些好朋友~~
link_list:
- name: Fomalhaut🥝
link: https://fomal.cc/
avatar: /assets/head.jpg
descr: Future is now 🍭🍭🍭
siteshot: https://source.fomal.cc/siteshot/www.fomal.cn.jpg
图库
图库页面只是普通的页面，你只需要hexo new page xxx创建你的页面就行。
然后使用外挂标签 galleryGroup，具体用法请查看对应的内容。
1 | <div class="gallery-group-main"> |
子页面
子页面也是普通的页面，你只需要hexo new page xxx创建你的页面就行。
然后使用标签外挂 gallery，具体用法请查看对应的内容:
1 | {% gallery %} |
404页面
主題內置了一个简单的404页面，可在设置中开放。
如需本地预览，请访问 http://localhost:4000/404.html
1 | # A simple 404 page |
wechat
alipay
扫一扫
快速打开移动端➤
扫一扫
下载移动端APP➤
