个人博客搭建

通过Cloudflare安装Tunnel

Cloudflare 注册
Cloudflare Tunnel 教程
Cloudflare Pages 教程
西部数码官网

安装Portainer CE 监控面板

1
2
3
4
5
6
7
8
9
10
11
12
# 拉取最新镜像
sudo docker pull portainer/portainer-ce:latest
# 创建数据存储卷
sudo docker volume create portainer_data
# 部署容器
sudo docker run -d \
	-p 8000:8000 -p 9443:9443 -p 9000:9000 \
	--name portainer \
	--restart=always \
	-v /var/run/docker.sock:/var/run/docker.sock \
	-v portainer_data:/data \
	portainer/portainer-ce:latest

安装FileBrowser文件管理器

1
2
mkdir -p /opt/jetson-server/filebrowser
touch /opt/jetson-server/filebrowser/database.db
1
2
3
4
5
6
7
8
9
docker run -d \
  --name filebrowser \
  --restart=always \
  -p 18080:80 \
  -v /opt/jetson-server:/srv \
  -v /opt/jetson-server/filebrowser:/config \
  -e FILEBROWSER_USERNAME=white \
  -e FILEBROWSER_PASSWORD=yourpassword \
  filebrowser/filebrowser

安装git 9.0.2

1
2
3
4
apt install git
/**/安装git
git --version
/**/查看git的版本

安装node.js环境 20.20.1

1
2
3
4
5
6
7
8
# 下载npm软件包
sudo apt install npm
# 下载noede.js环境
sudo apt install nodejs
# 验证环境中是否存在正确的 npm 版本
npm -v
# 验证环境中是否存在正确的 node 版本
node -v

arm 架构的apt中可能版本较旧，建议去nodejs下载地址下载所需版本，然后手动解压安装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 解压 .tar.gz 文件
sudo tar -xzvf node-v20.20.1-linux-arm64.tar.gz

# 解压 .tar.xz 文件
sudo tar -xvf node-v20.20.1-linux-arm64.tar.xz

# 移动到 /usr/local
sudo mv node-v20.20.1-linux-arm64 /usr/local/nodejs

# 配置环境变量
echo 'export NODE_HOME=/usr/local/nodejs' >> ~/.bashrc
echo 'export PATH=$NODE_HOME/bin:$PATH' >> ~/.bashrc

# 立即生效
source ~/.bashrc

# 切换 npm 国内源（淘宝镜像）
npm config set registry https://registry.npmmirror.com

安装Hexo框架

1
2
# 安装hexo
npm install hexo-cli -g

初始化Hexo

1
2
3
4
5
6
# 安装hexo
sudo npm install hexo -g
# 此处可以是任意你喜欢的名字
mkdir blog
# 初始化部署hexo
hexo init blog

让Hexo在后台运行

1
npm install -g pm2
1
2
3
4
5
6
7
8
9
10
11
12
cat > hexo_run.js << 'EOF'
//run
const { exec } = require('child_process')
exec('hexo server',(error, stdout, stderr) => {
        if(error){
                console.log('exec error: ${error}')
                return
        }
        console.log('stdout: ${stdout}');
        console.log('stderr: ${stderr}');
})
EOF
1
pm2 start hexo_run.js

安装butterfly主题

1
2
# 下载稳定版butterfly主题
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

修改 Hexo 根目录下的 _config.yml，把主题改为 butterfly

1
theme: butterfly

如果你没有 pug 以及 stylus 的渲染器，请下载安装：

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

在 hexo 的根目录创建一个文件 _config.butterfly.yml，并把主题目录的 _config.yml 内容复制到 _config.butterfly.yml 去。这边我建议用cp命令，直接将主题的config内容复制到hexo根目录上

以后只需要在 _config.butterfly.yml 进行配置就行。如果使用了 _config.butterfly.yml， 配置主题的 _config.yml 将不会有效果。

Hexo 会自动合并主题中的 _config.yml 和 _config.butterfly.yml 里的配置，如果存在同名配置，会使用 _config.butterfly.yml 的配置，其优先度较高。

