视频教程（推荐）

https://www.bilibili.com/video/BV1YK411H7VG/

title: 龟速教程之手把手搭建博客1
date: 2020-07-03 13:55:59
top: 2
categories:

个人博客
description: 前言:龟速教程之手把手搭建博客1
cover: https://s1.ax1x.com/2020/07/05/US3MkD.jpg

安装需要的软件

软件安装

我们需要安装nodejs、git bash、npm、Hexo
其中我们只需要下载前两个就行了

Nodejs下载地址:{% btn ‘https://nodejs.org/en/’,‘点我出发’,far fa-hand-point-right %}

Git Bash下载地址:{% btn ‘https://www.git-scm.com/download/win’,‘点我出发’,far fa-hand-point-right %}

最新版的Nodejs中包含了npm，所以我们不需要额外的安装了

下载完之后无脑点下一步就可以了,哈哈是不是很简单呢？

我们打开Git Bash输入下面命令来检测安装是否成功

node -v和npm -v如果没有问题的话，应该是这样字的。

我们启动cmd，输入以下两条命令，成功后之后通过npm全局安装的包都会存放到node_global文件夹(这个文件夹是我自己创建的,你也可以创建在不同位置)下，后续查找包较方便。

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"

{% note warning %}
这里的路径要记住，接下来可能我们在配置环境变量的时候，还将会用到
{% endnote %}

检测没问题之后，我们安装最后一个东西hexo
打开Git Bash输入npm install -g hexo
安装完之后的显示信息如下所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F85BKReq-1594129055174)(https://s1.ax1x.com/2020/07/04/NvE7vj.png)]

但是如果你会发现Hexo无法使用,我们还需要配置环境变量

配置环境变量

这步，可能会比较的难，你需要跟着我做。
{% note default %}
我的电脑右击属性->点高级系统配置->点环境变量->在最上边一栏双击Path->点击新建->然后输入你node_global的路径
{% endnote %}
步骤如图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kupX4yzG-1594129055204)(https://s1.ax1x.com/2020/07/04/NvVFq1.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jC0VxCBX-1594129055210)(https://s1.ax1x.com/2020/07/04/NvVePO.png)]

开始秒建博客

准备工作做了这么多了，现在我们终于要开始搭建自己的博客了,进入一个你博客存放的位置,然后在命令行中输入hexo init,这是博客的初始化操作,紧接着我们休息片刻喝口水.
现在初始化完毕了，我们首先看看我们的博客长什么样子吧!我们在命令行中输入hexo s(s是start的意思),然后我们打开浏览器输入网址localhost:4000我们就可以看到自己的博客了，博客如下图所示:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MSLrxVv6-1594129055213)(https://s1.ax1x.com/2020/07/04/NvZ7Bn.md.png)]

这时候大家可能会说，这是什么垃圾博客，白给我都不要，走了走了，算了算了。
大哥们，咱们先简单配置一下并说说Hexo的基本用法，然后就美化一下，相信我，最后不会很垃圾的.

简单配置一下博客

博客的配置文件是你博客的根目录的_config.yml文件
然后我们打开文件,进行基本的配置

# Site
title: 龟速教程         # 这里写博客的名字
subtitle: '一个靠兴趣制作视频教程的人'    # 这里写博客的副标题
description: ''         # 关于你博客的描述
keywords:
author: 刘洋            # 这里写博客的作者
language: zh-CN         # 博客语言
timezone: ''

简单配置完毕，接来下我们学一下Hexo的基本命令

Hexo基本命令

命令	作用
Hexo init	初始化博客
Hexo s	运行博客
Hexo n title	创建一篇新的文章，文章标题是title
Hexo c	清理文件
Hexo g	生成静态文件
Hexo d	程部署博客(需要插件)

安装主题并简单配置

主题介绍:一个很漂亮的主题,{% btn ‘https://github.com/jerryc127/hexo-theme-butterfly’,‘主题官网点我出发’,far fa-hand-point-right %}

如果想看其他主题请访问 {% btn ‘https://hexo.io/themes’,‘点我出发’,far fa-hand-point-right %}
{% btn ‘https://theme-next.js.org/’,‘Next主题直通车’,far fa-hand-point-right %}
{% btn ‘https://www.yunyoujun.cn/’,‘Yun主题直通车’,far fa-hand-point-right %}

主题的预览图:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSFi2xtp-1594129055216)(https://s1.ax1x.com/2020/07/05/UpiQX9.png)]

接下来执行git clone https://github.com/jerryc127/hexo-theme-butterfly themes/butterfly进行安装,这里我们先让他安装着，我们打开我们的配置文件找到这一行theme: landspace然后将landspace替换成我们的主题也就是butterfly

此时运行博客是运行不了的，因为我们少了一个插件，我们通过命令npm install hexo-renderer-pug hexo-renderer-stylus来安装这个插件
最终完美运行.

{% note warning %}
为了以后升级方便，这里不推荐直接对主题的配置文件进行修改，而是复制配置文件进行修改。个人推荐把主題的配置文件_config.yml复制到 Hexo 工作目录下的source/_data/butterfly.yml，如果目录不存在那就创建一个。
{% endnote %}

配置主页的大图片

安装完博客后我们看到的就是这个大图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YLcLZ8Tl-1594129055217)(https://s1.ax1x.com/2020/07/04/NxnoLQ.png)]

你可能会说不好看，接下来我们进行更换这个图片，首先我们先找到一个自己想更换的图片,接下来我们将他放到图床当中去，本人经常用{% btn ‘https://imgchr.com/’,‘路过图床’,far fa-hand-point-right %},然后将我们的图片上传上去，这里会显示一个连接，我们先复制这个链接。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i2WedX30-1594129055218)(https://s1.ax1x.com/2020/07/04/Nxuop6.png)]
然后找到我们的主题配置文件(路径应该是博客根目录/source/_data/butterfly.yml),然后找到default_top_img:这一行将链接替换成你刚才复制的链接即可.

说道这里我们顺便配置一下我们的头像，我们将我们的头像保存到这个目录中博客根目录/themes/butterfly/source/img/，在主题配置文件中找到这一行img: /img/avatar.png 将avatar.png改成你的图片的名字就可以啦.

配置主页的导航栏

我们可以看到我们的导航栏都是英文，我们可以自己手动修改。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lNMvX5eW-1594129055220)(https://s1.ax1x.com/2020/07/04/NxQY6K.png)]
我们打开我们的主题配置文档，路径在哪里我也就不用说了吧，在博客根目录/source/_data/butterfly.yml(最后一遍了)
配置文件开头就是我们的导航栏配置，默认配置如下

menu:Home: / || fa fa-homeArchives: /archives/ || fa fa-archiveTags: /tags/ || fa fa-tagsCategories: /categories/ || fa fa-folder-openLink: /link/ || fa fa-linkAbout: /about/ || fa fa-heartList||fa fa-list:- Music || /music/ || fa fa-music- Movie || /movies/ || fa fa-film

最终我修改完成后如下所示:

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

相信聪明的你，一看就懂了

主页名人名言

我们在主题配置文件中搜索 Never put off till tomorrow what you can do today然后我们将这句话改成一个兴趣使然想做视频的菜鸟最终实现了替换的效果，并且我们还可以去掉上边的一句话

我们还可以自动获取网络上的好句子，我们只需要将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/

{% note warning %}
这里要注意的是: 在显示的时候，会先实现网络获取的一句话，然后在获取本地设置的话
{% endnote %}

创建分类页，标签页，友情链接页

分类页

首先前往你的 Hexo 博客的根目录
输入hexo new page categories
打开source/categories/index.md这个文件
修改这个文件为：

---
title: 我的分类页
date: 2020-07-04 14:55
type: "categories"
---

标签页

首先前往你的 Hexo 博客的根目录
输入hexo new page tags
打开source/tags/index.md这个文件
修改这个文件为：

---
title: 我的标签页
date: 2020-07-04 14:55
type: "tags"
---

友情链接页

首先前往你的 Hexo 博客的根目录
输入hexo new page link
打开source/link/index.md这个文件
修改这个文件为：

---
title: 我的小伙伴们
date: 2020-07-04 14:55
type: "link"
---

友情链接的添加
在Hexo博客目录中的source/_data，创建文件link.yml

- class_name: 萍水相逢的人class_desc: 随缘遇到的人link_list:- name: 龟速教程link: https://jerryc.me/avatar: https://jerryc.me/image/avatar.pngdescr: 一个靠兴趣制作视频的人

文章置顶、文章描述、文章分类

我们先看一下文章的开头应该大概是这样样子的.

---
title: 龟速教程之手把手搭建博客1
date: 2020-07-04 13:55:59
description: 前言:龟速教程之手把手搭建博客1
top: true
categories:- 个人博客
---

我们可以通过在文章三个横线下面添加
categories: 个人博客 添加文章的分类
top: true 来使文章置顶
description: 前言:龟速教程之手把手搭建博客1 来添加文章的描述

这里你又会发现，我们的文章摘要还是没有变，我们需要修改配置文件中的3，将3改成2，最后重启一下Hexo就可以了

index_post_content:method: 2length: 500 # if you set method to 2 or 3, the length need to config

最终添加完之后的代码如下所示:

---
title: 龟速教程之手把手搭建博客1
date: 2020-07-04 13:55:59
description: 前言:龟速教程之手把手搭建博客1
top: true
categories:- 个人博客
---

这里你会发现我们的文章没有置顶，这是因为我们没有相应的插件，我们需要执行下面两条命令

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

最终添加完之后的效果如图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8vsSL1t-1594129055221)(https://s1.ax1x.com/2020/07/05/NzzWx1.png)]

部署云端

现在我们的博客，感觉已经很漂亮了，接下来我们部署云端让所有人看到我们的博客吧!!!

最后！我们需要额外的一个工具来帮助我们推到仓库上，那就是！那就是！那就是 hexo-deployer-git。搞它！

执行下面的命令，进行安装插件

npm install hexo-deployer-git --save

使用GitHub部署云端

我们在Github中建立一个仓库，其中仓库名字必须是xxx.github.ioxxx是你的Github名字,过程如图所示

接下来，打开我们的博客配置文件,找到下面的内容

deploy:type: gitrepo: <你的仓库地址> # https://github.com/TJ-XiaJiaHao/TJ-XiaJiaHao.github.iobranch: master

然后写上你的仓库的地址，例如这样

执行下面的命令，进行远程部署到我们的Github的仓库

# 清理垃圾
hexo clean
# 推送到远端
hexo d

浏览器访问：https://xxxxx.github.io/ 即可看到效果。(把xxxx替换成的Github名字就可以了)例如我的是https://dreamer-liuyang.github.io/
不要着急，可能会有1-2分钟的延迟

使用码云部署云端

我们在Github中建立一个仓库，其中仓库名字必须和你码云的名字一样,过程如图所示