hexo搭建全解

利用hexo+github搭建个人博客

为什么使用hexo+GitHub：

简单易学，只要根据教程操作一步步来即可

无需维护，只要上传即可更改

视频教程：保姆级Hexo+github搭建个人博客

入门

安装工具

安装Node.js

下载地址：https://nodejs.org

介绍：它可以让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言

安装：

自行选择自己的电脑是32位还是64位，下载长期维护版，下载的是一个.msi的安装包

安装不用做任何多余的操作，只要选择好安装的路径(默认装在C盘)并点击下一步即可完成安装

检验：

安装完成后在键盘按win+R进入运行并输入cmd进入命令提示符窗口，分别输入下列命令：

node -v #显示安装的nodejs版本
npm -v #显示安装的npm版本

如果有版本回显，则安装成功

修改全局模块路径和缓存路径：(可选)

原因：当我们执行npm install xxxx -g时，会默认下载到c盘

默认路径为：C:\Users\用户名\AppData\Roaming\npm

因此可以将全局模块(node_global)和缓存(node_cache)放在别的目录，减少c盘空间

操作：

在你的nodejs安装目录下新建node_global、node_cache和node_modules(配置环境变量)文件夹

在cmd窗口中输入下列命令指定npm的新路径：

npm config set prefix "创建的node_global所在的绝对路径"
npm config set cache "创建的node_cache所在的绝对路径"

如：

npm config set prefix "E:\develop\nodejs\node_global"
npm config set cache "E:\develop\nodejs\node_cache"

路径修改后，配置环境变量：

右键此电脑->高级系统设置->环境变量

在系统变量：

变量名：NODE_PATH

变量值：node_global文件夹下的node_modules文件夹

如：E:\develop\nodejs\node_global\node_modules

在用户用户变量中的Path变量：

将默认的npm路径修改为新建的node_global路径

点击确定保存即可

安装git

介绍：是一个开源的分布式版本控制系统，可以有效、高速地处理各种项目版本的管理

下载地址：https://git-scm.com/download/win

安装：无需特殊操作，选择好安装路径直接下一步即可

检验：

git --version #查看git脚本

注册GitHub

什么是GitHub：GitHub 是一个面向开源及私有软件项目的托管平台，因为只支持 git 作为唯一的版本库格式进行托管，故名 GitHub

网址：https://github.com/

进入以后按照提示注册即可

将GitHub仓库和git关联

介绍：因为博客是一个网站，所以建立网站需要搭载一个服务器上，通俗点说，GitHub就是一个服务器，所以要利用GitHub存储我们网站的内容

添加仓库

1. 点击用户头像旁的＋号，选择New repository

在repository name(仓库名)内填写：(自己GitHub的注册名).github.io

2. 选择add a README file

3. 点击创建(Create repository)

创建SSH Key

Git和github之间的通信是通过SSH加密的，因此需要执行下面的操作：

在本地主目录查找是否有.ssh目录，如果有，打开该目录，一般会有这两个文件：id_rsa(私钥)和id_rsa.pub(公钥)

如果没有，任意位置右键打开git bash here：

输入如下命令生成ssh key：

ssh-keygen -t rsa -C "youselfemail@email.com" #(这里需要输入你的邮箱)

# Enter file in which to save the key (/c/Users/xxxxx/.ssh/id_rsa):
# 输入保存路径。这里默认即可

# Enter passphrase (empty for no passphrase):
# 输入密码短语。我们直接回车，不输入
# Enter same passphrase again:
# 再次输入密码短语。我们直接回车

生成密钥后，我们按照提示的路径找到生成的id_rsa.pub，用记事本或编辑器打开，复制里面的内容

GitHub添加ssh key

在GitHub上点击你的头像，点击setting(设置)

找到SSH and GPG keys

点击第一个New SSH keys

title：你的钥匙名字(随便写)，可以写blog

key：填写你刚刚复制的内容

填写完毕后点击add SSH key(添加)

验证是否连接成功

在命令行输入：

ssh -T git@github.com

此时应该返回一句话：

# Hi '你的名字'! You've successfully authenticated, but GitHub does not provide shell access.
# 这里提示你已经成功链接上github，但是github不提供shell连接，此时你的ssh_key已经部署成功

证明你的git已经成功连接上了GitHub

如果你返回的是：

ssh: connect to host github.com port 22: Connection timed out

你需要在.ssh目录下添加config文件并写入以下内容：

Host github.com
    Hostname ssh.github.com
    Port 443

尝试重新链接出现以下内容：