1
cp themes/butterfly/_config.yml  _config.butterfly.yml

配置博客

配置网站页面

打开hexo根目录的_config.yml

1
2
3
4
5
6
7
8
# Site
title: 一只白色
subtitle: White's Blog
description: '欢迎来到我的个人博客,这里记录日常,分享技术...'
keywords:
author: White
language: zh-CN
timezone: ''

修改永久链接格式

修改hexo根目录的_config.yml

1
2
3
4
5
6
url: https://www.whitee.cn
permalink: :category/:id/ # 改成 '分类/id/' 格式
permalink_defaults: # 没有设置参数时使用的默认参数
pretty_urls:
  trailing_index: true # 设置为 false 可从永久链接中移除结尾的“index.html”
  trailing_html: true # 设置为 false 可从永久链接中移除结尾的“.html”

当我们发布文章时，在文章头部信息中添加id信息

1
2
3
4
5
6
7
---
title: 测试文章
date: 2021-04-22 11:02:53
id: blog001 # 此处对应url中的id部分
categories: []
tags: []
---

同时在_config.yml中修改category_map, 将很多category是中文的映射成英文

1
2
3
4
5
6
7
8
# Category & Tag
default_category: uncategorized
category_map:
  Android: android
  SQL: sql
  工具: kits
  数据库: database
tag_map:

目录配置

打开hexo根目录的_config.butterfly.yml

1
2
3
4
5
6
7
8
9
10
11
menu:
  首页: / || fas fa-home  # 目录
  时光档案: /archives/ || fas fa-archive #档案
  标签: /tags/ || fas fa-tags #标签
  分类: /categories/ || fas fa-folder-open #分类
  列表||fa fa-list || hide:
    音乐: /music/ || fas fa-music
    照片: /picture/ || fas fa-images
    电影: /movies/ || fas fa-video
  友链: /link/ || fas fa-link #友情链接
  关于: /about/ || fas fa-heart #关于

社交设置

打开hexo根目录的_config.butterfly.yml

1
2
3
social:
  fab fa-github: https://github.com/maodoo0701 || Github || "#hdhfbb"
  fas fa-envelope: mailto:maodoo@qq.com || Email || "#000000"

头像设置

1
2
3
4
favicon: /img/favicon.png #网站图标
avatar:
  img: /img/avatar.png
  effect: true # 头像会一直转圈

标签、分类等页面 top_img 设置

_config.butterfly.yml中的如下配置

配置 解释
index_img 主页的 top_img，也就是主页遮罩图片
default_top_img 默认的 top_img，当页面（包括文章页）的 top_img 没有配置时，会显示 default_top_img
archive_img 归档页面的 top_img
tag_img tag 子页面的默认 top_img
tag_per_img tag 子页面的 top_img，可配置每个 tag 的 top_img
category_img category 子页面的默认 top_img
category_per_img category 子页面的 top_img，可配置每个 category 的 top_img
(tags/categories/自建页面) 和 文章页 的 top_img 需到对应的 md 页面设置 front-matter 中的 top_img 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# Note: tag page, not tags page
tag_img: /img/tags.jpg

# The banner image of tag page, you can set the banner image for each tag
# Format:
#  - tag name: xxxxx
tag_per_img:

# Note: category page, not categories page
category_img: /img/categories.jpg

# The banner image of category page, you can set the banner image for each category
# Format:
#  - category name: xxxxx
category_per_img:
  旅行: /img/category_trip.png
  笔记: /img/category_note.png

页面顶部大图配置（Banner）

_config.butterfly.yml 配置：

1
2
3
4
index_img:        # 首页，一般不配
archive_img:      # 归档页，直接配
tag_img:          # 标签页，是给特定tag配置的默认背景
category_img:     # 分类页，是给特定category配置的默认背景

标签 / 分类单独背景

1
2
3
4
tag_per_img:
  - java: /img/java.jpg
  - linux: /img/linux.jpg
category_per_img:

tags（不是tag） 页面背景配置的方法（categories同理）

