【其他经验】Hexo-Butterfly主题个人博客搭建

一、环境准备

  1. 使用win11的渗透测试主机。因为这个主机内含许多博客必须的基础环境，且有kali linux这个双系统，每次使用完之后可以自动释放空间，而kali 有中文和.md编辑器的问题。

  2. 将我们的博客部署到win11的kali里面，所需要的基础环境如下（没有的直接在kali 中用命令安装即可）：

    1
    2
    3
    4
    5
    6
    7
    git -v
    node -v
    npm -v
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm -v
    cnpm install -g hexo-cli
    hexo -v

  3. 如果cnpm那里出错，可以用如下进行安装

    1
    2
    npm cache clean --force
    npm install -g cnpm --registry=https://registry.npm.taobao.org --strict-ssl=false

    cnpm介绍：跟npm是同一个东西，不过使用的是中国境内的源。以下使用npm 的场景均可用cnpm代替。

二、本地搭建

使用Hexo 来搭建博客（本地启动）

1
2
3
4
5
6
7
8
9
10
1、先找一个空白文件夹
2、初始化博客：sudo hexo init
3、启动博客：hexo s（hexo server -p 1314）
4、访问博客：http://localhost:4000
5、创建新的博客文章：hexo n "MyFirst-Blog"
6、新的博客文章在中查看：cd source/_posts/
7、发现是.md文章结构，可以用Typora进行编辑（我们在win11中安装typora编辑，同时还需要在kali中给到777权限）
8、文章写完之后清理下缓存：hexo clean
9、重新生成和启动：hexo g、hexo s
10、重新访问：http://localhost:4000

三、部署到远端（Github）或 其他

1、部署到 Github

1
2
3
4
1.登录自己的 Github。
2.新建一个仓库：
注意仓库的名称：一定是你的昵称.github.io
例如我的 Github 昵称是 qinghan586，那么仓库名称输入：qinghan586.github.io

Untitled

Untitled2

现在是个空仓库，地址是这个，先放着。

1
2
3
4
5
3.然后用ssh连接github
	1、先在本地kali生成ssh密钥：ssh-keygen -t rsa -C "你的邮箱"
	2、之后找到.ssh文件夹下的id_rsa.pub文件
	3、复制里面的内容到github主页的ssh密钥设置那里。随意名字加id_rsa.pub 内容
	4、测试连接：ssh -T git@github.com

继续在 blog 目录下，输入命令行操作：

装 Git 部署的插件：cnpm install --save hexo-deployer-git

Untitled3

里面的红色警告可以忽略不管。

去 blog根目录下，修改_config.yml即可。注意：blog文件夹下的其它文件下也有_config.yml文件，别改错了文件。

文件的最底部修改成这样：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:Lusensec/Lusensec.github.io.git
  branch: master

注意：deploy: type: repository: branch: 后面都有一个英文的空格。

用 nopad++修改后一定要保存！

删除静态文章：hexo c

清除缓存：hexo g

部署到远端：hexo d

往远端推成功后，刷新 Github 仓库，发现多了很多东西，这些就是我的博客内容：

访问Lusensec.github.io就可以直接打开，并看到博客部署到 Github 上去了。

如果失败，请增加如下：

1
2
git config --global user.email "设置的邮箱"
git config --global user.name "你的GitHub名称"

2、GitHub 和 Gitee 双部署

根据佬的文章：https://blog.csdn.net/guixinchn/article/details/107787660

在部署Github之后再进行Gitee 部署，之后修改_config.yml文件即可实现双部署：

image-20240219160916193

但是对于Gitee 来说：我们上传之后需要在仓库页面的“服务” > Gitee Pages > 勾选“强制使用HTTPS” > 点击“启动” 进行手动更新。手动更新完成之后再访问网页才会更新。

四、安装hexo的butterfly主题

  1. 安装butterfly主题

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

  2. 修改_config.yml

    1
    theme: butterfly

  3. 安装插件

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

  4. 设置 _config.butterfly.yml

    1
    2
    3
    将 themes/butterfly/_config.yml 重命名为_config.butterfly.yml 文件
    再将其复制到 博客 目录下
    并删除 _config.landscape.yml 文件

五、butterfly主题其他美化

1、其他美化修改

