hexo+github+Netlify+ClouldFlare搭建个人博客

一、准备工作

这个教程使用的个人博客框架是hexo，博客文件拖管于github，博客网站用netlify生成，国内访问采用Cloudflare进行CDN加速。

1.1 创建GitHub仓库

进入GitHub网站，在网站上新建一个代码仓库用于保存我们的网页

点击Your repositories，进入仓库页面。

点击New按钮，进入仓库创建页面。

填写Repository name仓库名，格式必须为<用户名>.github.io，我设置的用户名为ismoyuai.github.io 然后点击 Create repository。

这样我们仓库初步准备已经好了，下面安装Node.js

1.2 安装Node.js以及npm

进入node.js官网下载相应的版本，在Windows上安装一般按下图选择，最后点击下载

安装会连同包含的环境变量和npm一起安装，安装后，我们检测Node.js是否安装成功，打开终端，输入命令：

第一个：

node -v

执行命令后，如果安装成功会显示nodejs版本号。

第二个：

npm -v

执行成功后，如果安装成功会显示npm版本号。

1.3 安装Git

到Git官网下载最新版本，这里我下载的是64为的安装版本，下载完成后打开，然后按步骤默认安装即可。

1.4 安装Hexo主题框架

安装Hexo框架需要借助npm包管理器安装，打开终端执行命令：

npm install -g hexo-cli # 全局安装hexo命令行工具

其中-g参数表示全局安装，没有这个参数就只在当前目录下安装，建议全局安装。

安装完成后，执行命令：

hexo -v

这个命令可以看安装hexo版本号

二、搭建博客

2.1 本地创建

选一个你存放数据的盘，创建一个文件夹。这个文件夹用来存放我们所有博客内容和素材，后续的操作都在这个文件夹中进行，比如我在D盘创建一个MYBLOG文件夹，在D盘右键点击Open Git Bash here输入命令：

hexo init MYBLOG

这个命令用来初始化我们博客框架，需要等待一段时间让它进行下载。下载完成后文件夹内容如下：

进入MYBLOG文件夹

cd MYBLOG
npm install

本地部署启动

hexo g
hexo s

完成后会在本地地址启动你的本地博客。浏览器访问 http://localhost:4000，页面默认主图风格如下

2.2 部署到GitHub仓库

之前的步骤中，我们已经完成了对Github账户的注册以及Github Pages的创建，接下来是将本地博客发布至Github Pages。

（1）安装发布插件，在站点目录下执行下面的命令，也就是创建的博客目录下：

npm install hexo-deployer-git --save

（2）git配置GitHub邮箱用户名

git config --global user.email "xxx" //设置邮箱 你的Github邮箱

git config --global user.name "xxx" //设置用户名 你的Github名称

（3）将本地目录和GitHub关联起来，输入下面命令行：

ssh-keygen -t rsa -C "你的邮箱地址"

输入后一直回车，然后在C:/Users/[username]目录下找到名为.ssh的文件夹， 文件夹内会有两个文件，一个id_rsa.pub一个id_rsa，用文本编辑器打开id_rsa.pub，复制里面的的内容。 然后打开Github，点击右上角的头像 Settings 选择SSH and GPG keys

（4）点击New SSH key 将之前复制的内容粘帖到Key的框中。 上面的Title可以随意，点击Add SSH key 完成添加。

（5）然后回到Git的命令行界面，测试一下是否与GitHub连接成功。输入下面的命令行：

ssh -T [email protected]

点击回车，然后会出现一个询问内容，输入yes，回车，会出现一段内容，Hi <account name>! You've successfully authenticated, but GitHub doesnot provide shell access.。 说明连接成功。此处这个<account name>应该是你Github的用户名。

（6）进入博客站点目录，用文本编辑器打开_config.yml，这个_config.yml是博客的配置文件，在以后的博客修改，如个性化修改，博客SEO优化等都会使用到，修改如下图的几个地方：

title: 你的博客名
subtitle: 博客的副标题，有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者，在文章中显示
language: 博客语言语种   
timezone: 时区

（7）在文件最底部，有一个deploy，在deploy下面添加我们的GitHub站点仓库信息。填入如下代码，并如下图所示：

deploy:
  type: git
  repo: [email protected]:Github用户名/github用户名.github.io.git 
  branch: master

repo：也可使用https地址，如：https://github.com/Github用户名/Github用户名.github.io.git

（8）最后回到终端执行下面命令，准备将页面发布到GitHub

# 清除之前生成静态页面
hexo clean
# 根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
hexo d

上传完成后，在浏览器中打开https://<用户名>.github.io，查看上传的网页。如果页面变成了之前本地调试时的样子，说明上传已经完成了。

三、Netlify建站

3.1 介绍

