免费构建个人博客：Hexo + GitHub + Cloudflare

免费构建个人博客：Hexo + GitHub + Cloudflare

0. 前置准备

  • US.KG: 用于注册免费域名。
  • Cloudflare: 用于域名解析和加速。
  • Node.js: 用于运行 Hexo。
  • Git: 用于版本控制和部署。
  • GitHub: 用于代码托管和静态站点部署。

一、注册域名

1. 注册 US.KG 帐号

打开 US.KG 注册帐号，电话地址等信息可以使用 身份生成器。

US.KG 注册页面

US.KG 注册信息填写

2. KYC 验证

重新登录 US.KG，选择 Github KYC 选项，然后点击 Proceed to GitHub。

US.KG Github KYC 页面

在最下方填入以下信息，包括 us.kg 的用户名以及注册该网站的原因：

  • Username: XXX
  • Reason for Registering the .US.KG Domain Name (Why): Study and build website.

勾选五个方框，然后点击 Proceed to GitHub。

US.KG KYC 信息填写

在仓库主页 FreeDomain 上给一个 Star。

US.KG Github Star

3. 创建域名

登录 US.KG，我们可以创建三个域名，点击 Domain Registration 创建域名。

US.KG 域名注册页面

输入域名前缀，点击 Check。

US.KG 域名检查

显示可以创建。

US.KG 域名注册成功

4. Cloudflare 绑定域名

登录 Cloudflare，点击右上角 添加站点，输入在 us.kg 注册的域名。

Cloudflare 添加站点

套餐选择免费的，点击继续。

Cloudflare 选择套餐

点击继续前往激活。

Cloudflare DNS 设置

Cloudflare DNS 服务器

将 Cloudflare 提供的服务器地址复制到 us.kg。

US.KG DNS 设置

点击 Register。

US.KG DNS 注册

这样就完成了 us.kg 的域名设置。

US.KG DNS 注册成功

回到 Cloudflare ，点击继续。

Cloudflare 继续

刷新一下，显示如下即表示成功。

Cloudflare DNS 激活成功

二、安装 Hexo

1. 安装 Node.js

下载 Node.js，安装时除了修改安装目录为 D 盘，其余步骤都点击下一步。

Node.js 安装

安装完成后，使用 Win + R 输入 CMD 打开命令行，输入 node -v，如果出现版本号，则说明安装成功。

Node.js 安装成功

将 npm 源修改为阿里云镜像源，在 CMD 窗口运行以下命令：

1
npm install -g cnpm --registry=https://registry.npmmirror.com

npm 镜像源设置

2. 安装 Git

下载 Git，安装时除了修改安装目录为 D 盘，其余步骤都点击下一步。

Git 安装

  • Git CMD 是 Windows 命令行风格。
  • Git Bash 是 Linux 系统命令行风格（推荐使用）。
  • Git GUI 是图形化界面（不建议新手使用）。
1
2
3
git config -l  # 查看所有配置
git config --system --list # 查看系统配置
git config --global --list # 查看用户（全局）配置

3. 使用 SSH 连接 GitHub

打开 Git Bash。

Git Bash 打开

配置用户名和邮箱，用户名为 GitHub 账号，邮箱为注册 GitHub 的邮箱。

1
2
git config --global user.name "用户名"
git config --global user.email "邮箱"

使用 git config -l 检查是否配置成功。

Git 配置检查

配置公钥 GitHub，执行以下命令生成 SSH 公钥，用于计算机连接 GitHub。

1
ssh-keygen -t rsa -C "邮箱"

在提示 Enter file in which to save the key 时，直接一路回车即可，不推荐设置密钥。

SSH Key 生成

使用 Everything 搜索 id_rsa.pub 并打开路径。

SSH Key 文件路径

id_rsa.pub 就是公钥，用记事本打开并复制内容，然后在 GitHub 中找到 Settings - SSH and GPG keys 配置 SSH 密钥。

GitHub SSH 设置

GitHub 添加 SSH Key

名字随便填一个。

GitHub SSH Key 命名

GitHub SSH Key 配置完成

