hexo + Butterfly搭建博客

xiaolin0333

已于 2025-01-27 15:27:57 修改

阅读量1.2k

点赞数 28

分类专栏： # 博客框架文章标签： hexo butterfly

于 2025-01-25 19:21:54 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57882997/article/details/145342543

版权

博客框架专栏收录该内容

2 篇文章

订阅专栏

Hexo‌是一个基于Node.js的静态网站生成器，主要用于快速搭建博客和个人网站。它使用Markdown语法编写文章，能够迅速生成静态页面并部署到服务器上。

配置node

使用nvm安装node(v20.9.0)后配置镜像

安装并使用node：

nvm install 20.9.0
nvm use 20.9.0

查看当前node版本：

node -v

配置镜像：

npm config set registry https://registry.npmmirror.com

可以通过以下命令查看镜像是否配置成功：

npm config get registry

配置node

下载express：

npm install express -g

安装hexo本地环境：

npm install -g hexo

配置git

生成ssh：

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

在这里插入图片描述

所有要输入的地方都按回车，使用默认值

把密钥添加到github账户中：
在这里插入图片描述
测试ssh是否绑定成功：

ssh -T git@github.com

输入ssh -T git@github.com报错：
在这里插入图片描述

说明无法通过22端口与github进行ssh连接，将ssh连接端口修改为443后测试：
ssh -T -p 443 git@ssh.github.com
说明443端口可以访问，但是github不提供shell权限。
在.ssh文件夹下新建config文件（没有后缀）

config文件：
Host github.com
Hostname ssh.github.com
Port 443
重新输入sssh -T git@github.com测试：

本地创建Blog

创建Blog文件夹，初始化hexo

hexo init

在这里插入图片描述
成功后显示：

_config.yml：站点配置文件
node_modules：存储hexo插件的文件

生成本地的hexo页面：

hexo s

在这里插入图片描述
在浏览器输入http://localhost:4000即可访问

上传Blog到GitHub

新建仓库：

仓库格式：用户名.github.io
一定要是用户名！！不然后边会报404
这个仓库名将作为github博客的访问地址

修改_config.yml文件：

deploy:
  type: git
  repository: https://github.com/xiaolin0333/xiaolin0333.github.io.git
  branch: main

安装hexo-deployer-git自动部署发布工具：

npm install hexo-deployer-git --save

生成页面：

hexo g

在这里插入图片描述
5. 本地文件上传到Github网页：

hexo d

上传成功：
在这里插入图片描述

Butterfly主题

更改主题后，可以使用hexo clean & hexo g & hexo s在本地测试
需要传到github上，可以使用hexo clean & hexo g & hexo d传到GitHub上

下载主题

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

安装pug和stylus渲染器

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

修改Blog根目录下的_config.yml开启butterfly主题

theme: butterfly

在根目录新建_config.butterfly.yml，复制butterfly目录下的_config.yml文件到该文件中。

和博客网址关联度较高的设置在Blog根目录下的_config.yml文件中；
和主题样式关联度较高的设置在Blog根目录下的_config.butterfly.ym文件中。

发布博客

安装插件：

npm i hexo-deployer-git

输入命令：

hexo new post "新建博客的文章名"

设置博客个人资料

在_config.yml中设置：

# Site
title: xiaolin0333 	#标题
subtitle: '欢迎来到小林的博客'	#副标题
description: 		#个性签名
keywords:
author: 小林	#作者
language: zh-CN	#语言
timezone: Asia/Shanghai    #中国的时区

设置导航菜单

在_config.butterfly.yml中设置：

menu:
  # Home: / || fas fa-home
  # List||fas fa-list:
  #   Music: /music/ || fas fa-music
  #   Movie: /movies/ || fas fa-video
  主页: / || fas fa-home
  标签: /tags/ || fa fa-tags
  分类: /categories/ || fa fa-archive
  归档: /archives/ || fa fa-folder-open
  关于: /about/ || fas fa-heart 
  留言板: /comment/ || fa fa-paper-plane