# Are you sure you want to continue connecting (yes/no/[fingerprint])?
# 这里选择yes

# Hi xxxxx! You've successfully authenticated, but GitHub does not provide shell access.
# 这里提示你已经成功链接上github，但是github不提供shell连接，此时你的ssh_key已经部署成功

在本地生成博客

简介：在本地生成博客时，需要使用hexo进行生成。使用hexo时，需要安装，生成，做好相应配置后才能上传到github

安装hexo

在你的任意一个盘(除了c盘)新建一个文件夹用来存放博客，文件名最好填写英文

进入这个空的文件夹，在空白的地方右键，选择git bash here：

输入以下命令：

npm install hexo-cli -g #npm安装hexo
hexo -v #查看hexo版本，如果报错，重新执行安装命令
hexo init #生成hexo环境，如果报错，重新执行该命令
hexo g #静态生成博客页面
hexo s #建立服务
# 也可以写成
hexo g && hexo s

按照提示打开http://localhost:4000即可进入本地生成的博客

在git按住Ctrl + C即可停止服务

hexo常用命令

# 查看全部命令
hexo -h


# 安装
npm install hexo -g
# 升级
npm update hexo -g
# 查看hexo的版本
hexo version
# 创建nodejs-hexo 名字的本地文件
hexo init nodejs-hexo
# 创建博客
hexo init nodejs-hexo
# 初始化，生成文件夹为blog
hexo init blog
# 进入blog文件夹
cd blog
# 安装依赖库
npm install
#生成一套静态网页
hexo generate
#运行测试,浏览器打开地址，http://localhost:4000/
hexo server
#进行部署
hexo deploy

#新建文章‘new article’
hexo new "new article"
#新建页面 ‘about’
hexo new page "about"

# 新建文章
hexo n "我的博客" == hexo new "我的博客"
# 生成
hexo g == hexo generate
# 启动服务预览
hexo s == hexo server
# 部署
hexo d == hexo deploy

发布博客到GitHub

创建令牌

点击用户头像里的setting，找到Delveloper settings，点击进入

生成：找到Personal access tokens点击Generate new token

勾选所有选项(这里也可以只勾选repo，设置令牌期限为无限期)

创建：写上名字并generate token

创建以后会生成令牌序列号，复制下来并保存

把你的令牌手动输入password框

若上传成功，你的博客已经可以通过网址进行访问，输入你的GitHub名.github.io即可访问你的博客

修改config.yml

找到博客目录config.yml文件，双击打开

修改deploy的内容为：

deploy:
  type: git
  repo: https://github.com/wqa247/wqa247.github.io.git
  branch: main

branch说明：github创建的gitpage默认使用main分支，需要在仓库的gitpage相关设置更改分支为master分支，或者干脆直接上传到main分支里面。

可以在你的仓库里看到branch，你可以进入并修改它的名字：

repo这里填写你的仓库地址：

复制https里的内容

在git输入：

npm install hexo-deployer-git --save #安装hexo-deployer-git发布工具
hexo cl #清除hexo静态页面缓存
hexo g #生成静态页面
hexo d #发布界面到deploy repo写的地址

如果发布时报错：fatal: unable to access '你的仓库地址'说明你的网络和GitHub连接不稳定，多尝试几次即可

发布时需要输入你的Username和personal access token(令牌)

用户名写你的GitHub用户名:

Please tell me who you are.
Run
  git config --global user.email "you@example.com"
  git config --global user.name "Your Name"
  
  git config --global user.email "1101447047@qq.com"
  git config --global user.name "maxstars247"

输入完信息后会提示你输入链接github的方式：

这里选择token输入你刚创建的令牌即可

进阶

新建post(文章)

你的博客里现在只有一篇叫hello world的文章，现在，你可以使用git执行下列命令来新建一个属于自己的文章了：

hexo new <文章名>

执行该命令后，你会发现在./blog/_posts发现新建的文章名.md

新文件

你也可以直接在_posts文件夹下直接新建一个markdown格式的文件，但是注意文章开头要加上：

---
title: 文章标题 #标题
date: 2021-1-19 17:35:26
categories: #分类
   - 文章分类
tags: #标签
   - 文章标签
---

此时你会发现没有合适的编辑器来对.md文档进行编辑

这里推荐几个常用的编辑器：

1. VS Code：vs code可以编辑markdown，在插件商店下载Markdown Preview Enhanced和Markdown All in One插件即可

