同步来源：树洞剪藏 源站剪藏 ID：430 原文地址：https://linux.do/t/topic/298986/28

打开原文 · 打开源站剪藏快照

---

免费构建个人博客：Hexo + GitHub + Cloudflare - 开发调优 - LINUX DO

set 限制解除

跳到主要内容

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

开发调优

配置优化

​

3

话题

我的帖子

关于

友链

即将到来的活动

文档

更多

外部链接

Status

Connect

Channel

Telegram

类别

开发调优

资源荟萃

文档共建

跳蚤市场

前沿快讯

福利羊毛

搞七捻三

运营反馈

深海幽域

所有类别

标签

抽奖

公告

精华神帖

快问快答

人工智能

所有标签

消息

收件箱

频道

常规频道

直接消息

聊天

​

Default

​

​

真诚 、 友善 、 团结 、 专业 ，共建你我引以为荣之社区。 《常见问题解答》

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

开发调优

配置优化

343

浏览量

39

赞

6

链接

22

用户

4

阅读时间

11 分钟

​

12月 17 日

29 / 29

12月 17 日

1 分钟 前

​

前排围观支持一下 感谢分享大佬厉害啊 有点厉害支持~~

Pythonahy Regular

5 4 小时 #1

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

0. 前置准备

US.KG : 用于注册免费域名。

Cloudflare : 用于域名解析和加速。

Node.js : 用于运行 Hexo。

Git : 用于版本控制和部署。

GitHub : 用于代码托管和静态站点部署。

一、注册域名

1. 注册 US.KG 帐号

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

Alt Text 1377×848 49.1 KB

US.KG 注册信息填写 1532×200 7.53 KB

2. KYC 验证

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

US.KG Github KYC 页面 993×682 34 KB

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

Username: XXX

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

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

US.KG KYC 信息填写 929×498 28.1 KB

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

Alt Text 1301×591 52.6 KB

3. 创建域名

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

Alt Text 1827×535 52.3 KB

输入域名前缀，点击 Check。

US.KG 域名检查 863×309 22.3 KB

显示可以创建。

Alt Text 1553×733 33.3 KB

4. Cloudflare 绑定域名

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

Cloudflare 添加站点 1079×608 54 KB

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

Cloudflare 选择套餐 1051×278 15.6 KB

点击继续前往激活。

Cloudflare DNS 设置 1019×590 33.7 KB

Cloudflare DNS 服务器 647×203 7.71 KB

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

US.KG DNS 设置 843×282 13.9 KB

点击 Register。

Alt Text 1122×767 32.9 KB

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

US.KG DNS 注册成功 920×468 24.6 KB

回到 Cloudflare ，点击继续。

Cloudflare 继续 1042×475 22.7 KB

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

Cloudflare DNS 激活成功 763×291 11.9 KB

二、安装 Hexo

1. 安装 Node.js

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

Alt Text 1497×559 67.1 KB

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

Node.js 安装成功 979×512 4.88 KB

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

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

npm 镜像源设置 859×732 6.74 KB

2. 安装 Git

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

Alt Text 1036×710 62.2 KB

Git CMD 是 Windows 命令行风格。

Git Bash 是 Linux 系统命令行风格（推荐使用）。

Git GUI 是图形化界面（不建议新手使用）。

git config -l # 查看所有配置 git config --system --list # 查看系统配置 git config --global --list # 查看用户（全局）配置

3. 使用 SSH 连接 GitHub

打开 Git Bash。

Git Bash 打开 581×370 30.4 KB

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

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

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

Git 配置检查 581×370 29.9 KB

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

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

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

SSH Key 生成 581×370 26.4 KB

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

SSH Key 文件路径 782×622 72.4 KB

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

Alt Text 1426×752 48.9 KB

Alt Text 1334×621 37.7 KB

名字随便填一个。

Alt Text 1354×581 37.1 KB

GitHub SSH Key 配置完成 1034×666 27.7 KB

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

ssh -T [email protected]

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

GitHub SSH 连接测试 582×370 33.1 KB

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

GitHub SSH 连接成功 581×370 29.5 KB

4. 创建 GitHub 仓库

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

GitHub 创建仓库 694×304 21.7 KB

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

Alt Text 1386×920 131 KB

5. 初始化 Hexo 博客

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

Git Bash 在博客目录打开 549×403 22.3 KB

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

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

Hexo 安装 581×370 25.2 KB

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

Hexo 版本验证 581×370 25.3 KB

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

hexo init blog-demo cd blog-demo npm i