1
2
# 找到这个文件
source/tags/index.md
1
2
3
4
5
# 在文件头部添加上这个
---
title: 标签
top_img: /img/tags.jpg
---

背景图和顶部脚步图设置

1
2
3
4
5
6
# 设置的是博客封面图和每篇文章头图
default_top_img: /img/default_top_img.png
# 设置为false使[页脚背景变透明设置]生效
footer_img: false
# 设置的是博客背景图，这里我们留空，自定义背景特效
background:

自定义背景特效

修改_config.butterfly.yml中的如下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# canvas_ribbon (静止彩带背景)
# 见: https://github.com/hustcc/ribbon.js
canvas_ribbon:
  enable: false
  size: 150
  alpha: 0.6
  zIndex: -1
  click_to_change: false
  mobile: false

# Fluttering Ribbon (动态彩带)
canvas_fluttering_ribbon:
  enable: false
  mobile: false

# canvas_nest
# https://github.com/hustcc/canvas-nest.js
canvas_nest:
  enable: false
  color: '0,0,255' # 线条的颜色，默认: '0,0,0'；RGB 值：(R,G,B)。（注意：用 ',' 分隔）
  opacity: 0.7 # 线条的透明度 (0~1)，默认: 0.5
  zIndex: -1 # 背景的 z-index 属性，默认: -1
  count: 99 # 线条的数量，默认: 99
  mobile: false

代码块格式设置

1
2
code_blocks:
  macStyle: true

文章封面

1
2
3
4
5
6
7
8
9
10
11
cover:
  # 主页是否显示文章封面
  index_enable: true
  # 侧栏是否显示文章封面
  aside_enable: true
  # 归档页面是否显示文章页面
  archives_enable: true
  default_cover:
    - https://maodoo.oss-cn-beijing.aliyuncs.com/20241210172528345.jpg
    - https://maodoo.oss-cn-beijing.aliyuncs.com/20241210172459243.png
    #从这两个图片之中随机选取图片

主题目录

1
2
3
hexo new page tags
hexo new page categories
hexo new page link

分别找到 source/tags/index.md、source/categories/index.md 、source/link/index.md 文件并编辑

1
2
3
4
5
6
7
---
title: 标签
date: 2018-01-05 00:00:00
type: 'tags'
orderby: random
order: 1
---
1
2
3
4
5
---
title: 分类
date: 2018-01-05 00:00:00
type: 'categories'
---
1
2
3
4
5
---
title: 友链
date: 2018-06-07 22:17:49
type: 'link'
---

数据来源

1
2
3
mkdir _data # 创建一个名为data的文件夹
touch link.yml # 创建一个名为link.yml的文件
vi link.yml # 编辑link.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- class_name: 友情链接
  class_desc: 那些人，那些事
  link_list:
    - name: Hexo
      link: https://hexo.io/zh-tw/
      avatar: https://d33wubrfki0l68.cloudfront.net/6657ba50e702d84afb32fe846bed54fba1a77add/827ae/logo.svg
      descr: 快速、简单且强大的网志框架

- class_name: 网站
  class_desc: 值得推荐的网站
  link_list:
    - name: Youtube
      link: https://www.youtube.com/
      avatar: https://i.loli.net/2020/05/14/9ZkGg8v3azHJfM1.png
      descr: 视频网站
    - name: Weibo
      link: https://www.weibo.com/
      avatar: https://i.loli.net/2020/05/14/TLJBum386vcnI1P.png
      descr: 中国最大社交分享平台
    - name: Twitter
      link: https://twitter.com/
      avatar: https://i.loli.net/2020/05/14/5VyHPQqR6LWF39a.png
      descr: 社交分享平台

创建新文章

如果资源只给特定的文章使用，可以将 config.yml 文件中的 post_asset_folder 选项设为 true，然后在每一次通过命令创建新文章时自动创建一个与文章 title 同名的文件夹，然后就可以把有关的资源放在这个关联文件夹中，再通过相对路径来引用它们

1
post_asset_folder: true

创建新文章

1
hexo new post <title>

文章中 Front-matter 参数