2. Typora：这是mac上移植过来的专门针对markdown语法的编辑器，界面美观，十分好用，但是现在已经需要付费(14.99$)购买。

   官网：https://typora.io

   你可以到百度上搜索到typora最后一个免费版本0.11.15的资源

你可以自己去网上查找最适合自己的编辑器

之后就是学习基本的markdown语法

图片无法显示？

介绍：当你开始往博客里塞入图片时，一切都是那么完美，但一开启server后，你漂亮的图片只能显示一个裂开的标志，现实总是如此的折磨人

还记得你导入图片上的路径嘛？在你的博客页面中，你可以按F12查看它的路径是否正确

你可以仔细看一下它到底是个绝对路径还是相对路径

让它显示！

我们需要在_post文件夹下新建一个和文章名字相同的文件夹，把你文章里的图片全部上传到这个文件夹里

将你文章里的图片路径修改为：同名文件夹的相对路径

这时我们还需要安装一个hexo-asset-image插件来解决图片上传的问题：

地址：https://github.com/xcodebuild/hexo-asset-image

执行下列命令安装这个插件：

npm install https://github.com/xcodebuild/hexo-asset-image --save

开启post_asset_folder：

打开你的config.yml文件按Ctrl + F搜索post_asset_folder修改下列代码：

# 修改你的url地址来使图片的相对路径正确 16行，填写你仓库的地址,不要修改http://
url: http://example.com 

# 启动post_asset_folder 43行
post_asset_folder: true

关于post_asset_folder：当资源文件管理功能打开后，Hexo将会在你每一次通过 hexo new post <title> 命令创建新文章时自动创建一个文件夹。这个资源文件夹将会有与这个文章文件一样的名字。将所有与你的文章有关的资源放在这个关联文件夹中之后，你可以通过相对路径来引用它们，这样你就得到了一个更简单而且方便得多的工作流。

现在，让我们重新打开本地服务查看是否能显示图片：

hexo cl && hexo g && hexo s

当图片正常显示时，你可以再次查看正确的url路径。

当本地图片正确显示后，你可以将它发布到仓库里：

hexo d

注意：当你的文件中有空格时它不会被识别为路径，所以你存放图片的文件夹不能带有空格，不然这个图片会转换成字符输出

配置你的hexo主题

介绍：默认的landspace主题已经无法满足我们的需求了，我们需要一个更好看的主题来显示更多的个性化内容！

官方主题链接：https://hexo.io/themes/index.html

选择你的主题

你可以在官网选择一个心仪的主题，也可以到GitHub上搜索hexo的相关内容，前提是你必须先找好所有关于主题的设置教程，避免踩坑。

你也可以和我选择一样的主题，我将会在主题汇总中介绍我使用的主题：hexo-theme-matery

使你的主题生效

把你下载好的主题导入themes文件夹中，复制它的名字

你需要配置config.yml来使你导入的主题生效：

#修改博客语言
language: zh-CN #中文写zh-CN,英文则无需修改

#修改主题
theme: #填写你的主题文件夹名称

主题汇总

hexo-theme-matery

简介：hexo-theme-matery是我一直在使用的主题，我觉得这个主题基本可以满足我发布博客的所有需求，就没有再更改。该主题设置略微复杂，如果你按照本教程搭建过程中出现了问题，你应该到中文配置手册中查找问题，或者自行使用搜索引擎解决

官方链接：https://github.com/blinkfox/hexo-theme-matery

中文配置手册：https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

下载该主题后也可以在文件里查看到该手册

基本配置

这里创建的分页对应这几个功能：

你需要按照教程创建相应的分页界面，否则回返回错误页面，Cannot GET /xxx：

你需要在hexo根目录下创建该文件，而不是在themes文件夹内，在这个目录git bash here：

分类 categories：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容，你需要用markdown编辑器：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---

标签tags：

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---

about me页面：

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---

文章字数统计插件（必须安装）：

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

**contact留言板(可选，我没建)**：

hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

**friends页面(可选)**：

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

404页面：

手动创建一个/source/404.md文件：

---
title: 404
date: 2018-09-30 17:25:30
type: "404"
layout: "404"
description: "Oops～，我崩溃了！找不到你想要的页面 :("
---

菜单导航配置

菜单导航名称可以是中文也可以是英文(如：Index或主页)

图标icon 可以在Font Awesome 中查找

由于我们没有创建留言板功能，我们菜单直接把留言板去掉：

menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

中文链接转拼音（建议安装）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

添加 RSS 订阅支持（可选的）

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

banner图设置

banner图每日切换：

