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

一、环境准备

2. 将我们的博客部署到windows 或 Linux 均可，所需要的基础环境如下（保证所有的-v均可正常输出即可）：

   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那里出错，可以用如下进行安装

      npm cache clean --force
      npm install -g cnpm --registry=https://registry.npm.taobao.org --strict-ssl=false
      或者使用如下
   npm install --registr=https://registry.npmmirror.com

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

4. 我们可以给npm配置成全局的taobao地址

   然后再去下载cnpm

   npm config set registry https://registry.npm.taobao.org

二、本地搭建

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

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.登录自己的 Github。
2.新建一个仓库：
注意仓库的名称：一定是你的昵称.github.io
例如我的 Github 昵称是 qinghan586，那么仓库名称输入：qinghan586.github.io

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

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  # 出现Hi用户名即可

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

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

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

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

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

deploy:
  type: git
  repo: git@github.com:Lusensec/Lusensec.github.io.git
  branch: master # 看自己的博客是放在main还是master分支

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

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

删除静态文章：hexo clear

清除缓存：hexo g

部署到远端：hexo d

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

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

如果失败，请增加如下：

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文件即可实现双部署：

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

四、安装hexo的butterfly主题

1. 安装butterfly主题

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

2. 修改_config.yml

   theme: butterfly

3. 安装插件

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

4. 设置 _config.butterfly.yml

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

5. 安装 pug 和 stylus 的渲染器

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

五、butterfly主题其他美化

1、其他美化修改

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

2、导航菜单

在_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、安装一个插件（复制不行就手打）
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、文章头部设置

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、博客内部文章跳转

格式：
{% post_link 文章文件名（不要后缀） 文章标题（可选） %}

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

6、图片懒加载

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

lazyload:
  enable: true
  loadingImg: /img/loading.gif

7、评论功能-Gitalk配置

在_config.butterfly.yml 配置文件中配置如下：

comments:
  use: Gitalk # Valine,Disqus # 使用的评论，最多支持两个
  text: true # 是否显示评论人的名称
  lazyload: true # 开启后，只有轮动到评论区才加载评论资源，但评论数不再显示
  count: true # 是否在文章頂部顯示評論數。livere、Giscus 和 utterances 不支持评论数显示 
  card_post_count: false # 是否在首頁文章卡片顯示評論數

点击右上角头像【Settings】->【Developer settings】->【OAuth Apps】->【New OAuth App】进行新建OAuth app

获得Client ID 和 Client secrets

配置Gitalk

必填的有clientID/clientSecret/repo/owner/admin五个。

gitalk:
  # enable: true
  client_id: OxxxxxxxxxxxxN
  client_secret: 4xxxxxxxxxxxxxxxxxxxxxxxxxxxxd
  repo: lusensec.github.io
  owner: Lusensec
  admin: Lusensec

之后重新发布即可

8、hexo镶嵌B站视频

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

{% 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 %}

9、加载动画

preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: 1
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url:

10、设置鼠标样式

1、第一步：在 ``/themes/butterfly/source/css路径下创建一个mouse.css`文件，在文件中添加如下代码

/* 为整个页面设置鼠标样式 */
body {
    cursor: url('path/to/your/custom-cursor.cur'), auto;
}

/* 为链接设置鼠标样式 */
a {
    cursor: url('path/to/your/link-cursor.cur'), pointer;
}

/* 为图片设置鼠标样式 */
img {
    cursor: url('path/to/your/image-cursor.cur'), pointer;
}

/* 为按钮设置鼠标样式 */
button {
    cursor: url('path/to/your/button-cursor.cur'), pointer;
}

2、第二步：引入CSS文件，打开站点的主题配置文件_config.butterfly.yml，找到inject部分，在head处直接引入该文件：

inject:
    head:
    - <link rel="stylesheet" href="/css/mouse.css">

3、第三步：重新部署

五、Linux安装Typora

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

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

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

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

2. 添加Typora的APT仓库：

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

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

   sudo apt-get update

4. 安装Typora：

   sudo apt-get install typora

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

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

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

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

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

六、Hexo博客迁移

1、git备份迁移

参考链接：

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

1、创建Gitee或Github 私人仓库

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

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

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

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

3、迁移至其他地方

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

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

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

cnpm install

之后我们将重新部署

2、本地迁移

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

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

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

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

npm install -g hexo-cli
hexo init new_blog_folder
cd new_blog_folder
npm install

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

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

npm install

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

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

七、遇到的坑

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

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

2、GitHub连接不上

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

3、编译出错

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

八、参考链接

1、hexo博客搭建：

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

2、hexo主题butterfly 美化：

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等搜索引擎收录

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

4、评论功能

https://blog.csdn.net/qq_33384402/article/details/107200465
https://www.cnblogs.com/qisi007/p/13731562.html
https://yeyeziblog.eu.org/2023/11/25/Tech/hexo/Hexo-butterfly%E5%A2%9E%E5%8A%A0%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F/index.html

5、更多魔改教程

https://chenrui77.github.io/2022/01/25/%E5%8D%9A%E5%AE%A2%E6%90%AD%E5%BB%BA%E6%96%87%E6%A1%A3(%E5%9B%9B)/