测试连接，输入以下命令：

1
ssh -T git@github.com

提示 Are you sure you want to continue connecting (yes/no/[fingerprint])?，输入 yes 即可。

GitHub SSH 连接测试

出现 You've successfully 则表示成功，完成了环境准备工作。

GitHub SSH 连接成功

4. 创建 GitHub 仓库

打开 GitHub，点击右上角的 + 号，选择 New repository，创建一个 <用户名>.github.io 的仓库。

GitHub 创建仓库

仓库名字的格式必须为：<用户名>.github.io，可见性选择 public，方便第一次部署检查问题，点击 Create repository 进行创建。

GitHub 仓库命名

5. 初始化 Hexo 博客

创建一个文件夹保存博客源码，这里选的路径为 D:/Hexo-Blog，在文件夹内右键鼠标，选择 Open Git Bash here。

Git Bash 在博客目录打开

在 Git BASH 输入以下命令安装 Hexo：

1
npm install -g hexo-cli && hexo -v

Hexo 安装

完成安装后，输入 hexo -v 验证是否成功。

Hexo 版本验证

初始化 Hexo 项目并安装相关依赖：

1
2
3
hexo init blog-demo
cd blog-demo
npm i

Hexo 初始化

初始化后，D 盘博客文件夹下会出现以下文件：

Hexo 博客目录

  • node_modules：依赖包
  • scaffolds：生成文章的一些模板
  • source：用来存放文章
  • themes：主题
  • .npmignore：发布时忽略的文件（可忽略）
  • _config.landscape.yml：主题的配置文件
  • _config.yml：博客的配置文件
  • package.json：项目名称、描述、版本、运行和开发等信息

输入 hexo cl && hexo s 启动项目。

Hexo 启动

打开浏览器，输入地址：http://localhost:4000/，看到以下效果，说明构建成功了。

Hexo 默认页面

6. 将静态博客挂载到 Github Pages

修改 _config.yml 文件，在 Blog-demo 目录下的 _config.yml，这是 Hexo 框架的配置文件，可以修改大部分配置，可参考官方wiki。

修改最后一行的配置，将 repository 修改为自己的 GitHub 项目地址，branch 要改为 main 代表主分支（注意缩进）。

Hexo 配置文件

1
2
3
4
deploy:
  type: git
  repository: git@github.com:你的用户名/你的用户名.github.io.git
  branch: main

Hexo Deploy 配置

安装 hexo-deployer-git：

1
npm install hexo-deployer-git --save

Hexo Deployer 安装

部署到 GitHub，输入命令：

1
hexo clean && hexo generate && hexo deploy

Hexo Deploy

如果出现 Deploy done，则说明部署成功了。

Hexo Deploy 完成

  • hexo clean：删除之前生成的文件，可以用 hexo cl 缩写。
  • hexo generate：生成静态文章，可以用 hexo g 缩写。
  • hexo deploy：部署文章，可以用 hexo d 缩写。

稍等两分钟，打开浏览器访问：https://<用户名>.github.io/，就可以看到博客内容了。

GitHub Pages 部署成功

7. 配置 Cloudflare Pages

打开 Cloudflare，在 Workers 和 Pages 中选择 创建项目。

Cloudflare Pages 创建项目

选择 Pages 的 连接到 Git。

Cloudflare Pages 连接 Git

Alt Text

保存并部署。

Alt Text

Alt Text

点击继续处理项目，在 Cloudflare 中，自定义域粘贴我们注册的 us.kg 复制的域名。

Cloudflare Pages 自定义域

稍等一会。

Cloudflare Pages 自定义域添加

这样域名就绑定了。

把 GitHub 中的仓库设置为私有仓库，点击 Settings。

GitHub 设置私有仓库

在最下面找到 Danger Zone。

GitHub Danger Zone

Alt Text

GitHub 确认设置私有仓库

三、安装博客主题安知鱼

1. 安装博客主题

打开 VS Code，选择 文件 - 打开文件夹。

VS Code 打开文件夹

VS Code 打开 Hexo 博客目录

在终端输入命令：

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

