安装需要的软件
软件安装
我们需要安装nodejs https://nodejs.org/en/、git bash https://www.git-scm.com/download/win、npm、Hexo
其中我们只需要下载前两个就行了
最新版的Nodejs中包含了npm，所以我们不需要额外的安装了
下载完之后无脑点下一步就可以了,哈哈是不是很简单呢？
我们打开Git Bash输入下面命令来检测安装是否成功
node -v和npm -v如果没有问题的话，应该是这样字的。
我们启动cmd，输入以下两条命令，成功后之后通过npm全局安装的包都会存放到node_global文件夹(这个文件夹是我自己创建的,你也可以创建在不同位置)下，后续查找包较方便。
Codenpm config set prefix"D:\Program Files\nodejs\node_global"npm config set cache"D:\Program Files\nodejs\node_cache"
1
2
3
这里的路径要记住，接下来可能我们在配置环境变量的时候，还将会用到
检测没问题之后，我们安装最后一个东西hexo
打开Git Bash输入npm install -g hexo
但是如果你会发现Hexo无法使用,我们还需要配置环境变量
配置环境变量
这步，可能会比较的难，你需要跟着我做。
我的电脑右击属性->点高级系统配置->点环境变量->在最上边一栏双击Path->点击新建->然后输入你node_global的路径
开始建博客
准备工作做了这么多了，现在我们终于要开始搭建自己的博客了,进入一个你博客存放的位置,然后在命令行中输入hexo init,这是博客的初始化操作
现在初始化完毕了，我们在命令行中输入hexo s(s是start的意思),然后我们打开浏览器输入网址localhost:4000我们就可以看到自己的博客了，博客如下图所示:
美化博客
简单配置一下博客
博客的配置文件是你博客的根目录的_config.yml文件
然后我们打开文件,进行基本的配置
Code
Site
title:# 这里写博客的名字subtitle:''# 这里写博客的副标题description:''# 关于你博客的描述keywords:author:# 这里写博客的作者language: zh-CN# 博客语言英文entimezone:''简单配置完毕，接来下
1
2
3
4
5
6
7
8
我们学一下Hexo的基本命令
Hexo基本命令
命令 作用
Hexo init 初始化博客
Hexo s 运行博客
Hexo n title 创建一篇新的文章，文章标题是title
Hexo c 清理文件
Hexo g 生成静态文件
Hexo d 程部署博客(需要插件)
安装主题并简单配置
主题介绍:一个很漂亮的主题,主题官网点我出发
接下来执行git clone https://github.com/jerryc127/hexo-theme-butterfly themes/butterfly进行安装,这里我们先让他安装着，我们打开我们的配置文件找到这一行theme: landspace然后将landspace替换成我们的主题也就是butterfly
此时运行博客 是运行不了的，因为我们少了一个插件，我们通过命令npm install hexo-renderer-pug hexo-renderer-stylus来安装这个插件
最终完美运行.
为了以后升级方便，这里不推荐直接对主题的配置文件进行修改，而是复制配置文件进行修改。个人推荐把主題的配置文件_config.yml复制到 Hexo 工作目录下的source/_data/butterfly.yml，如果目录不存在那就创建一个。
配置主页的大图片
然后找到我们的主题配置文件(路径应该是 博客根目录/source/_data/butterfly.yml),然后找到default_top_img:这一行将链接替换成你刚才复制的链接即可.
说道这里我们顺便配置一下我们的头像，我们将我们的头像保存到这个目录中博客根目录/themes/butterfly/source/img/，在主题配置文件中找到这一行img: /img/avatar.png 将avatar.png改成你的图片的名字就可以啦.
配置主页的导航栏
我们可以看到我们的导航栏都是英文，我们可以自己手动修改。
我们打开我们的主题配置文档，路径在哪里我也就不用说了吧，在博客根目录/source/_data/butterfly.yml(最后一遍了)
配置文件开头就是我们的导航栏配置，默认配置如下
Yml
menu:
Home: / || fa fa-home
Archives: /archives/ || fa fa-archive
Tags: /tags/ || fa fa-tags
Categories: /categories/ || fa fa-folder-open
Link: /link/ || fa fa-link
About: /about/ || fa fa-heart
List||fa fa-list:
- Music || /music/ || fa fa-music
- Movie || /movies/ || fa fa-film
最终我修改完成后如下所示:
Yml
menu:
首页: / || fas fa-home
龟档: /archives/ || fas fa-archive
标签: /tags/ || fas fa-tags
分类: /categories/ || fas fa-folder-open
清单||fas fa-list:
- Music || /music/ || fas fa-music
- Movie || /movies/ || fas fa-video
友情链接: /link/ || fas fa-link
关于: /about/ || fas fa-heart
相信聪明的你，一看就懂了
主页名人名言
我们可以自动获取网络上的好句子，我们只需要将source: false换成下面你想选择的样式
source: 1 #调用博天API https://api.btstu.cn/
source: 2 #调用一言API https://hitokoto.cn/
source: 3 #调用一句话API http://yijuzhan.com/
source: 4 #调用今日詩詞API https://www.jinrishici.com/
这里要注意的是: 在显示的时候，会先实现网络获取的一句话，然后在获取本地设置的话
创建分类页，标签页，友情链接页
分类页
首先前往你的 Hexo 博客的根目录
输入hexo new page categories
打开source/categories/index.md这个文件
修改这个文件为：
Yml
title: 我的分类页
date: 2020-07-04 14:55
type: “categories”
标签页
首先前往你的 Hexo 博客的根目录
输入hexo new page tags
打开source/tags/index.md这个文件
修改这个文件为：
Yml
title: 我的标签页
date: 2020-07-04 14:55
type: “tags”
友情链接页
首先前往你的 Hexo 博客的根目录
输入hexo new page link
打开source/link/index.md这个文件
修改这个文件为：
Yml
title: 我的小伙伴们
date: 2020-07-04 14:55
type: “link”
友情链接的添加
在Hexo博客目录中的source/_data，创建文件link.yml
Yml
class_name: 萍水相逢的人
class_desc: 随缘遇到的人
link_list:
name:
link: https://dreamer-liuyang.github.io/
avatar: https://dreamer-liuyang.github.io/img/avatar.png
descr: 一个靠兴趣制作视频的人
文章置顶、文章描述、文章分类
我们先看一下文章的开头应该大概是这样样子的.
Markdown
title:
date: 2020-07-04 13:55:59
description: 前言:
top: true
categories:
个人博客
我们可以通过在文章三个横线下面添加
categories: 个人博客 添加文章的分类
top: true 来使文章置顶
description: 前言:龟速教程之手把手搭建博客1 来添加文章的描述添加链接描述
这里你又会发现，我们的文章摘要还是没有变，我们需要修改配置文件中的3，将3改成2，最后重启一下Hexo就可以了
Yml
index_post_content:
method: 2
length: 500 # if you set method to 2 or 3, the length need to config
最终添加完之后的代码如下所示:
Markdown
title:
date: 2020-07-04 13:55:59
description: 前言:
top: true
categories:
个人博客
这里你会发现我们的文章没有置顶，这是因为我们没有相应的插件，我们需要执行下面两条命令
Shell
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
最终添加完之后的效果如图所示:
部署云端
现在我们的博客，感觉已经很漂亮了，接下来我们部署云端让所有人看到我们的博客吧!!!
最后！我们需要额外的一个工具来帮助我们推到仓库上，那就是！那就是！那就是 hexo-deployer-git。搞它！
执行下面的命令，进行安装插件
Code
npm install hexo-deployer-git --save
使用GitHub部署云端
我们在Github中建立一个仓库，其中仓库名字必须是xxx.github.ioxxx是你的Github名字
接下来，打开我们的博客配置文件,找到下面的内容
Yml
deploy:
type: git
repo: <你的仓库地址> # https://github.com/TJ-XiaJiaHao/TJ-XiaJiaHao.github.io
branch: master
然后写上你的仓库的地址
执行下面的命令，进行远程部署到我们的Github的仓库
Code
清理垃圾
hexo clean
推送到远端
hexo d
浏览器访问：https://xxxxx.github.io/ 即可看到效果。(把xxxx替换成的Github名字就可以了)例如我的是https://dreamer-liuyang.github.io/
不要着急，可能会有1-2分钟的延迟
使用码云部署云端
我们在Github中建立一个仓库，其中仓库名字必须和你码云的名字一样,过程
接下来，打开我们的博客配置文件,找到下面的内容
Yml
deploy:
type: git
repo: <你的仓库地址> # https://github.com/TJ-XiaJiaHao/TJ-XiaJiaHao.github.io
branch: master
如果你想Github和码云都进行部署,你可以仿照我们配置文件进行书写
Yml
deploy:
type: git
repo:
‘github’ : [email protected]:Dreamer-liuyang/Dreamer-liuyang.github.io.git
‘gitee’ : https://gitee.com/liu__yang/liu__yang.git
branch: master
执行下面的命令，进行远程部署到我们码云仓库
Code
清理垃圾
hexo clean
推送到远端
hexo d
部署之后我们还需要在码云仓库中，开启一下这个服务
最终终于大工告成了,本文也就到此结束了