banner图就是封面图，不想要封面图的也可以设置不开启，我这里默认开启

找到matery的config.tml，修改成以下文件：

# banner 是否每日切换.
# 若为 false, 则 banner 默认为 /medias/banner/0.jpg
banner:
  enable: true
  # 开启随机 featureimages 图片
  random: false

背景图片设置

介绍：如果图片尺寸不合适，主题本身的样式会对原有图片进行拉伸，我们可以找到一张合适尺寸的图片，也可以调用API库。

设置样式调用API库：

我们需要找到主题的样式位置：hexo\themes\hexo-theme-matery\source\css\matery.css

找到body并且添加以下内容：

body{
background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) ) 0% 0% /     cover, url("https://iw233.cn/api/Random.php"), url("https://iw233.cn/api/Random.php") 0px 0px;
    background-repeat: no-repeat;
    background-position: center;
}
/*或*/
body{
background: linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35) ) 0% 0% /     cover, url("https://www.dmoe.cc/random.php"), url("https://www.dmoe.cc/random.php") 0px 0px;
    background-repeat: no-repeat;
    background-position: center;
}
/*这里主要是对api接口的调用*/

关闭遮罩

介绍：首页背景图会有遮罩，如果你不喜欢这个遮罩，这里可以选择关闭

这里还是找到matery.css文件，找到下列代码并注释即可

.bg-cover:after {
    -webkit-animation: rainbow 60s infinite;
    animation: rainbow 60s infinite;
} 

.bg-cover:before,
.bg-cover:after {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
}

文章Front-matter

介绍：Front-matter主要设置文章标题、特色图片、标签、文章分类、发布时间等内容

配置选项	默认值	描述
title	Markdown 的文件标题	文章标题，强烈建议填写此选项
date	文件创建时的日期时间	发布时间，强烈建议填写此选项，且最好保证全局唯一
author	根 _config.yml 中的 author	文章作者
img	featureImages 中的某个值	文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top	true	推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
hide	false	隐藏文章，如果hide值为true，则文章不会在首页显示
cover	false	v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg	无	v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password	无	文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc	true	是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax	false	是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary	无	文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories	无	文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags	无	文章标签，一篇文章可以多个标签
keywords	文章标题	文章关键字，SEO 时需要
reprintPolicy	cc_by	文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

全部示例：

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
hide: false
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

推荐示例：

---
title: HTML笔记
date: 2021-1-19 17:35:26
img: /medias/featureimages/html.jpg
tags: 
   - 教程
categories: 前端教程
---

代码高亮

简介：hexo高亮代码有很多种方式，目前流行的有hexo-prism-plugin和prismjs

hexo-prism-plugin

简介：hexo-prism-plugin是hexo的一款插件，主要作用是美化和高亮代码

注意：hexo-prism-plugin无法渲染{{ }}，需要更改成prismjs：

首先安装插件：

npm i -S hexo-prism-plugin

在根目录的config.yml文件中修改配置：

# 将下列配置修改
syntax_highlighter: 
highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: false
  hljs: false

# 在文件末尾添加如下配置
prism_plugin:
  mode: 'preprocess'  # preprocess/realtime
  theme: 'tomorrow'
  line_number: false #default false
  custom_css: #

注意：不删除highlight.js会出现渲染混乱，并且在渲染框中出现了hightlight字样：

syntax_highlighter: highlight.js

尝试直接删除这个highlight.js文件让syntax_highlighter(语法高亮显示)指向空文件，重新渲染页面，终于得到了正常的代码高亮：

prismjs

简介：prismjs是一个代码高亮的通用样式，hexo通过调用这个样式实现高亮。

官方下载链接：https://prismjs.com/index.html

如果你之前安装了hexo-prism-plugin，你需要卸载该插件：

npm un hexo-prism-plugin --save

卸载完成后，修改Hexo根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true，主要配置如下：

highlight:
  enable: false
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: false
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

设置完成以后，代码应该可以正常高亮显示了：

css没生效时：

prism的js主要是显示行号，显示特殊字符等功能，如果你没有这个需求可以不添加。metery主题的prism是没有js代码的，如果你要显示行号，你需要去官网下载：

这里Language选择select all：

插件选择Line Number：

选择完成后点击下载JS和CSS：

进入博客根目录/themes/{主题文件夹}/source/libs/prism/，删除原样式文件，将下载好的prism.js和prism.css重命名为prism.min.js和prism.min.css：

最后检查你的metery主题文件的config.yml中，libs的文件路径是否和文件夹的名称对应：

