安装环境

node.js和安装git bash，安装Hexo并启动后可本地访问。

1
2
https://nodejs.org/en/
https://git-scm.com/download/

在 git bash 中输入以下命令启用 Hexo镜像

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

在 git bash 中输入以下命令开始全局安装 Hexo

1
npm install -g hexo-cli

在 git bash 中输入

1
hexo init 自定义博客名

在 git bash 中输入hexo g ,编译静态文件到public文件夹，这是根目录会自动生成public文件夹

1
hexo g

在 git bash 中输入hexo s，启动本地预览，关闭gitbash后,就无法预览

1
hexo s

输入 http://localhost:4000 ，能正常访问，则启动成功

部署到github

在 git bash 中输入如下命令

1
2
git config --global user.name "你的GitHub用户名"
git config --global user.email "你注册github的邮箱"

生成密匙命令

1
ssh-keygen -t rsa -C "你注册github的邮箱"

在本地电脑中找到新生成的公匙，复制id_rsa.pub中的内容
找到github个人图像
设置-SSH and GPG keys-New SSH Key-粘贴公钥
验证是否成功
输入命令

1
ssh -T [email protected]

打开 _config.yml，找到文件最后一行的 deploy
替换以下代码

1
2
3
4
5
deploy:

  type: git

  repo: https://github.com/你的github用户名/你的github用户名.github.io.git,main

安装推送命令

1
npm install hexo-deployer-git --save

清理缓存，重新生成静态文件，推送到github的命令

1
hexo clean && hexo g && hexo de

推送成功后

访问网址：你的GitHub用户名.github.io

安装butterfly主题

1
https://butterfly.js.org/

根目录下git bash 输入命令

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

安装渲染器

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

修改 Hexo 根目錄下的 _config.yml，把主題改為 butterfly

1
theme: butterfly

清理缓存，重新生成静态文件，推送到github的命令，每次更新完内容执行此命令

1
hexo clean && hexo g && hexo de

访问网址预览效果：你的GitHub用户名.github.io

在vercel容器安装hexo，添加自定义域名

用github同名账号登录https://vercel.com/

菜单栏修改

在 _config.yml 下找到 menu ：去掉前面的#就可以显示菜单

1
2
3
4
5
6
7
8
9
10
menu:
   首页: / || fas fa-home
   归档: /archives/ || fas fa-archive
   标签: /tags/ || fas fa-tags
   分类: /categories/ || fas fa-folder-open
   #菜单||fas fa-list:
     #音乐: /music/ || fas fa-music
     #电影: /movies/ || fas fa-video
   友链: /link/ || fas fa-link
   #关于: /about/ || fas fa-heart

添加标签页

根目录输入 

1
hexo new page tags

找到 source/tags/index.md 这个文件，修改这个文件：

添加 type: “tags”

1
2
3
4
5
6
7
---
title: 标签
date: 2018-01-05 00:00:00
type: "tags"
orderby: random
order: 1
---

5.3添加子页面

1
hexo n  页面的名称

创建你的页面就行

首页顶部图片更换

1
2
# The banner image of home page
index_img: https://cdn.pixabay.com/photo/2023/10/23/03/03/fashion-8335213_1280.jpg

著名的无版权可商用的图片网站

1
https://pixabay.com/

hexo主题分享
1.连背景都是特效的博客

1
[preccrepad.github.io](preccrepad.github.io)

2.番茄博客，博文里面有很多小特效，比如会动的小标签啦，图片的加载动画啦

1
2
3
tomotoes.com/blog/

github.com/Tomotoes/he…

3.一个UI设计师的博客，界面干净清爽

1
esappear.github.io/clover/

4.二次元爱好者转码人的博客，内容丰富，有点耗性能

1
shoka.lostyu.me

5.yilia升级版，简洁的博客，可以按主题和标签分类

1
joeybling.github.io

6.简单的博客框架，分类明晰，速度快，功能较少

1
hufangyun.com

7.暖色梵高主题，配色舒适

1
www.nothinglin.ml

8.标签和UI特别可爱，图片选取很用心的一个博客

1
rawchen.com/

9.功能清晰，强大的主题matery，文章统计功能做得很细致

1
blinkfox.com/

10.hexo-theme-redefine
11.butterfly