Hexo 初始化 581×370 29.8 KB

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

Hexo 博客目录 704×334 50.3 KB

node_modules ：依赖包

scaffolds ：生成文章的一些模板

source ：用来存放文章

themes ：主题

.npmignore ：发布时忽略的文件（可忽略）

_config.landscape.yml ：主题的配置文件

_config.yml ：博客的配置文件

package.json ：项目名称、描述、版本、运行和开发等信息

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

Hexo 启动 702×488 44.8 KB

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

Alt Text 1386×920 131 KB

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

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

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH-BnVd8UA5HG02ThiuBENAURr97D_wACShEAAvp9sFaGQ2rEM9gedzYE （图片大于 2 MB）

deploy: type: git repository: [email protected] :你的用户名/你的用户名.github.io.git branch: main

Alt Text 1426×752 78.1 KB

安装 hexo-deployer-git：

npm install hexo-deployer-git --save

Hexo Deployer 安装 581×370 16.7 KB

部署到 GitHub，输入命令：

hexo clean && hexo generate && hexo deploy

Hexo Deploy 581×370 9.74 KB

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

Hexo Deploy 完成 581×370 32.6 KB

hexo clean ：删除之前生成的文件，可以用 hexo cl 缩写。

hexo generate ：生成静态文章，可以用 hexo g 缩写。

hexo deploy ：部署文章，可以用 hexo d 缩写。

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH-VnVeaGV5Ih-cZHNUGijoOggETDPAACUxEAAvp9sFaAbbPP9lyWajYE （图片大于 2 MB）

7. 配置 Cloudflare Pages

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

Cloudflare Pages 创建项目 1317×461 28.1 KB

选择 Pages 的 连接到 Git 。

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH-dnVefj1IpRhEhHEVYOkHrICDq7QgACVhEAAvp9sFYFhs1qrdEgpzYE （图片大于 2 MB）

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIIlnYVFxoJuVB2Y8OpBuOm9QaFJk1wAChRAAAglTEFeY6LIqtfjtizYE （图片大于 2 MB）

保存并部署。

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIIpnYVHEN1sTXo5VvL1Ksh5ZQCa-QAAChhAAAglTEFdAbQSPCUwDBzYE （图片大于 2 MB）

Alt Text 916×344 12.7 KB

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

Cloudflare Pages 自定义域 1444×186 7.9 KB

稍等一会。

Cloudflare Pages 自定义域添加 1343×161 5.24 KB

这样域名就绑定了。

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH-5nVe18nqs2yBEZoza995BQS5R9xQACYhEAAvp9sFZ44IPS6-iYkzYE （图片大于 2 MB）

在最下面找到 Danger Zone 。

GitHub Danger Zone 925×726 59.8 KB

Alt Text 472×229 10 KB

GitHub 确认设置私有仓库 892×728 59.1 KB

三、安装博客主题安知鱼

1. 安装博客主题

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

VS Code 打开文件夹 946×533 43.3 KB

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH_pnVsnCJuba6nHHlNJ_e-khcoHjbAACBBIAAvp9uFam8hoEaS6BBTYE （图片大于 2 MB）

在终端输入命令：

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH_tnVs3NbHMzG96lCvXnF_iuQaYBHwACERIAAvp9uFZfUYxx2WjA-zYE （图片大于 2 MB）

2. 应用主题

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH_xnVs9ZgqwK6ruteFWngEU2-tMgMgACFBIAAvp9uFYi4euN6vpKBzYE （图片大于 2 MB）

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

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

本地预览

hexo cl; hexo g; hexo s

推送更新上线

hexo cl; hexo g; hexo d

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACH_9nVujxbhvTeOVePYihh22rBbh_jAACVxIAAvp9uFZ82V_lC9ZkATYE （图片大于 2 MB）

5. Hexo 常用命令

以下是 Hexo 博客常用命令：

命令 描述

hexo new [layout] 创建一篇新的文章

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 设置 1409×430 250 KB

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

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

Site

title: 观形物语 subtitle: 欢迎来到我的博客，希望你在这里能有收获 description: '' keywords: author: Pythonahy language: zh-CN timezone: ''

3. 菜单栏设置

3.1 文章

menu: 文章: 文章: /archives/ || anzhiyu-icon-box-archive 分类: /categories/ || anzhiyu-icon-shapes 标签: /tags/ || anzhiyu-icon-tags

3.1.1 分类页设置

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

hexo new page categories

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

---

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

安知鱼主题分类页设置 644×385 19.7 KB