添加按钮

简介：有的朋友想要博客的背景图片，因为我图片是动态切换的，没问题，直接给整上

使用Vercel部署博客(推荐)

简介：Vercel可以代替CDN起到资源缓存的作用，鉴于很多免费的CDN被减速或封禁，这个方法是目前最好的选择

首先使用你的github账号注册vercel，注册完成后点击overview，然后Import Project：

选择你的博客仓库进行部署：

选择Framework Preset为other，别的保持不变，点击deploy进行部署：

部署完成后，我们直接添加域名：

按照提示添加域名即可

测试了一下，访问速度还是不错的：

套用CDN(DNS解析加速)

介绍：CDN(Content Delivery Network)是指内容分发网络，也称为内容传送网络，为了能在传统IP网上发布丰富的宽带媒体内容，他们提出在现有互联网基础上建立一个内容分发平台专门为网站提供服务

作用：降低访客打开你博客的延迟，同时提高博客的安全性

需要的资源：一个域名和一个CDN运营商(这两个服务需要提前购买好)

注意：我这里只列出几个，你可以使用很多渠道了解购买域名和CDN的网站

域名服务商：

1. Namesilo：Namesilo 是一家国外的域名注册商，价格及其便宜，比国内大家熟知的阿里腾讯等便宜好多，.com域名不到6刀就可以买，而且续费也便宜。 Namesilo 是 ICANN 认证的域名域名注册商之一，注册和转入都很方便，安全保护到位而且性价比很高。
2. GoDaddy：GoDaddy是ICANN认证的最大域名注册商之一，它应该算是最早一批进入中国市场的国外域名服务商了，早些年很多站长都喜欢在上面购买主机和域名。

CDN运营商：

1. Cloudflare：Cloudflare是一家美国的跨国科技企业，总部位于旧金山，在英国伦敦亦设有办事处。主要业务有CDN、WAF、DDNS等
2. 又拍云(国内)：又拍云以场景化CDN为核心业务，为客户提供云存储、云处理、云安全、流量营销等服务，帮助用户实现内容分发加速、产品研发加速、业务成长加速。

注意：使用国内的CDN运营商需要申请备案

套用CloudFlare(太慢了，不推荐)

官网：https://www.cloudflare.com/zh-cn/

现在你可以进入CloudFlare官网注册你的第一个账号，选择套餐为Free套餐即可

添加你的站点

在主页选择添加站点：

输入你购买到的域名，点击添加站点即可：

将你的域名DNS解析指向CloudFlare

添加域名后它会告诉你你的域名DNS解析没有指向Cloudflare，这时，你只需要按照提示设置域名的DNS指向

设置你的CkoudFlare安全等级

完成以上设置后，回到主页查看你的域名，当它显示为有效时，证明你的设置已经成功

我们需要点击域名，进入安全设置：

选择SSL/TLS：

这里选择完全：

创建你的域名

选择设置DNS：

创建一条CNAME记录：

点击添加记录

在名称输入：www

在目标输入你仓库的地址：(github名称)+github.io

点击关闭代理并保存

设置GitHub域名指向

返回你的项目，点击setting：

点击Pages，在Custom domain里输入你的域名：

当GitHub检测到是能用的以后，我们点击Save，点击Enforce HTTPS

返回Cloudflare打开代理状态并保存：

在浏览器输入你的域名看是否可以显示博客：

注意：

若无法使用HTTPS协议访问，说明证书还没下发，这时你只需要双手离开键盘，喝杯水，玩玩游戏，等待证书下发即可

如果无法正常显示你的博客，说明你的地址绑定出现了问题，自行查看是哪里的域名写错了

套用CloudFront

简介：CloudFront是亚马逊推出的CDN服务，但是没有CloudFlare的安全保护，而且没有傻瓜式的一键设置功能，同时CloudFront不免费，但是给博客做加速，费用不会太高（没有受到攻击的情况下）。

参考链接：https://aws.amazon.com/cn/blogs/china/configure-amazon-cloudfront-to-accelerate-the-whole-site

项目架构

简介：这是整个项目的架构图。这里需要用到两个域名，一个用于vercel，一个用于cloudflare重命名。当然你也可以使用vercel原分配的域名，这样你就节省了一个域名的使用。

我这里的建议是，使用vercel分配的域名进行加速，使用另外一个域名做备用访问接口，因此，你可能需要两个域名来完成这个项目：

为了完成域名的配置，建议将你的域名商权限分配给cloudflare，这里使用cloudflare做域名配置