VS Code 安装安知鱼主题

2. 应用主题

修改 Hexo 的配置文件 _config.yml，将主题修改为 anzhiyu。

修改 Hexo 主题

安装 pug 和 stylus 渲染插件，在 VS Code 终端输入命令：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save --registry=http://registry.npmmirror.com

3. 覆盖主题配置

将 /themes/anzhiyu/_config.yml 文件复制到 hexo 根目录，并重命名为 _config.anzhiyu.yml。以后修改任何主题配置，都只需修改 _config.anzhiyu.yml 的配置即可。

注意：

  • _config.anzhiyu.yml 中的配置优先级最高，修改原 _config.yml 无效。
  • 每次更新主题，可能存在配置变更，请注意更新说明，可能需要手动对 _config.anzhiyu.yml 同步修改。
  • 可以使用 hexo g --debug 查看命令行输出，确认配置是否生效。
  • 如果想将某些配置覆盖为空，注意不要把主键删掉。

4. 本地启动 Hexo

1
2
3
4
5
# 本地预览
hexo cl; hexo g; hexo s

# 推送更新上线
hexo cl; hexo g; hexo d

Hexo 本地启动

5. Hexo 常用命令

以下是 Hexo 博客常用命令：

命令 描述
hexo new [layout] <title> 创建一篇新的文章
hexo generate 或 hexo g 生成静态文件
hexo server 或 hexo s 启动本地服务器
hexo deploy 或 hexo d 部署网站
hexo clean 清除缓存文件和已生成的静态文件
hexo clean; hexo server 清除缓存并启动本地服务器查看最新效果
hexo clean; hexo generate; hexo deploy 清除缓存后生成新文件并把内容发布到自己的服务器

四、安知鱼主题设置

一、样式设置

1. nav 相关设置

安知鱼主题 nav 设置

修改 _config.anzhiyu.yml 中的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav:
  enable: true # 设置为true
  travelling: false
  clock: false
  menu:
    - title: 网页
      item:
        - name: GitHub
          link: https://github.com/pythonahy6
          icon: https://pic.imgdb.cn/item/67574d30d0e0a243d4e0bd1a.jpg
        - name: AI
          link: https://free.share-ai.top/
          icon: https://pic.imgdb.cn/item/6757f02ed0e0a243d4e0fc7c.png
    - title: 项目
      item:
        - name: 图床
          link: https://tgstate.ikun123.com/
          icon: https://picgo-1.pages.dev//favicon.ico

2. 博客名称设置

修改 _config.yml 中tltle 和 subtitle 顺便把 language 为中文 zh-CN

1
2
3
4
5
6
7
8
# Site
title: 观形物语
subtitle: 欢迎来到我的博客，希望你在这里能有收获
description: ''
keywords:
author: Pythonahy
language: zh-CN
timezone: ''

3. 菜单栏设置

3.1 文章
1
2
3
4
5
menu:
   文章:
     文章: /archives/ || anzhiyu-icon-box-archive
     分类: /categories/ || anzhiyu-icon-shapes
     标签: /tags/ || anzhiyu-icon-tags
  • 3.1.1 分类页设置

在 Hexo 博客根目录下打开终端，输入：

1
hexo new page categories

找到 source/categories/index.md 这个文件，修改添加 type: "categories"：

1
2
3
4
5
6
7
8
---
title: categories
top_img: false #是否显示顶部图
date: 2024-12-10 16:26:39
type: "categories" #页面类型，必须为 tags
comments: false #是否显示评论
aside: false #是否显示右侧作者栏
---

安知鱼主题分类页设置

  • 3.1.2 标签页设置

在 Hexo 博客根目录下打开终端，输入下面的命令生成标签页：

1
hexo new page tags

找到 source/tags/index.md 这个文件，修改添加 type: "tags"：

1
2
3
4
5
6
7
8
---
title: tags
date: 2024-12-10 16:34:02
type: "tags"
comments: false
aside: false
top_img: false
---

安知鱼主题标签页设置

3.2 友链

_config.anzhiyu.yml，只设置友人帐：