3.1.2 标签页设置

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

hexo new page tags

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

---

title: tags date: 2024-12-10 16:34:02 type: "tags" comments: false aside: false top_img: false

安知鱼主题标签页设置 488×394 15.2 KB

3.2 友链

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

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 博客根目录下打开终端，输入：

hexo new page link

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

---

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 中输入：

• class_name: 框架 flink_style: flexcard hundredSuffix: "" link_list:

• name: anzhiyu主题 link: https://blog.anheyu.com/ avatar: https://npm.elemecdn.com/ [email protected] /img/avatar.jpg descr: 生活明朗，万物可爱 siteshot: https://npm.elemecdn.com/ [email protected] /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/ [email protected] /img/blog.anheyu.com.jpg color: vip tag: 技术

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACICBnWAWSpwAB4oDUsqdoxyuEEupQhXAAAigTAAJhy8FWmsSD2mxp5e82BA （图片大于 2 MB）

4. 搜索设置

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

npm install hexo-generator-search --save

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIANnVvrlyk2I5aeAAyragveE62kCEgACfhIAAvp9uFb8WWKSc68bwzYE （图片大于 2 MB）

设置主题配置文件：

local_search: enable: true preload: false CDN:

参数 解释

enable 是否开启本地搜索

preload 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件

CDN 搜索文件的 CDN 地址（默认使用的本地链接）

5. 首页顶部设置

安知鱼主题首页顶部设置 777×371 36 KB

首页随便逛逛people模式 而非技能点模式，关闭后为技能点模式需要配置creativity.yml

peoplecanvas: enable: false img: https://upload-bbs.miyoushe.com/upload/2023/09/03/125766904/ee23df8517f3c3e3efc4145658269c06_5714860933110284659.png

首页顶部相关配置

home_top: enable: true # 开关 timemode: date #date/updated title: 在纷繁中见本质 subTitle: 于平凡处觅真知 siteText: designai.us.kg

Alt Text 743×357 63.7 KB

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

• 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/ [email protected] /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. 首页顶部设置

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACII5nYVThhhbVnjQpx2PMcq2ndJl-jQACjBAAAglTEFfpO3wrjNtQ_DYE （图片大于 2 MB）

首页顶部相关配置

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 设置 814×424 214 KB

配置 _config.anzhiyu.yml ：

swiper: enable: false swiper_css: https://npm.elemecdn.com/ [email protected] /swiper/swiper.min.css #swiper css依赖 swiper_js: https://npm.elemecdn.com/ [email protected] /swiper/swiper.min.js #swiper js依赖 banner: tips: xxx title: xxx image: https://xxx.jpg link: https://hxxx.com

tips、title、image、link 自己填

Alt Text 638×358 263 KB

8. 侧边栏设置

安知鱼主题侧边栏设置 518×394 36 KB

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: xxx # 这有关于产品、设计、开发相关的问题和看法，还有文章翻译和分享。相信你可以在这里找到对你有用的知识和教程。 # 默认为站点描述 name_link: /

description 这里把 xxx 换成自己要说的话

社交链接：

要加社交帐号则自己添加

social settings (社交图标设置)

formal:

name: link || icon

social: Github: https://github.com/dodopoi || anzhiyu-icon-github BiliBili: https://space.bilibili.com/37696304 || anzhiyu-icon-bilibili

侧边个人资料图像：

安知鱼主题侧边栏头像设置 298×348 38.6 KB

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 模板，仅供参考

---

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

1.2 page.md 模板，仅供参考

---

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: #【可选】部分页面的顶部模块背景图片

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIAJnVvUTu2QsqSz1rogSDXeAZ0MIeAACdBIAAvp9uFZCh9htP4BphDYE （图片大于 2 MB）

2. 文章设置置顶

配置置顶参数 top ：

安知鱼主题文章置顶设置 811×701 21.9 KB

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

安知鱼主题多文章置顶 685×505 159 KB

3. 给文章设定密码

先安装 hexo-blog-encrypt ：

npm install --save hexo-blog-encrypt

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

安知鱼主题文章密码设置 370×267 3.85 KB

安知鱼主题文章密码保护 954×560 111 KB

4. 字数统计

先安装插件：

npm install hexo-wordcount --save

将下面的 enable 修改为 true ：

wordcount (字数统计)

see https://blog.anheyu.com/posts/c27d.html#字数统计

wordcount: enable: true post_wordcount: true min2read: true total_wordcount: true

安知鱼主题字数统计设置 779×204 61.3 KB

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

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 订阅支持