参数 作用 解释
title 文章标题 作为文章标题展示
date 发布时间 会展示在标题旁边，并为归档页起到排序作用
tags 标签 文章的标签
categories 分类 文章的分类
cover 封面 首页文章卡片封面
top_img 顶图 文章顶部 Banner 大图
sticky 置顶 文章置顶，sticky 数值越大越靠前，butterfly 会先按 sticky 再按 date 排序
description 摘要 首页文章摘要、SEO 描述、社交分享摘要、Butterfly 卡片摘要，不存在则会截取正文前几行

文章 Front-matter 中的description

在文章顶部的的 Front-matter 里设置 description 字段，修改（_config.butterfly.yml）中的 index_post_content 参数，可以控制首页文章摘要

1
2
3
4
5
6
7
8
9
# Display the article introduction on homepage
# 1: description
# 2: both (if the description exists, it will show description, or show the auto_excerpt)
# 3: auto_excerpt (default)
# false: do not show the article introduction
index_post_content:
  method: 2
  # If you set method to 2 or 3, the length need to config
  length: 500

安装搜索插件

1
npm install hexo-generator-searchdb --save

_config.yml 改成：

1
2
3
4
5
search:
  enable: true
  path: search.xml
  field: post
  format: html
  • enable: true 必须有
  • limit 可以先去掉（避免兼容问题）

_config.butterfly.yml 改成：

1
2
3
4
5
6
search:
  use: local_search

  local_search:
    enable: true
    preload: false

强制清理缓存（很多人死在这一步）

1
2
3
4
hexo clean
rm -rf node_modules/.cache
hexo g
hexo s

图片懒加载插件

1
npm install hexo-lazyload-image --save

_config.yml 配置：

1
2
3
lazyload:
  enable: true
  loadingImg: /img/loading.gif

需要在/source/img目录下放置好loading.gif文件

字数统计插件

1
npm install hexo-wordcount --save or yarn add hexo-wordcount

修改侧边栏

_config.butterfly.yml 配置：

1
2
3
4
5
6
aside:
  enable: true
  hide: false
  button: true
  mobile: true # 手机上是否显示
  position: left # 侧边栏左右配置

代码块样式

_config.butterfly.yml配置：

1
2
3
4
5
6
highlight_theme: mac  #  darker / pale night / light / ocean / mac / mac light / false 代码主题
highlight_copy: true # 复制按钮
highlight_lang: false # 是否显示代码语言
highlight_shrink: false # true: 代码块默认不展开 / false: 代码块默认展开 | none: 展开并隐藏折叠按钮
highlight_height_limit: false # unit: px
code_word_wrap: true #代码自动换行，关闭滚动条

副标题循环打字效果

_config.butterfly.yml配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# The subtitle on homepage
subtitle:
  # 是否开启：true：开启，false：不开启
  enable: true
  # 打字效果
  effect: true
  # 定制 typed.js
  # https://github.com/mattboldt/typed.js/#customization
  typed_option:
  # source 调用第三方服务
  # source: false 关闭调用
  # source: 1  调用一言网的一句话（简体） https://hitokoto.cn/
  # source: 2  调用一句网（简体） https://yijuzhan.com/
  # source: 3  调用今日诗词（简体） https://www.jinrishici.com/
  # subtitle 会先显示 source , 再显示 sub 的内容
  source: false
  # 如果关闭打字效果，subtitle 只会显示 sub 的第一行文字
  sub:
    - 你在抱怨什么呢
    - 为明天到来的事，说人生像是没有意义
    - 没有选择会是唯一的路
    - 这不是你自己的问题，人终归要好好去生活

版权样式

1
2
3
4
5
6
# 复制设置
copy:
  enable: true # 是否开启网站复制权限
  copyright: # 复制的内容后面加上版权信息
    enable: false # 是否开启复制版权信息添加
    limit_count: 50 # 字数限制，当复制文字大于这个字数限制时
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 页脚设置
footer:
  # 页脚导航（底部小菜单）
  nav:
    - title: 首页
      link: /
    - title: 关于
      link: /about/
  # 站点归属信息（年份 + 名称）如果你想自定义名字，一般是在 Hexo _config.yml 里的 <author: 你的名字>
  owner:
    enable: true
    since: 2025
  # Copyright of theme and framework
  copyright:
    enable: true
    version: false
  # 自定义文本，会显示在最下面一行  
  custom_text:

页脚背景变透明设置

在你的博客目录里找到（如果没有就新建）：

1
source/css/custom.css

然后加上：

1
2
3
4
5
6
7
8
#footer {
  background: transparent !important;
  box-shadow: none !important;
}

#footer::before {
  background: transparent !important;
}

打开 _config.butterfly.yml，找到：

1
2
3
inject:
  head:
  bottom:

如果你没有自定义 CSS 引入，可以加：

1
2
3
inject:
  head:
    - <link rel="stylesheet" href="/css/custom.css">

如果你用了背景图，是这种配置，那透明 footer 才会有“嵌入感”。否则你只会看到白底（看起来像没变化）

1
background: /img/bg.jpg

文章插入图片

  • 1
    ![](image.jpg "图片标题")
  • 1
    {% asset_img image.jpg 这是一张图片 %}
  • 1
    <img src="路径" alt="替代文本，图片无法加载时显示" style="zoom:50%;" width="200" height="200" title="图片标题，鼠标悬停在图片上时显示">

由于使用了post_asset_folder: true会给每个文章单独的资源文件夹

在hexo中，按理说应该是使用![](image.jpg)，但网页中却无法正常显示。此时应该使用这样的方式来引入图片：

1
{% asset_img image.jpg 这是一张图片 %}

插件hexo-renderer-marked解决了这个问题。

可以只用npm install hexo-renderer-marked --save命令直接安装，之后在_config.yaml中更改配置如下：

1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在文章中愉快的插入图片了。

推荐写：

1
2
![](image.jpg)
![](./image.jpg)

不要写：

1
2
![](/image.jpg)
![](/mypost/image.jpg)

图片点击放大

在_config.butterfly.fly修改以下内容

1
2
3
4
5
# Choose: fancybox / medium_zoom
# https://github.com/francoischalifour/medium-zoom
# https://fancyapps.com/fancybox/
# Leave it empty if you don't need lightbox
lightbox: fancybox

展示动态图片

链接形式的文件可用，本地文件似乎不可用（可能我用的不对吧~）

在 Hexo 博客根目录下执行以下命令：

1
npm install hexo-live-photo --save

在 Hexo 的主配置文件 _config.yml 中添加以下选项：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Live Photo插件配置
livephoto:
  enable: true
  autoplay: true          # 是否自动播放（当进入视口时）
  hover_to_play: true     # 是否启用悬停播放
  click_to_play: true    # 是否启用点击播放
  lazy_load: true         # 是否启用懒加载
  threshold: 0.8          # 触发自动播放的可见比例
  badge: true             # 是否显示Live标识
  badge_text: 'Live'      # 标识文字
  badge_position: 'bottom-left' # 标识位置: bottom-left, bottom-right, top-left, top-right
  loading_animation: true # 是否显示加载动画
  preload: 'auto'         # 视频预加载策略: auto, metadata, none
  keep_observing: false   # 是否持续观察元素
  hover_delay: 300        # 悬停延迟（毫秒）
  weixin_disable_autoplay: true # 是否禁用微信内置浏览器的自动播放

基本语法：

1
{% livephoto 图片路径 视频路径 %}

一行显示两张动图：

1
2
3
4
5
6
7
8
<div class="image-grid">
  <div class="image-column">
    {% livephoto 图片路径 视频路径 %}
  </div>
  <div class="image-column">
    {% livephoto 图片路径 视频路径 %}
  </div>
</div>

拓展用法：

1
{% livephoto 图片路径 视频路径 "图片描述" "可选标题" "可选宽度" "可选高度" %}

九宫格展示图片

在myblog/source/css/下的custom.css中添加如下样式