Netlify是一个国外的免费的提供静态网站部署服务的平台，能够将托管 GitHub，GitLab 等上的静态网站部署上线。至于我们为什么不使用github自带的gitpage，原因很简单，访问速度慢。此外，Netlify还有很多别的功能支持。

3.2 建站步骤

1. 首先注册并登陆 Netlify

   • 这一步需要能够科学上网，因为这是一个国外的网站
   • 我们的博客在开启cloundflare的CDN加速之前，也只能通过科学上网的方式访问

2. 新建站点：

   点击Import an existing project新建站点

3. 连接GitHub

4. 选择我们的博客项目仓库

5. 一切默认，最后点击如下按钮完成导入

6. 完成后会得到一个URL，打开这个网址就是我们的个人博客了

接下来先配置域名

3.3 配置域名

配置域名的前提自然是要购买域名了，从任意域名服务商处购买一个域名。

然后设置域名解析，类型为CNAME，内容为xxxxx.netlify.app，也就是我们刚刚建站给的域名。

设置完毕之后需要等待一段时间，因为DNS服务器需要一段时间来进行同步。

然后，我们还需要回到netlify中配置一下自己的用户域名，这样的话可以在国外获得netlify本身的CDN支持。

输入我们配置的域名后，进行相关的配置，由于我们的域名本身已经配置了解析，这里会显示出来，不用再额外添加记录，只需要一路默认即可。最后点击Done即可

我们下面设置一下netlify本身的对于国外CDN的支持。下面箭头位置出点击Set up Netlify DNS，这里我已经设置过了所以显示的按钮不是这个。

之后，我们就可以通过自己配置的域名访问自己的个人博客，比如说我的博客地址是：https://blog.ismoyu.cn

但是，此刻我们的博客访问依然需要科学上网，因为我们还没有国内的CDN的支持，下面，我们来解决这个问题。

四、ClouldFlare加速(解决国内加速问题)

介绍

Netlify 虽然已经提供了 CDN 加速，但在使用过程中发现国内访问还是比较慢，Cloudflare 相对于国内的七牛云、阿里云等云服务商的 CDN 速度会慢一些，但是它有免费版本，而且最重要的是域名不用备案。

加速步骤

1. 注册Clouldflare并登陆
2. 添加站点

进入主页，点击添加域

3. 选择免费套餐

4. 添加DNS记录

和上面配置阿里云域名一样

5. 更改名称服务器

• 主要步骤是在你的域名服务商那里修改 dns 解析服务器为 cloudflare 提供的地址，修改完成后点击完成。

• 以阿里云为例

  1. 进入域名管理配置界面

     

  2. 将域名服务器从阿里云的默认服务器改成clouldflare的服务器

     

配置完成后等待一段时间即可

配置https

在clouldflare配置完成之后，我们可以回到netlify去配置一下https访问。

1. 先确认一下dns解析:

   

2. 自动安装证书

3. 最后看到如下的界面，就说明https配置完成了:

   

最后测试站点，我们可以试着用自己的浏览器去访问自己配置的域名地址，如果在不科学上网的情况下能够正常看到我们自己的博客界面，那就证明我们的个人博客就配置成功了。

接下来就是关于博客主题的设置和一些个性化修改部分。

五、博客主题安装以及一些个性化修改

官方默认主题很丑，那我们别的不做，首先来替换一个好看点的主题。

官方主题：官方提供的各种主题

Github、Jekyll Themes上都能找到各种主题，我用的是Hexo matery，就以此作为例子。

5.1 主题下载和安装

进入我们博客根目录，在 git bash 输入以下命令下载主题：

git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery

下载完成后，修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: matery

_config.yml 文件的其它修改建议:

• 请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
• 建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
• 如果你是中文用户，则建议修改 language 的值为 zh-CN。

5.2 新建分类 categories 页

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "categories"

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

---
title: categories
date: 2025-04-22 17:25:30
type: "categories"
layout: "categories"
---

5.3 新建标签 tags 页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "tags"

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

---
title: tags
date: 2025-04-22 17:25:40
type: "tags"
layout: "tags"
---

5.4 新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "about"

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

---
title: about
date: 2025-04-22 17:25:40
type: "about"
layout: "about"
---

5.5 新建留言板 contact 页（可选的）

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "contact"

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

---
title: contact
date: 2025-04-22 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。

5.6 新建友情链接 friends 页（可选的）

friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

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

---
title: friends
date: 2025-04-22 17: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": "前去学习"
}]

5.7 新建 404 页

如果在你的博客 source 目录下还没有 404.md 文件，那么你就需要新建一个。编辑你刚刚新建的页面文件 /source/404.md，至少需要以下内容：

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

5.8 菜单导航配置

5.8.1 配置基本菜单导航的名称、路径url和图标icon.

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

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