1
2
3
4
5
6
7
8
9
10
menu:
   文章:
     文章: /archives/ || anzhiyu-icon-box-archive
     分类: /categories/ || anzhiyu-icon-shapes
     标签: /tags/ || anzhiyu-icon-tags

   友链:
     友人帐: /link/ || anzhiyu-icon-link
     #朋友圈: /fcircle/ || anzhiyu-icon-artstation
     #留言板: /comments/ || anzhiyu-icon-envelope
  • 3.2.1 友人帐

在 Hexo 博客根目录下打开终端，输入：

1
hexo new page link

找到 source/link/index.md 这个文件：

1
2
3
4
5
6
7
8
---
title: link
top_img: false #是否显示顶部图
date: 2024-12-10 16:45:58
type: "link"
comments: false
aside: false
---

新建文件 source/_data/link.yml，如果没有 _data 文件夹，请自己新建。在 source/_data/link.yml 中输入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
- class_name: 框架
  flink_style: flexcard
  hundredSuffix: ""
  link_list:
    - name: anzhiyu主题
      link: https://blog.anheyu.com/
      avatar: https://npm.elemecdn.com/anzhiyu-blog-static@1.0.4/img/avatar.jpg
      descr: 生活明朗，万物可爱
      siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg

- class_name: 推荐博客
  flink_style: telescopic
  hundredSuffix: ""
  link_list:
    - name: 亲自巡山的大王
      link: https://dodopoi.github.io/
      avatar: https://avatars.githubusercontent.com/u/118941122?v=4
      descr: 夕晴照雪霁无瑕
      siteshot: https://npm.elemecdn.com/anzhiyu-theme-static@1.1.6/img/blog.anheyu.com.jpg
      color: vip
      tag: 技术

安知鱼主题友情链接设置

4. 搜索设置

安装插件 hexo-generator-search，并根据它的文档进行配置：

1
npm install hexo-generator-search --save

打开 _config.anzhiyu.yml，搜索 Local search，把 enable 的值改为 true。

安知鱼主题本地搜索设置

设置主题配置文件：

1
2
3
4
local_search:
  enable: true
  preload: false
  CDN:
参数 解释
enable 是否开启本地搜索
preload 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
CDN 搜索文件的 CDN 地址（默认使用的本地链接）

5. 首页顶部设置

安知鱼主题首页顶部设置

1
2
3
4
# 首页随便逛逛people模式 而非技能点模式，关闭后为技能点模式需要配置creativity.yml
peoplecanvas:
  enable: false
  img: https://upload-bbs.miyoushe.com/upload/2023/09/03/125766904/ee23df8517f3c3e3efc4145658269c06_5714860933110284659.png
1
2
3
4
5
6
7
# 首页顶部相关配置
home_top:
  enable: true # 开关
  timemode: date #date/updated
  title: 在纷繁中见本质
  subTitle: 于平凡处觅真知
  siteText: designai.us.kg

Alt Text

创建 /source/_data/creativity.yml，输入以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- class_name: 开启创造力
  creativity_list:
    - name: Docker
      color: "#57b6e6"
      icon: https://bu.dusays.com/2023/04/09/643293b0f0abe.png
    - name: Photoshop
      color: "#4082c3"
      icon: https://bu.dusays.com/2022/12/15/639aa3a5c240e.png
    - name: Node
      color: "#333"
      icon: https://npm.elemecdn.com/anzhiyu-blog@2.1.1/img/svg/node-logo.svg
    - name: Python
      color: "#fff"
      icon: https://bu.dusays.com/2023/04/09/643293b1230f7.png
    - name: JS
      color: "#f7cb4f"
      icon: https://bu.dusays.com/2023/04/09/643293b121f02.png
    - name: Git
      color: "#df5b40"
      icon: https://bu.dusays.com/2023/04/09/643293b10ccdd.webp

6. 首页顶部设置

