搭建hexo主题Butterfly部署github+个人服务器

admin管理员组

文章数量:1649150

1.文章介绍

网址展示：chen&blog

此文章总结不易，参考各个文章总结，如有问题请留言…

2.环境要求

笔者环境：

win11 64位；

node.js：v14.15.3 64位；

git：2.29.2.windows.2 64位

编写代码使用Notepad++

2.1 node.js安装

下载

node-v14.15.3-x64.msi

安装

自主安装（修改安装路径，一路next）

验证安装是否成功

cmd 查看版本
C:\Users\hong>node -v
v14.15.3

C:\Users\hong>npm -v
6.14.9

设置全局目录

命令提示行打入：

npm config set prefix "E:\environment\nodejs\node_global"
npm config set cache "E:\environment\nodejs\node_cache"

2.2 git安装

下载

Git-2.33.1-64-bit.exe

安装

自主安装（修改安装路径，一路next）

验证安装是否成功

cmd 查看版本
C:\Users\hong>git --version
git version 2.33.1

设置

Github在下文需要时介绍，设置在部署Github再执行也不迟

桌面右键，选择Git Bash Here

1. 设置Github的名字和邮箱

   git config --global user.name "你的名字"
   git config --global user.email“你的邮箱"
   

2. 生成ssh

   ssh-keygen -t rsa -C "你的名字/你的邮箱"
   

   然后会出现以下内容

   Generating public/private rsa key pair.
   Enter file in which to save the key (/c/Users/Administrator/.ssh/id_rsa):
   /c/Users/Administrator/.ssh/id_rsa already exists.
   Overwrite (y/n)? y（输入y）
   Enter passphrase (empty for no passphrase):（回车）
   Enter same passphrase again:（回车）
   

   系统会自动在.ssh文件夹(.SSH在C:\Users\Windows用户名目录下)下生成两个文件，id_rsa和id_rsa.pub

3.Hexo

指令

Hexo指令

安装

# 选择存放博客文件的位置，鼠标右键，选择Git Bash Here
# 依次执行完成以下操作

# 1.hexo框架的全局安装
npm install -g hexo-cli

# 2.新建一个网站，[folder]改自定义博客文件夹名称
hexo init [folder]

# 3.进入博客文件夹
cd 上一步博客文件夹名称

# 4.安装博客所需要的依赖文件
npm install

运行完成，此时博客文件夹中多了许多文件， 此时 Hexo 框架的本地搭建已经完成了。

验证

生成静态文件并启动服务

hexo g &&  hexo s

运行成功最后一行出现

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

浏览器中打开 http://localhost:4000 或127.0.0.1:4000，看到网页，则运行成功

4.butterfly主题

4.1 安装

在hexo根目录执行

1. 下载

   git clone -b master https://gitee/immyw/hexo-theme-butterfly.git themes/butterfly
   

2. 应用主题

   修改hexo根目录下的_config.yml，修改主题

   theme: butterfly
   

3. 安装插件，pug 以及 stylus 的渲染器

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

4. 升级建议

   为减少升级主题带来的不便，采用以下方法

   hexo根目录下创建config.butterfly.yml，主题（磁盘:\博客跟目录\themes\butterfly）下的config.yml內容复制到刚刚创建的config.butterfly.yml

   注：

   1. 主题目录下的config.yml不可删
   2. 以后只需要配置config.butterfly.yml即可，配置主题下config.yml无效

4.2 配置

修改配置文件config.yml

4.2.1 语言修改

language: zh-CN

4.2.2 导航菜单

icon最后有说阿里矢量图标库

# 例如
menu:
  首页: /||iconfont icon-shouye
  留言板: /messageboard/||iconfont icon-liuyanban-05
  目录 || iconfont icon-BAI-wenzhang:
    分类: /categories/||iconfont icon-fenlei
    标签: /tags/||iconfont icon-biaoqian
    时间轴: /archives/||iconfont icon-timeAxis
  关于: /about/||iconfont icon-wo

4.2.3 搜索系统

安装

npm install hexo-gen

本文标签： 服务器主题HexoGitHubButterfly