1
2
3
4
1、主题语言：默认是en
	支持default(en)、zh-CN(简体中文)、zh-TW(繁体中文)
2、网站资料：
	如标题、副标题、邮箱等个人资料在根目录的 _config.yml

Untitled4

2、导航菜单

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
在_config.butterfly.yml 文件中，最开始的 Menu 目录的位置，将menu下的注释打开，缩进为两格。
	格式：名字： 路径 || 图标
	并修改成自己对应的东西。
	如下所示：标签：/tags/ || fas fa-tags

标签页：
	前往你的 Hexo 博客的根目錄
	輸入 hexo new page tags
	你會找到 source/tags/index.md 這個文件
	修改這個文件：
	記得添加 type: "tags"

分类页：
	前往你的 Hexo 博客的根目錄
	輸入 hexo new page categories
	你會找到 source/categories/index.md 這個文件
	修改這個文件：
	記得添加 type: "categories"

友情链接：
	前往你的 Hexo 博客的根目錄
	輸入 hexo new page link
	你會找到 source/link/index.md 這個文件
	修改這個文件：
	記得添加 type: "link"

...
https://butterfly.js.org/posts/dc584b87

3、文章插入本地图片

1
2
3
4
5
6
7
8
9
10
1、安装一个插件（复制不行就手打）
npm install hexo-renderer-marked
2、修改_config.yml文件：
post_asset_folder: true
3、之后hexo new的时候，就会自动创建一个文件夹，里面放图片的
4、完成后即可在md文件中引用，格式如下：
![标题](图片文件名)
![123](123.jpg)

后续设置：https://zhuanlan.zhihu.com/p/265077468

4、文章头部设置

1
2
3
4
5
6
7
title: Hexo 个人博客搭建
date: 2024-01-07 20:11:08
tags: 1.0 #标签
categories: 基础知识 #分类
description: hexo个人博客加butterfly主题搭建 #描述
top_img: /img/010.jpg #顶部背景图
cover: /img/1.jpg #文章封面

5、博客内部文章跳转

1
2
3
4
5
6
格式：
{% post_link 文章文件名（不要后缀） 文章标题（可选） %}

#如跳转至文章文件名为Hello-World.md：
{% post_link Hello-World %}
{% post_link Hello-World 你好世界 %}

6、图片懒加载

在_config.yml中添加如下，需要保证loading.gif 文件存在

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

image-20240217120654924

7、评论功能（未实现）

需提前到leanclound 官网 注册登录创建一个新的应用，进入应用，在左下角设置中找到appid、appkey

修改_config.brea.yml配置文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
valine:
  enable: true
  appId: 你的LeanCloud应用ID
  appKey: 你的LeanCloud应用Key
  avatar: "mm"  # 头像风格
  serverURLs: 'https://your-valine-server.leancloudapp.com' #如果你有自己的 Valine 服务器
  bg: "#f7f7f7"  # 设置评论框背景颜色为浅灰色
  visitor: false #访问者的IP、时间等信息
  option:
    notify: false  # 邮件通知
    verify: false  # 验证码
    placeholder: "说点什么吧..."  # 评论框的占位符
    guest_info: ["昵称", "邮箱", "网站"]  # 允许匿名评论的字段
    recoredIP: true #记录评论者的IP地址

并安装valine：

1
npm install valine -g

头像风格有：

1
2
3
4
5
6
"mm": 神秘人（Mystery Man）
"identicon": 身份图标
"wavatar": 基于邮箱的卡通头像
"monsterid": 怪物头像
"retro": 复古像素风格
"hide": 隐藏头像

8、hexo镶嵌B站视频

将下面的src 的内容替换成B站视频的分享下面的【镶嵌代码】的链接（而不是视频的分享链接）