5.8.2 二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

1. 在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
2. 在children下创建二级菜单的 名称name,路径url和图标icon.
3. 注意每个二级菜单模块前要加 -.
4. 注意缩进格式

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-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Music
        url: /music
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image

5.9 代码高亮

从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，Matery主题对此进行了改造支持。

如果你的博客中曾经安装过 hexo-prism-plugin 的插件，那么你须要执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。

然后，修改你博客根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true，主要配置如下：

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

主题中默认的 prismjs 主题是 Tomorrow Night，如果你想定制自己的主题，可以前往 prismjs 下载页面 定制下载自己喜欢的主题 css 文件，然后将此 css 主题文件取名为 prism.css，替换掉 matery 主题文件夹中的 source/libs/prism/prism.css 文件即可。

5.10 搜索

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

npm install hexo-generator-search --save

在你博客目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

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

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

安装命令如下：

npm i hexo-permalink-pinyin --save

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

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

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

5.12 文章字数统计插件（建议安装）

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

安装命令如下：

npm i --save hexo-wordcount

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

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

5.13 添加emoji表情支持（可选的）

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在你博客目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:

执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。

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

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

npm install hexo-generator-feed --save

在你博客目录下的 _config.yml 文件中，新增以下的配置项：

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

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

5.15 修改页脚

页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

5.16 添加中文繁简转换

在主题的 _config.yml 文件中，开启 translate 为 enable。

开启中文繁简转换如下修改。默认不开启。 实例演示： 繁简转换 底下 footer 栏

translate:
  enable: true

5.17 修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

其中，社交图标（如：fa-github）你可以在 Font Awesome 中搜索找到。以下是常用社交图标的标识，供你参考：

• Facebook: fab fa-facebook
• Twitter: fab fa-twitter
• Google-plus: fab fa-google-plus
• Linkedin: fab fa-linkedin
• Tumblr: fab fa-tumblr
• Medium: fab fa-medium
• Slack: fab fa-slack
• Sina Weibo: fab fa-weibo
• Wechat: fab fa-weixin
• QQ: fab fa-qq
• Zhihu: fab fa-zhihu

注意: 本主题中使用的 Font Awesome 版本为 5.11.0。

5.18 修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

5.19 配置音乐播放器（可选的）

要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：

# 是否在首页显示音乐
music:
  enable: true
  title:     	    # 非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   # require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    # require song, playlist, album, search, artist
  id: 503838841     # require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠

server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），baidu（百度音乐）。

type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）。

id获取方法示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，playlist的id即为这串数字。

5.20 文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。

配置选项	默认值	描述
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 中的一个

注意:

1. 如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图各有特色。
2. date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
3. 如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
4. 您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则

以下为文章的 Front-matter 示例。

最简示例

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
---

最全示例

---
title: hexo-github搭建个人博客教程
date: 2025-04-22 09:25:00
author: 墨宇Logic
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
---

新建文章模板修改

首先为了新建文章方便，我们可以修改一下文章模板，建议将/scaffolds/post.md修改为如下代码：

---
title: {{ title }}
date: {{ date }}
author: 
img: 
coverImg: 
top: false
cover: false
toc: true
mathjax: false
password:
summary:
tags:
categories:
---

这样新建文章后 一些Front-matter参数不用你自己补充了，修改对应信息就可以了。

自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：

• 菜单
• 我的梦想
• 首页的音乐播放器和视频播放器配置
• 是否显示推荐文章名称和按钮配置
• favicon 和 Logo
• 个人信息
• TOC 目录
• 文章打赏信息
• 复制文章内容时追加版权信息
• MathJax
• 文章字数统计、阅读时长
• 点击页面的’爱心’效果
• 我的项目
• 我的技能
• 我的相册
• Gitalk、Gitment、Valine 和 disqus 评论配置
• 不蒜子统计和谷歌分析（Google Analytics）
• 默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图

我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

修改 banner 图和文章特色图

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

图床

当博文中有图片时，若是少量图片，可以直接把图片存放在 source 文件夹中，但这显然不合理的，因为图片会占据大量的存储的空间，加载的时候相对缓慢 ，这时考虑把博文里的图片上传到某一网站，然后获得外部链接，使用 Markdown 语法，![图片信息](外部链接) 完成图片的插入，这种网站就被成为图床。

我用的图床：聚合图床

六、博客维护

到此为止，我们的个人博客就彻底搭建完成啦。后续我们只需要修改博客的配置文件和博客本身的markdown源文件，然后执行命令：

hexo clean && hexo g && hexo d

这样我们就能将我们修改后的内容上传到GitHub，然后Netlify会自动同步，将生成在public文件夹中的静态网页部署出去。

更多实用文章和AI大模型应用开发文章欢迎到我个人博客来观看：墨宇Logic