新建Cloudfront分配

首先进入亚马逊云搜索cloudfront：

点击进入cloudfront选择创建分配：

设置分配

将vercel分配给博客的域名填入Origin domain（源域），设置协议为匹配查看器：

下面这里的自动压缩对象选择为Yes：

缓存策略和源请求策略选择如下：

全部设置项的解释如下，也可以查看参考链接获得更详细的介绍：

托管 源请求策略
UserAgentRefererHeaders	仅包含User-Agent和Referer标头，可以统计客户来源。
CORS-CustomOrigin	包含Origin标头，适用于自定义源启用跨源资源共享 CORS。
CORS-S3Origin	适用于S3源启用跨源资源共享 CORS。
AllViewer	适用于动态请求的源站，源站可以获取查询字符串和Cookie等信息。
Elemental-MediaTailor-PersonalizedManifests	适用于Amazon Elemental MediaTailor 终端节点的源

托管 响应标头策略
SimpleCORS	允许来自任何源的简单 CORS 请求（添加标头：Access-Control-Allow-Origin: *）。
CORS-With-Preflight	支持CORS的预检请求（Http的OPTIONS方法）。
SecurityHeadersPolicy	添加一组安全标头。
CORS-and-SecurityHeadersPolicy	添加CORS标头和安全标头。
CORS-with-preflight-and-SecurityHeadersPolicy	添加CORS，预检和安全标头。

设置关闭WAF：

选择使用所有边缘站点，开启HTTP/3：

申请一个证书：

选择请求公有证书：

这里填写*.你的域名，例如*.maxstars.xyz。然后选择DNS验证。填写完毕后点击请求：

在你的域名下添加一个CNAME认证即可：

添加完成后返回cloudfront配置，添加一个给读者访问的域名，添加完成后创建分配，等待分配完成即可访问：

等待域名生效后用nslookup查看域名是否已经加速，若查找到xxx.cloudfront.net则已经成功：

将博客设置被收录

设置必应收录

简介：这里我使用matery主题来演示。

必应收录链接：https://search.google.com/search-console/welcome?hl=zh-CN

这里我们选择添加HTML标签：

复这串HTML标签，来到hexo-theme-matery/layout/_partial/head.ejs中添加HTML标签：

将标签添加到此处即可，使用这条命令重新部署博客：

hexo cl && hexo g && hexo d

等待1分钟后，点击验证即可完成验证。

完成后直接可以在后台拿到API：

这里先复制API，保留备用。

增加收录速度

简介：使用hexo-submit-urls-to-search-engine可以增加各个平台搜索引擎的网页收录速度。

插件地址：https://github.com/cjh0613/hexo-submit-urls-to-search-engine?tab=readme-ov-file

插件中文文档：https://cjh0613.com/20200603HexoSubmitUrlsToSearchEngine

安装hexo-submit-urls-to-search-engine：

npm install --save hexo-submit-urls-to-search-engine

安装完成后，在主config.yml文件内添加插件配置：

hexo_submit_urls_to_search_engine:
  submit_condition: count #链接被提交的条件，可选值：count | period 现仅支持count
  count: 10 # 提交最新的10个链接
  period: 900 # 提交修改时间在 900 秒内的链接
  google: 0 # 是否向Google提交，可选值：1 | 0（0：否；1：是）
  bing: 1 # 是否向bing提交，可选值：1 | 0（0：否；1：是）
  baidu: 1 # 是否向baidu提交，可选值：1 | 0（0：否；1：是）
  txt_path: submit_urls.txt ## 文本文档名， 需要推送的链接会保存在此文本文档里
  baidu_host: https://cjh0613.github.io ## 在百度站长平台中注册的域名
  baidu_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  bing_host: https://cjh0613.github.io ## 在bing站长平台中注册的域名
  bing_token: 请按照文档说明获取 ## 请注意这是您的秘钥， 所以请不要把它直接发布在公众仓库里!
  google_host: https://cjh0613.github.io ## 在google站长平台中注册的域名
  google_key_file: Project.json #存放google key的json文件，放于网站根目录（与hexo _config.yml文件位置相同），请不要把json文件内容直接发布在公众仓库里!
  google_proxy: http://127.0.0.1:8080 # 向谷歌提交网址所使用的系统 http 代理，填 0 不使用
  replace: 0  # 是否替换链接中的部分字符串，可选值：1 | 0（0：否；1：是）
  find_what: http://cjh0613.github.io/blog
  replace_with: https://cjh0613.com

修改必应推送的开关、token和host即可。