Alt Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 首页顶部相关配置
home_top:
  enable: true # 开关
  timemode: date #date/updated
  title: 在纷繁中见本质
  subTitle: 于平凡处觅真知
  siteText: designai.us.kg
  category:    
    - name: 设计
      path: /design/
      shadow: var(--anzhiyu-shadow-blue)
      class: blue
      icon: anzhiyu-icon-dove
    - name: AI
      path: //
      shadow: var(--anzhiyu-shadow-red)
      class: green
      icon: anzhiyu-icon-fire
    - name: Python
      path: /Python/
      shadow: var(--anzhiyu-shadow-green)
      class: red
      icon: anzhiyu-icon-book

7. 非轮播显示

安知鱼主题首页 Banner 设置

配置 _config.anzhiyu.yml：

1
2
3
4
5
6
7
8
9
swiper:
  enable: false
  swiper_css: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.css #swiper css依赖
  swiper_js: https://npm.elemecdn.com/anzhiyu-theme-static@1.0.0/swiper/swiper.min.js #swiper js依赖
banner:
  tips: 设计达人
  title: Design
  image: https://pic.imgdb.cn/item/675827bdd0e0a243d4e17808.jpg
  link: https://hao.shejidaren.com/index.html
tips、title、image、link 自己填

Alt Text

8. 侧边栏设置

安知鱼主题侧边栏设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# aside (侧边栏)
# --------------------------------------
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display: # 控制对应详情页面是否显示侧边栏
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description: 我是一名平面设计师，博客主要记录设计方面的知识。 # <div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color:rgba(255, 255, 255, 0.8);">这有关于<b style="color:#fff">产品、设计、开发</b>相关的问题和看法，还有<b style="color:#fff">文章翻译</b>和<b style="color:#fff">分享</b>。</div><div style="line-height:1.38;margin:0.6rem 0;text-align:justify;color:rgba(255, 255, 255, 0.8);">相信你可以在这里找到对你有用的<b style="color:#fff">知识</b>和<b style="color:#fff">教程</b>。</div> # 默认为站点描述
    name_link: /

社交链接：

1
2
3
4
5
6
7
# 要加社交帐号则自己添加
# social settings (社交图标设置)
# formal:
#   name: link || icon
social:
   Github: https://github.com/dodopoi || anzhiyu-icon-github
   BiliBili: https://space.bilibili.com/37696304 || anzhiyu-icon-bilibili

侧边个人资料图像：

安知鱼主题侧边栏头像设置

1
2
3
4
5
6
7
8
9
10
# Image (图片设置)
# --------------------------------------

# Favicon（网站图标）
favicon: /favicon.ico

# Avatar (头像)
avatar:
  img: https://pic.imgdb.cn/item/675827bed0e0a243d4e1780a.jpg
  effect: false

二、其它设置

1. 配置文章模板

在 /scaffolds 目录下有几个模板文件，其中：

  • post.md：新建文章模板
  • page.md：新建标签页模板
1.1 post.md 模板，仅供参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
updated: #【可选】页面更新日期
tags: #【可选】文章标签
categories: #【可选】文章分类
cover: https://pic.imgdb.cn/item/675827bed0e0a243d4e1780a.jpg #【可选】文章缩略图(如果没有设置 top_img,文章页顶部将显示缩略图，可设为 false/图片地址/留空)
password: #密码，需要安装插件 hexo-blog-encrypt
top: # 1 置顶
keywords: #【可选】文章关键字
description: #【可选】文章描述
top_img: #【可选】文章顶部图片
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)
swiper_index: 10 #【可选】首页轮播图配置 index 索引，数字越小越靠前
top_group_index: 10 #【可选】首页右侧卡片组配置, 数字越小越靠前
ai: #【可选】文章ai摘要
background: "#fff" #【可选】文章主色，必须是16进制颜色且有6位，不可缩减，例如#ffffff 不可写成#fff
---

