获取更多信息，可以康康我的博客，所有文章会在博客上先发布随记 - 记录指间流逝的美好 (xiaoyustudent.github.io)
准备工作
在安装hexo之前，您需要安装nodejs和git，前者用于安装hexo和其他插件，后者用于部署
nodejs安装
以下安装都是基于windows系统，其他系统可以参考官方文档
点击 nodejs下载，下载好后双击打开，除了安装位置可能需要更改以外，其他设置可以根据自己情况进行勾选，默认一路next
因为我们只需要用到npm工具，所以在安装好后，我们可以尝试一下在cmd中是否能够正常使用npm工具
问题记录：本地运行会出现图片无法加载出来的问题。有两种方法：
第一种方法是在source文件夹下新建一个img文件夹，用来存放图片文件，使用绝对路径引入图片
第二种方法是安装插件，在项目根目录中运行cmd，执行下列代码
npm install hexo-renderer-marked
之后在_config.yml文件中更改配置如下
post_asset_folder: true #更改配置 marked: prependRoot: true #添加配置 postAsset: true #添加配置更改完成后直接引入图片名称即可
git安装
接下来是安装git，点击 git下载，下载好后双击打开，同样也是除了安装位置可能需要更改，其他设置默认可以一路next，同理，安装好后，我们可以在cmd中尝试git是否安装成功，nodejs和git在windows下安装后默认都是已经在系统环境中了，如果没有在系统环境中，可以自己添加
安装hexo
准备工作完成后我们就可以开始安装hexo了，这里我推荐全局安装，当然也可以自己新建文件夹局部安装，需要自己添加进环境变量中。打开cmd，运行下列代码
npm install -g hexo-cli
安装完成后，通过以下命令查看是否安装成功，成功会显示版本信息
hexo -v
创建博客文件
新建文件夹，在文件夹下运行cmd，并依次执行下列命令
blog可以是其他名字
hexo init blog
cd blog
npm install
执行完成后我们打开blog文件夹
其中，scaffolds是模板文件夹，创建新文章或者新页面时，Hexo会根据此文件夹建立文件；source是资源文件夹；themes是主题文件夹，Hexo会根据此文件夹生成静态页面
主题美化
我目前使用的主题是butterfly，放一张图给大家康康，具体信息可以查看 hexo butterfly官网
安装和基础配置
在项目根目录下运行cmd，并运行以下代码
npm i hexo-theme-butterfly
安装好了之后我们会在themes文件夹下看到butterfly文件夹，这个就是主题文件夹。接下来我们安装butterfly必须要的插件，同样在cmd中运行
npm install hexo-renderer-pug hexo-renderer-stylus --save
建议
在项目根目录新建文件_config.butterfly.yml，并且把主题目录的_config.yml内容复制到_config.butterfly.yml中，后面我们只需要在_config.butterfly.yml中配置主题相关的内容，Hexo会合并_config.butterfly.yml和_config.yml中的配置，如果存在同名配置，则优先使用_config.butterfly.yml中的配置
进阶配置
只列举了常用，并且我正在使用的配置，后续如果有其他配置更改，后续添加
打开_config.butterfly.yml文件
导航栏配置
menu:
首页: / || fas fa-home # 可以设置为中文
Archives: /archives/ # 可以取消或者更改图标
Tags: /tags/ || fas fa-tags
Categories: /categories/ || fas fa-folder-open
List||fas fa-list:
Music: /music/ || fas fa-music
Movie: /movies/ || fas fa-video
Link: /link/ || fas fa-link
About: /about/ || fas fa-heart
复制添加版权信息
copy:
enable: true #是否开启网站复制权限
copyright:
enable: true #是否开启复制版权信息添加
limit_count: 20 #字数限制，当复制文字大于这个数字，将在复制的内容后加上版权信息
代码相关配置
highlight_theme: darker # darker / pale night / light / ocean / mac / mac light / false 代码主题设置
highlight_copy: true # copy button 显示或者隐藏复制按钮
highlight_lang: true # show the code language
highlight_shrink: false # true: shrink the code blocks / false: expand the code blocks | none: expand code blocks and hide the button 是否折叠代码块，如果是true则默认开始就折叠
highlight_height_limit: false # unit: px
code_word_wrap: true
网站图标
# Favicon（设置网站图标）
favicon: /img/favicon.png
# Avatar (设置头像)
avatar:
img: /img/head.png
effect: false
首页图片展示
# The banner image of home page
index_img: /img/top_img.jpg
文章相关配置
post_meta:
page: # Home Page
date_type: both # created or updated or both 显示创建日期或者更新日期或者都显示
date_format: date # date/relative 设置日期显示是绝对日期还是相对日期。绝对日期：2023/1/1 相对日期：2天前
post:
date_type: both # created or updated or both 显示创建日期或者更新日期或者都显示
date_format: date # date/relative 设置日期显示是绝对日期还是相对日期。绝对日期：2023/1/1 相对日期：2天前
字数统计
wordcount:
enable: true
post_wordcount: true
min2read: true
total_wordcount: true
需要安装对应插件，cmd中运行下列代码
npm install hexo-wordcount --save
评论设置
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
use: Valine # Valine,Disqus
# 我使用的Valine框架，具体可以查看官方文档
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: true
count: true # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page
valine:
appId: # leancloud application app id
appKey: # leancloud application app key
avatar: hide # gravatar style https://valine.js.org/#/avatar
serverURLs: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
bg: # valine background
visitor: false
option:
底部相关设置
footer:
owner:
enable: true #是否启用
since: 2023 #开始年限
custom_text: 欢迎来到我的 <a href="https://butterfly.js.org/">随记</a>! # 自定义文字
copyright: false # Copyright of theme and framework #是否显示copyright相关内容
自定义颜色
theme_color:
enable: true
main: "#b6d5e1"
paginator: "#65799b"
button_hover: "#b6d5e1"
text_selection: "#65799b"
link_color: "#99a9bf"
meta_color: "#858585"
hr_color: "#A4D8FA"
code_foreground: "#F47466"
code_background: "rgba(27, 31, 35, .05)"
toc_color: "#65799b"
blockquote_padding_color: "#b6d5e1"
blockquote_background_color: "#b6d5e1"
scrollbar_color: "#b6d5e1"
meta_theme_color_light: "#e2eff1"
meta_theme_color_dark: "#0d0d0d"
大家可以直接拿去用，嘿嘿
网站信息
runtimeshow:
enable: true
publish_date: '2023/1/19' #开始日期
创建页面
常用的比如标签页，分类页，默认是没有的，需要我们自己去创建
进入cmd，运行下列代码
about可以是其他名字
hexo new page about
运行后会在项目的source文件夹中创建一个名为about的文件夹，其中有index.md文件，后面我们就在此文件中进行修改
标签页，分类页等需要获取对应数据的页面，需要在md文件顶部添加type
--- title: 归档 date: 2023-01-18 15:02:14 type: archives ---
创建文章
进入cmd，运行下列代码
text可以是其他名字
hexo new text
运行后会在项目的source/_posts文件夹中创建一个名为text.md的文件(如果开启了静态资源加载，则会创建一个同名文件夹)，后面我们就在此文件中进行修改
<!-- 以下是一些常用的文章配置 -->
---
title: hexo安装与部署
<!-- 标题 -->
copyright_author: 小昱同学
<!-- 作者 -->
copyright_author_href: /about/
<!-- 点击作者跳转页面 -->
copyright_info: 本文为原创文章，如需转载，请联系博主
tags: hexo
<!-- 标签 -->
categories: 博客
<!-- 分类 -->
top_img: top_img.jpg
<!-- 头图 -->
cover: top_img.jpg
<!-- 缩略图 -->
abbrlink: 17921
date: 2023-01-18 17:47:26
---
部署
在以上工作完成后我们就可以部署了，部署需要用到git，我们已经安装了，然后我们需要创建github或者gitee（还有其他的，常用的就这两个）,这里我用的是github
git准备工作
我们需要配置一下GitHub账户信息，用户名和邮箱为您github上的用户名和邮箱
git config --global user.name "用户名"
git config --global user.email "邮箱"
之后继续输入
ssh-keygen -t rsa -C "邮箱"
一路回车即可，之后在C:\Users\您当前登录windows的账号.ssh可以找到id_rsa.pub文件，打开文件，复制里面的内容
github准备工作
新建仓库，仓库名为用户名.github.io 点击仓库的settings，点击Deploy keys，然后点击Add deploy key，title设置为您的邮箱，Key为刚才复制的内容，之后点击Add key
文件设置和插件安装
回到Hexo，打开_config.yml文件，在最底部填写如下内容
deploy:
type: git
repo: https://github.com/您的用户名/您的用户名.github.io.git
brach: master
然后找到URL，改为以下内容
# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://您的用户名.github.io/
在项目根目录打开cmd，运行以下代码
npm install hexo-deployer-git --save
部署命令
在cmd中运行以下代码
hexo clean
hexo g
hexo d
然后在浏览器输入 http://你的Github用户名.github.io 即可访问您的博客