1
2
3
4
{% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;">
<iframe src="//player.bilibili.com/player.html?aid=90978812&cid=155358422&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; Left: 0; top: 0;" ></iframe></div>
{% endraw %}

五、Linux安装Typora

官方文档：在Linux上安装Typora | typora中文网

Typora 是一款流行的Markdown编辑器，支持多种操作系统，包括Linux。根据搜索结果[^12^]，Typora 可以在 Kali Linux 上安装和运行。安装Typora的步骤如下：

  1. 导入Typora的官方GPG密钥：

    1
    wget -qO - https://typora.io/linux/public-key.asc | sudo apt-key add -

  2. 添加Typora的APT仓库：

    1
    echo -e "\ndeb https://typora.io/linux ./" | sudo tee -a /etc/apt/sources.list

  3. 更新本地APT仓库索引：

    1
    sudo apt-get update

  4. 安装Typora：

    1
    sudo apt-get install typora

如果在安装过程中遇到问题，可以参考官方文档或社区提供的解决方案。例如，如果遇到SUID sandbox helper binary配置问题，可以尝试设置正确的权限：

1
chmod 4755 /usr/share/typora/chrome-sandbox

此外，如果遇到NSS版本过时的问题，可以确保安装了最新的NSS库：

1
sudo apt-get update && sudo apt-get install libnss3

这些步骤和解决方案应该可以帮助你在Kali Linux上成功安装并运行Typora。

六、Hexo博客迁移

1、git备份迁移

参考链接：

1
2
https://www.bilibili.com/video/BV13g41147yV/
https://wokron.github.io/posts/hexo-blog-migration/

1、创建Gitee或Github 私人仓库

image-20240611221405736

2、链接私人仓库。严格按照这里来

image-20240611221447804

在博客目录下执行（最好在git的bash 下执行）

1
2
3
4
5
6
7
8
9
10
git config --global user.name "xxx"
git config --global user.email "xxx@xxx"

git init 
git add .
git commit -m "first commit"
git remote add origin https://gitee.com/lusensec/hexo_backup.git
git push -u origin "master"

//如果hexo有主题，导致出错，把themes文件夹先移动走，等迁移成功后再覆盖themes

这样，所有的博客内容都将上传到仓库

image-20240612134929139

3、迁移至其他地方

在要迁移的空白文件夹克隆该博客备份仓库

1
git clone git@gitee.com:lusensec/hexo_backup.git

image-20240612135223145

之后使用npm 重新加载配置项

1
cnpm install

之后我们将重新部署

image-20240612135505611

2、本地迁移

这里直接用一种粗暴的方法，对hexo博客文件夹和文件备份到本地或硬盘，需要备份的文件夹和文件有：

1
2
3
4
5
source 文件夹：包含所有文章的Markdown文件。
themes 文件夹：如果你有自定义的主题或修改过的主题。
_config.yml 和其他配置文件：包含博客的配置信息。（_config.butterfly.yml、package.json）
node_modules 文件夹：包含所有依赖的Node.js模块。
public 文件夹：包含生成的静态文件，如果你希望保留旧的构建结果。

我们直接将上述文件夹和文件进行压缩备份，或者直接复制到一个外部存储设备，如U盘、移动硬盘或云存储。

之后在新的设备路径安装环境

1
2
3
4
npm install -g hexo-cli
hexo init new_blog_folder
cd new_blog_folder
npm install

之后将备份的资源复制到新电脑上的Hexo项目文件夹中，替换掉新创建的项目的对应文件夹和文件。

这将根据package.json 文件安装所有必要的依赖。

1
npm install

检查并更新_config.yml和其他配置文件，确保它们适用于新环境。

之后重新进行本地和远端部署。

七、遇到的坑

1、什么什么 is e’mpty 以及 master 错误

image-20240218124007996

解决办法：将博客目录下的.deploy_git文件夹删除，或者以防万一先把该文件夹移动到非博客目录下，之后重新执行上传操作即可。这将重新编译，耗时较长

image-20240218125607789

2、GitHub连接不上

1
解决办法参考链接：https://zhuanlan.zhihu.com/p/521340971

3、编译出错

image-20240517214405161

这里推测是因为存在[]或者空格的原因，将[]换成【】即可。在头部不能随便出现[]

八、参考链接

1、hexo博客搭建：

1
2
https://zhuanlan.zhihu.com/p/305812430
https://www.fomal.cc/posts/e593433d.html

2、hexo主题butterfly 美化：

1
2
3
https://blog.csdn.net/mjh1667002013/article/details/129290903
https://butterfly.js.org/posts/4aa8abbe/
hexo-Butterfly美化日记：https://blog.guole.fun/posts/butterfly-custom/index.html

3、Hexo中Buttefly 主题被百度，Bing等搜索引擎收录

1
2
http://mtw.so/6adHnx
https://moonshuo.cn/posts/6356.html