<div class="video-container">
[up主专用，视频内嵌代码贴在这]
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
1.2 page.md 模板，仅供参考
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
title: {{ title }} #【必需】页面标题
date: {{ date }} #【必需】页面创建日期
type: #【必需】标签、分类、关于、音乐馆、友情链接、相册、相册详情、朋友圈、即刻页面需要配置
updated: #【可选】页面更新日期
comments: #【可选】显示页面评论模块(默认 true)
description: #【可选】页面描述
keywords: #【可选】页面关键字
top_img: https://img.090227.xyz/file/ae62475a131f3734a201c.png #【可选】页面顶部图片
mathjax: #【可选】显示 mathjax(当设置 mathjax 的 per_page: false 时，才需要配置，默认 false)
katex: #【可选】显示 katex(当设置 katex 的 per_page: false 时，才需要配置，默认 false)
aside: #【可选】显示侧边栏 (默认 true)
aplayer: #【可选】在需要的页面加载 aplayer 的 js 和 css,请参考文章下面的音乐 配置
highlight_shrink: #【可选】配置代码框是否展开(true/false)(默认为设置中 highlight_shrink 的配置)
top_single_background: #【可选】部分页面的顶部模块背景图片
---

安知鱼主题文章模板

2. 文章设置置顶

配置置顶参数 top：

安知鱼主题文章置顶设置

如果存在多个置顶文章，top 后的参数越大，越靠前：

安知鱼主题多文章置顶

3. 给文章设定密码

先安装 hexo-blog-encrypt：

1
npm install --save hexo-blog-encrypt

不需要将 password: 密码 添加到文章开头，在前面的自定义 post.md：新建文章模板中已经内置了，在需要的时候，设置 password 的值就行。

安知鱼主题文章密码设置

安知鱼主题文章密码保护

4. 字数统计

先安装插件：

1
npm install hexo-wordcount --save

将下面的 enable 修改为 true：

1
2
3
4
5
6
7
# wordcount (字数统计)
# see https://blog.anheyu.com/posts/c27d.html#字数统计
wordcount:
  enable: true
  post_wordcount: true
  min2read: true
  total_wordcount: true

安知鱼主题字数统计设置

地点显示日本修改 location 即可，把 expand 设置为 true，会展开全部目录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# toc (目录)
toc:
  post: true
  page: false
  number: true
  expand: true  #目录展开所有级别
  style_simple: false # for post

post_copyright:
  enable: true
  decode: false
  author_href:
  location: 日本
  license: CC BY-NC-SA 4.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
  avatarSinks: false # hover时头像下沉
  copyright_author_img_back:
  copyright_author_img_front:
  copyright_author_link: /

5. 添加 RSS 订阅支持

1
npm install hexo-generator-feed --save

在 _config.yml 文件中配置：

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: Pythonahy
subtitle: ‘欢迎来到我的博客，希望你在这里能有收获'
description: ''
keywords:
author: Pythonahy
language: zh-CN
timezone: ''

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://designai.us.kg # 修改为你的实际网站地址

再配置 _config.anzhiyu.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# social settings (社交图标设置)
# formal:
#   name: link || icon
social:
  rss: https://designai.us.kg/atom.xml || anzhiyu-icon-rss
  # Github: https://github.com/anzhiyu-c || anzhiyu-icon-github
  # BiliBili: https://space.bilibili.com/372204786 || anzhiyu-icon-bilibili

feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content: true  # 建议设为 true，这样订阅者可以看到完整内容
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date
  icon: icon.png
  autodiscovery: true

6. 博客永久链接设置

安装 hexo-abbrlink 插件：

1
npm install hexo-abbrlink --save

配置 _config.yml 中的内容：

1
2
3
4
5
6
7
8
9
10
11
# # URL
# ## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://designai.us.kg # 修改为你的实际网站地址
permalink: posts/:abbrlink.html
abbrlink:
  alg: crc32 
  rep: hex 
permalink_defaults:
pretty_urls:
  trailing_index: false # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

7. 添加音乐

修改 _config.anzhiyu.yml：其它默认，修改 id 为自己网易音乐的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 左下角音乐配置项
# https://github.com/metowolf/MetingJS
nav_music:
  enable: true
  console_widescreen_music: false # 宽屏状态控制台显示音乐而不是标签 enable为true 控制台依然会显示
  id: 51731810
  theme: '#42b983'
  server: netease
  fixed: true       # 开启吸底模式
  autoplay: true   # 是否自动播放
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
  hideLrc: true     # 隐藏歌词
  listMaxHeight: "525px" #列表最大高度