npm install hexo-generator-feed --save

在 _config.yml 文件中配置：

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://xxx # 修改为你的实际网站地址

再配置 _config.anzhiyu.yml ：

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 插件：

npm install hexo-abbrlink --save

配置 _config.yml 中的内容：

# 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 为自己网易音乐的

左下角音乐配置项

https://github.com/metowolf/MetingJS

nav_music: enable: true console_widescreen_music: false # 宽屏状态控制台显示音乐而不是标签 enable为true 控制台依然会显示 id: 517301810 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. 添加豆瓣看书电影到博客

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIERnXGs_KnhFHmnG5Gy_6nP4m9EOAAMQEwACOpjhViSR3FoPvKZMNgQ （图片大于 2 MB）

1. 先安装插件 hexo-douban

npm install hexo-douban --save

2. 配置文件

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

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. 生成豆瓣页面

hexo douban

Hexo Douban 生成 612×259 5.14 KB

不知道为什么，获取的电影太慢

4. 配置生成目录

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

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

安知鱼主题豆瓣菜单栏设置 1104×270 18.7 KB

上面的自定义图标：

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

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

9. 添加烟火特效

enable 设置为 true 即可：

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

安知鱼主题烟花设置 678×249 26.8 KB

10. 配置 Twikoo 评论系统

11. 申请 MongoDB 账号

MongoDB 注册 689×877 32.3 KB

进邮箱验证激活账号。

MongoDB 激活邮箱 576×486 21.5 KB

填写问卷调查。

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIFdnYE2-ye55naICvp2J_r1H-JWqfQACuhMAAlTcCFeQo_KzFiTs_TYE （图片大于 2 MB）

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIFhnYE6t_Nz2mQMR72pLJga5mY0lnwACvBMAAlTcCFdjkfvBoh-AtTYE （图片大于 2 MB）

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

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIFlnYFGJq-h7tO8txgAB0QPQjRX2EZAAAr4TAAJU3AhXMIXSSCCJhB42BA （图片大于 2 MB）

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIHJnYIsCNGatR6ewgBrcV9hCYLWyZwADFAACVNwIV91ABuK0kEqrNgQ （图片大于 2 MB）

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

MongoDB 添加用户权限 947×635 22.8 KB

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIF5nYFP4NU6SJNx5szN8lAxOMM4IQgACwxMAAlTcCFf1FPwHRp_f7TYE （图片大于 2 MB）

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIF9nYFV5S9fUhLYzK9KjLvTVSWh8vgACxRMAAlTcCFd7-McnicOzijYE （图片大于 2 MB）

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIGBnYFWxIpR4kTS3YbqZphCjwslNvQACxhMAAlTcCFeaoQOToOeq4zYE （图片大于 2 MB）

2. Vercel 部署

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

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

Vercel 一键部署 782×572 26.9 KB

点击 Continue to Dashboard。

Vercel 进入 Dashboard 834×805 52.5 KB

点击设置。

Vercel 设置 990×414 14.8 KB

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

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

Vercel 自定义域名 1429×300 22.3 KB

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

Vercel 添加自定义域名 1041×578 31.9 KB

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

Cloudflare 添加 Vercel DNS 1389×290 14.2 KB

在 Domains 中，出现打勾就行。

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIH9nYKevJ_C5uoItJcEsD-yn59Mv-AACFBQAAlTcCFdTRY4636NfmjYE （图片大于 2 MB）

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIHZnYJCx-GX7gxiHxt6tAyhDJqKHGgACBBQAAlTcCFe2X5vClaRvMzYE （图片大于 2 MB）

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

https://tgstate.ikun123.com/d/BQACAgUAAx0EcyK3ugACIHdnYJEh75XUU24qBSu3KiBYKLQDHwACBRQAAlTcCFd_UYjd8iKHlTYE （图片大于 2 MB）

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

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

Vercel 重新部署 1597×358 24.3 KB

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

Vercel 使用缓存重新部署 650×621 29.1 KB

出现这个表示成功了。

Vercel 部署成功 711×153 1.65 KB

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

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 。

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

Twikoo

https://github.com/imaegoo/twikoo

twikoo: envId: https:xxxxxx/ # 自己自定义的域名 region: visitor: false option:

运行命令：

hexo clean; hexo generate; hexo deploy

效果：

Twikoo 评论效果 1114×555 31.8 KB

五、参考教程

CM 零成本搭建个人博客完整指南

hexo 之 anzhiyu 主题配置教程

安知鱼主题官方文档

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

