个人博客搭建

通过Cloudflare安装Tunnel

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

安装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环境 18.19.0

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

安装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: white
subtitle: 'white的个人博客'
description: '欢迎来到我的个人博客,这里记录日常,分享技术...'
keywords:
author: white
language: zh-CN
timezone: ''

目录配置

打开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 # 头像会一直转圈

背景图和顶部脚步图设置

1
2
3
default_top_img: /img/background.webp
footer_img: rgb(196, 199, 206)
background: /img/background.webp

代码块格式设置

1
2
code_blocks:
  macStyle: true

文章封面

1
2
3
4
5
6
7
8
9
10
11
12
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>

安装搜索插件

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

页面顶部大图配置（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
---

部署到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账户，选择上传好的仓库

  • 构建命令

    - 

    1
    npm run clean && npm run build

    - 

    1
    2
    # 或许还可以用
    npx hexo c && npx hexo g && npx hexo d

  • 输出目录

    • /public

  • 保存并部署

Cloudflare中设置自定义域

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