# 路径为 /music 的音乐页面默认加载的歌单 1. nav_music 2. custom
music_page_default: nav_music

8. 添加豆瓣看书电影到博客

安知鱼主题豆瓣设置

1. 先安装插件 hexo-douban
1
npm install hexo-douban --save
2. 配置文件

打开 _config.yml 只要修改 id，其它默认：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
douban:
  id: 285338112
  builtin: true
  dynamic: true
  item_per_page: 10
  meta_max_line: 4
  customize_layout: page
  swup: false
  book:
    path: books/index.html
    title: "无为书斋"
    quote: "书在几上，道在心中"
    actions:
      - do
      - wish
      - collect
    option:
  movie:
    path: movies/index.html
    title: "坐忘影室"
    quote: "万象皆为虚幻，悟道方见真常"
    actions:
      - do
      - wish
      - collect
    option:
  # game:
  #   path: games/index.html
  #   title: "This is my game title"
  #   quote: "This is my game quote"
  #   actions:
  #     - do
  #     - wish
  #     - collect
  #   option:
  # song:
  #   path: songs/index.html
  #   title: "This is my song title"
  #   quote: "This is my song quote"
  #   actions:
  #     - do
  #     - wish
  #     - collect
  #   option:
3. 生成豆瓣页面
1
hexo douban

Hexo Douban 生成

不知道为什么，获取的电影太慢，或者哪里出问题了，我一天时不时刷新，才加进来 100 不到。

4. 配置生成目录

打开 _config.anzhiyu.yml，会在主题文件夹下的 public 目录生成一个 books 和 movies 文件夹。

1
2
3
4
5
6
7
8
9
10
11
12
13
menu:
   文章:
     文章: /archives/ || anzhiyu-icon-box-archive
     分类: /categories/ || anzhiyu-icon-shapes
     标签: /tags/ || anzhiyu-icon-tags

   友链:
     友人帐: /link/ || anzhiyu-icon-link
     #朋友圈: /fcircle/ || anzhiyu-icon-artstation
     #留言板: /comments/ || anzhiyu-icon-envelope
   书影:
    阅读: /books/ || anzhiyu-icon-book-open
    电影: /movies/ || anzhiyu-icon-play

安知鱼主题豆瓣菜单栏设置

上面的自定义图标：

1
2
阅读: /books/ || anzhiyu-icon-book-open
电影: /movies/ || anzhiyu-icon-play

安知鱼支持修改图标，打开 anzhiyu 主题图标，使用 anzhiyu-icon- + 图标的名字，比如 anzhiyu-icon-play。

9. 添加烟火特效

enable 设置为 true 即可：

1
2
3
4
fireworks:
  enable: true
  zIndex: 9999 # -1 or 9999
  mobile: false

安知鱼主题烟花设置

10. 配置 Twikoo 评论系统

1. 申请 MongoDB 账号

MongoDB 注册

进邮箱验证激活账号。

MongoDB 激活邮箱

填写问卷调查。

MongoDB 调查问卷

选择免费套餐，云服务商选择 aws，地区选择 N. Virginia (us-east-1)。

MongoDB 选择云服务商

接下来会得到一个用户名和密码，先复制一份保存，等下会用到。

在 Database Access 页面点击 Add New Database User 创建数据库用户。

MongoDB 创建用户

Authentication Method 选 Password，在 Password Authentication 下设置数据库用户名，点击 Autogenerate Secure Password 生成密码并复制密码。

MongoDB 创建用户密码

选择 Atlas Admin，最后点击 Add User。

MongoDB 添加用户权限

在 Network Access 页面点击 Add IP Address，点击 ALLOW ACCESS FROM ANYWHERE，点击 Confirm。

MongoDB 添加 IP 访问权限

  1. 在 Database 页面点击 Connect，连接方式选择 Drivers。

MongoDB 连接驱动

复制如下数据库连接字符串，将连接字符串中的 <username>:<password> 修改为刚刚创建的数据库 用户名:密码，<> 不要保留。