Hexo 安知鱼主题首页设置上

Hexo 系列合辑

heart

+1

36

回复

343

浏览量

39

赞

6

链接

22

用户

4

阅读时间

11 分钟

banlan 指导顾问

4 小时 #2

我的博客就是这个

推送可以直接 hexo cl;hexo g;hexo d; 1 个回复

回复

小仙 justincnn

4 小时 #3

厉害啦，

有 mac 版的 step by step 么？ 1 个回复

回复

黑格尔 kkk2 文化宣导员

4 小时 #4

好详细，不过这种重复造轮子的我是没有什么耐心写的 1 个回复

回复

爱夏·格雷拉特 KaffirLily 活跃用户

4 小时 #5

支持一下，写这种长文真的很耗心神。

回复

youqian

4 小时 #6

先 mark，能写长文的都不容易

回复

dashabi

4 小时 #7

支持一下。感觉大部分都是一时兴起搭一个，后续就不更新了。希望各位都能持续地产出优质内容吧

2 回复

大帅哥 handsome 种子用户

4 小时 #8

太强了，大佬！

回复

lida

4 小时 #9

牛的，感谢分享～

回复

Pythonahy Regular

1 banlan 3 小时 #10

我用的小狼毫输入法，打 hexo 就行啦。

open_mouth

1

回复

Pythonahy Regular 小仙 3 小时 #11

没有哦！没玩过 mac

回复

Pythonahy Regular 黑格尔 3 小时 #12

我经常装系统，常用的东西我都会记下来

回复

800k

3 小时 #13

向下滑，都滑了好几秒.

回复

wsa01378 活跃用户

3 小时 #14

写的挺用心阿。

小小提示 有些图大于 2MB linuxdo 不显示。

可以改为 jpg 90% 质量（光影魔术手），体积可以控制在 100-500k 一张 画质几乎不变

回复

jana 浴火重生

3 小时 #15

很用心的教程

回复

Yolodo

2 小时 #16

感谢分享大佬厉害啊

回复

跃数 yongsoul

2 小时 #17

这个太麻烦了，花三十块钱去阿里云买个香港轻量机直接部署 WordPress 就行了

回复

aidada 种子用户

2 小时 #18

大佬，好细～

回复

pggcharles Regular

2 小时 #19

厉害了，mark 支持

回复

ELIcdr ELI 大预言家

2 小时 #20

简直太细了！建议直接申请 精华神帖

回复

PLA81 浴火重生

2 小时 #21

写得很用心，也很详细，不错感谢分享

回复

Tao Lus 种子用户

43 分钟 #22

就喜欢这种认真劲儿，点赞！

回复

yiyiyi yizhgood001

40 分钟 #23

感谢佬，现在就在用这一套，教程太详细了

回复

shanhee

33 分钟 #24

好东西，支持一下

回复

zyx，I like you yux

32 分钟 #25

感谢大佬详细的教程

回复

yuyubianyi Regular

18 分钟 #26

敢不敢写的再长点

回复

vidi19

10 分钟 #27

泪目了，好详细，给佬点一万个赞。

回复

已臻神镜 12310 文化宣导员

4 分钟 #28

太厉害了！

回复

Reno 🐦‍🔥 浴火重生

1 分钟 #29

非常滴详细 适合俺这样的小白

回复

此话题将在最后一个回复的1 个月后关闭。

分享

加入书签

举报

回复

已取消置顶

​

常规

您会在别人 @ 您或回复您时收到通知。

推荐

相关

新话题和未读话题

话题列表，带有按钮的列标题可以排序。

话题

回复

浏览量

活动

基于Workers搭建TG私聊转发Bot，TG骗子识别 1 免打扰

开发调优

配置优化

10

15:30

7 小时

基于Cloudflare Worker部署的在线剪切板，支持markdown和文件分享（优化更新10） 22 免打扰

开发调优

Cloudflare 配置优化

200

11/23 21:53

1 天

使用docker搭建服务简易教程(caddy反代，自动SSL、泛域名证书、反代配置各类服务) 1 免打扰

开发调优

Docker

13

07/20 09:23

3 天

【配置优化】我拿到VPS服务器必做的那些事 13 免打扰

开发调优

325

07/26 15:35

14 天

教育邮箱申请 52 免打扰

开发调优

快问快答

136

03/15 18:50

11月 5 日

有 120 个未读 话题 和 207 个新 话题，

或浏览 开发调优 中的其他话题

开始阅读 启用自动点赞

楼主 AI

等级