由于在版权样式中的页脚背景变透明设置中已经引用了custom.css，所以直接添加就行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* <div class="image-grid">这个容器生效 */
.image-grid {
  display: grid;							/* 使用grid布局，自动排列、分行、对齐 */
  grid-template-columns: repeat(3, 1fr);	/* 创建3列，三列平均分配宽度 */
  gap: 10px;								/* 图片之间间隔 10px */
  margin: 10px 0;							/* 图片上下留白，左右为0 */
}

/* 对 image-grid 内部所有图片生效 */
.image-grid img {
  width: 100%;					/* 图片占满自己的网格单元 */
  aspect-ratio: 1 / 1;			/* 强制图片显示为正方形 */
  object-fit: cover;			/* 图片自动裁剪填满区域，不会拉伸变形 */
  border-radius: 12px;			/* 圆角 */
  display: block;				/* 默认的inline参数会有底部空隙和对齐问题 */
  transition: all 0.3s ease;	/* 给动画增加过渡效果 */
}

/* 鼠标放上去时 */
.image-grid img:hover {
  transform: scale(1.03);	/* 图片放大 1.03 倍 */
}

Markdown 这样写就可以

1
2
3
4
5
6
7
8
9
10
11
<div class="image-grid">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
  <img src="4.jpg">
  <img src="5.jpg">
  <img src="6.jpg">
  <img src="7.jpg">
  <img src="8.jpg">
  <img src="9.jpg">
</div>

部署到cloudflare

GitHub中创建私有仓库并推送

  • 装了butterfly主题的需要新增.gitmodules文件，内容如下

    1
    2
    3
    [submodule "themes/butterfly"]
        path = themes/butterfly
        url = https://github.com/jerryc127/hexo-theme-butterfly.git

  • 本地安装git并推送到GitHub

    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
    # 安装git
    sudo apt update
    sudo apt install git

    # Git 会将每次提交与一个作者身份关联，因此需要先设置全局的用户名和邮箱
    git config --global user.name "你的GitHub用户名"
    git config --global user.email "你的GitHub注册邮箱"

    # 确认配置是否成功
    git config --global --list

    # 检查是否已有 SSH 密钥
    ls -al ~/.ssh

    # 生成新 SSH 密钥
    # 关于 ed25519：这是目前推荐的算法，安全性高且性能好。如果系统不支持，可使用 -t rsa -b 4096 生成 RSA 密钥
    ssh-keygen -t ed25519 -C "你的GitHub注册邮箱"

    # 启动 ssh-agent 并添加私钥
    eval "$(ssh-agent -s)"
    ssh-add ~/.ssh/id_ed25519

    # 复制公钥并添加到 GitHub
    # 执行命令后，复制输出的全部内容。然后登录 GitHub，按以下路径添加 SSH Key
    # 步骤：Settings -> SSH and GPG keys -> New SSH key
    cat ~/.ssh/id_ed25519.pub

    # 测试 SSH 连接
    ssh -T git@github.com
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    # 关联与推送本地代码
    cd /path/to/your/project
    git init
    git add .
    git commit -m "Initial commit"
    # 将本地仓库与一个远程仓库（GitHub）关联起来。其中 origin 是远程仓库的默认别名
    git remote add origin git@github.com:你的用户名/你的仓库名.git
    git branch -M main
    git push -u origin main
    # 之后在项目文件夹内进行常规的 git add、git commit 和 git push 操作即可

Cloudflare中部署页面

  • 在Workers 和 Pages页面中选择创建pages

  • 连接GitHub账户，选择上传好的仓库

  • 构建命令

    • npm run clean && npm run build

    • 或许还可以用 npx hexo clean && npx hexo g && npx hexo d

  • 输出目录

    • /public

  • 保存并部署

Cloudflare中设置自定义域

  • 新增自定义域，以下两个都需要
    • www.yourdomain.com
    • yourdomain.com
  • 在规则中自定义重定向规则
    • 表达式：(http.host eq "yourdomain.com")
    • 重定向url：https://www.yourdomain.com
    • 状态代码：301
  • 这样当访问裸域的时候会重定向