MongoDB 获取连接字符串

2. Vercel 部署

打开 Vercel 注册账号，用 GitHub 登录。

点击 一键部署，填入项目名字，点击 Create。

Vercel 一键部署

点击 Continue to Dashboard。

Vercel 进入 Dashboard

点击设置。

Vercel 设置

点击 Domains，设置自定义域名。

不绑定自己的域名，会出现评论不显示，或者用不了的情况，所以需要绑定我们自己的域名。

Vercel 自定义域名

输入自己的域名，复制下面的信息。

Vercel 添加自定义域名

打开 Cloudflare 选择自己的服务器，点击，dns，记录。

Cloudflare 添加 Vercel DNS

在 Domains 中，出现打勾就行。

Vercel 域名绑定成功

配置环境变量并调试配置，找到 Environment Variables，添加环境变量 MONGODB_URI，值为前面记录的数据库连接字符串。

Vercel 环境变量设置

找到 Deployment Protection，设置 Vercel Authentication 为 Disabled，然后点击 Save。

Vercel 禁用部署保护

找到 Function，将 Function Region 修改为你需要的地区。

重新部署应用，点击 Deployments，点击三个点，点击 Redeploy。

Vercel 重新部署

勾选 Use existing Build Cache 然后点击下面的 Redeploy。

Vercel 使用缓存重新部署

出现这个表示成功了。

Vercel 部署成功

接下来就是配置 _config.anzhiyu.yml，搜索 Twikoo：

1
2
3
4
5
6
7
8
9
10
comments:
  # Up to two comments system, the first will be shown as default
  # Choose: Valine/Waline/Twikoo/Artalk
  use: Twikoo
  text: true # Display the comment name next to the button
  # lazyload: The comment system will be load when comment element enters the browser's viewport.
  # If you set it to true, the comment count will be invalid
  lazyload: true
  count: false # Display comment count in post's top_img
  card_post_count: false # Display comment count in Home Page

修改：use: Twikoo，lazyload: true。

再修改下面这里，重新部署即可：

1
2
3
4
5
6
7
# Twikoo
# https://github.com/imaegoo/twikoo
twikoo:
  envId: https:xxxxxx/  # 自己自定义的域名
  region:
  visitor: false
  option:

运行命令：

1
hexo clean; hexo generate; hexo deploy

效果：

Twikoo 评论效果

为 Twikoo 添加 Telegram 即时消息推送

1.访问 BotFather 输入 /newbot 为机器人起一个名字，为机器人选择一个用户名须以Bot结尾，我们会得到 API token

Alt Text

2.激活自己的机器人并链接 LivegramBot

点击 t.me/机器人用户名 ，输入 /start

Alt Text

访问 LivegramBot 发送 /addbot 回复自己机器人的 API token

Alt Text

看到 Success! 说明成功啦！

3.获取 chat id

访问 userinfobot 输入 /start 获取 Id

Alt Text

4.拼接 PUSHOO_TOKEN

格式为 api_token#chat_id，比如：759xxx:xxxx_s0#48xxx

7594980291:AAFvLtRDJAYs_cLeJjyMchjJ88dIzWFx_s0#483000844

5.设置 Twikoo

在 Twikoo 的即时通知里面。

PUSHOO_CHANNEL 填入：telegram

PUSHOO_TOKEN 填入：api_token#chat_id

SC_MAIL_NOTIFY 填入：true

评论看了下，通知成功

image-20241226194929828

五、遇到的问题

一、Chrome 浏览器报错 ERR_SSL_VERSION_OR_CIPHER_MISMATCH

此网站无法提供安全连接，使用了不受支持的协议。

Alt Text

访问 Cloudflare 点击账户主页，选择自己有问题的域名

Alt Text

选择 SSL/TLS 概述，更改加密模式为完全（严格）

Alt Text

点击 SSL/TLS 边缘证书，发现这里没有证书

Alt Text

拖到下面，先点击禁用通用 SSL，再启用通用 SSL

Alt Text

返回上面，稍微等一下，可以看到部署成功了

Alt Text

六、参考教程