一、环境准备

安装vscode：

下载地址：Download Visual Studio Code - Mac, Linux, Windows
vscode设置中文：
- 打开软件，按下快捷键：ctrl+shift+p
- 输入config language 选择安装中文包
- 重启软件 1、安装git

下载地址：Git - Downloading Package (git-scm.com)

安装：全部下一步即可

验证是否安装成功

打开一个文件夹，按下shift+鼠标右键，选择 Git Bash Here
输入命令：git version 如果正常显示版本，则代表成功

2、安装Node.js

下载地址：Node.js (nodejs.org)
添加环境变量：将 D:\Program Files\nodejs 添加到path环境变量里
命令行输入：node -v 查看是否出现版本号
命令行输入 npm -v 查看是否出现版本号

3、安装hexo

开始安装：

打开命令行，输入命令：npm install hexo -g

检测是否可以hexo是否可以适用：

输入命令：hexo version 若出现结果，就代表安装成功了

4、本地新建文件夹blog用来储存blog文件

这里我再e盘下创建blog文件夹
接着切换到该文件夹，并且打开命令行，这里可以直接再地址栏输入cmd即可瞬间再当前路径打开命令行

5、初始化博客

命令：hexo init painter_blog 这里的painter_blog就是我的博客名
注意事项：如果后续搞错了，完全可以删除painter_blog文件夹

6、切换到painter_blog目录，打开命令行，安装npm依赖

npm install

7、本地预览博客

hexo serve

二、上传博客到github

前提：需要github账号

创建github仓库：

登录后点击右上角的加号，Create a new repository
输入name：
- 易错点：这里的仓库名必须要 github用户名 + github.io 否则后面会报错
- lishang520.github.io
选择Public
最后提交

配置git信息

打开gitbash，配置github账户信息(是github的用户名和邮箱)
- git config –global user.name “lishang520”
- git config –global user.email “1183144070@qq.com“

适用vscode加载我们的博客文件夹：painter_blog

将该文件夹拖到vscode里

修改blog配置信息

在vscode左侧找到 config.yml
- 拖到最底部，修改delopy
- 易错点：冒号后面记得按下一个空格，否则容易出错

deploy:
type: 'git'
repo: 'https://github.com/lishang520/lishang520.github.io.git'
branch: main

在painter_blog目录下安装插件

命令行下输入
- npm install hexo-deployer-git –save

清楚缓存

hexo clean

生成文件

hexo g

上传文件到github仓库

hexo d
- 易错点：要观察我们的浏览器，它会弹出一个页面，让我们输入token，但是我们没有token，所以选择with open browser ，然后同意，接着会提示成功，然后就可以关闭该页面了，接着我们就可以看到命令行已经运行完毕

检查是否上传成功

打开我们的仓库页面，发现已经成功上传

三、修改配置文件

总共2个配置文件

config.landscape.yml
- 这是主题的配置文件
config.yml
- 这是hexo框架的配置文件

主题的文件夹

themes

存放文章的文件夹

source

在vscode里启动hexo

首先选择菜单栏—查看—选择终端，下面就会出来一个终端的界面，我们在终端里输入启动命令
hexo s
会提示报错，无法启动，这是我们关闭vscode
在桌面找到vscode图标，选择兼容性—勾选以管理员运行—应用–再次打开vscode
接着再再vscode的终端里运行 hexo s 就正常运行了

技巧：

每次修改配置文件都需要重启服务
但是修改文章则不需要

修改hexo配置文件：config.yml

常用命令：

添加一个文章：执行下面命令后，会再目录生成一个标题.md 的文件，然后我们去里面编辑
- hexo n “文章标题”
当我们需要将新文章提交到github上，运行以下命令
- hexo g 重新生成下博客
- hexo s 重新运行下本地的博客，预览下，如果没问题，就可以向下执行上传了
- hexo clean 清理缓存
- hexo g 生成博客
- hexo d 上传

四、安装butterfly主题

安装butterfly主题

安装参考文档：Butterfly 安裝文檔(一) 快速開始 | Butterfly
适用npm方法安装
- vscode命令下：npm i hexo-theme-butterfly
- 如果要升级的话：npm update hexo-theme-butterfly
修改hexo配置文件(config.yml)的主题参数：theme
- 大概再100行左右，将theme修改为butterfly
  - theme: butterfly
安装butterfly必备插件
- npm install hexo-renderer-pug hexo-renderer-stylus –save

查看主题安装后的效果

清楚缓存：hexo clean
本地生成下博客：hexo g
本地启动博客：hexo s

设置自动清理缓存+生成博客+本地启动博客

打开package.json文件，修改server的内容，原先只有hexo server这个内容，限制修改为
- “server”: “hexo clean && generate && hexo server”
- 这样以后只需要直接启动hexo s 即可同时清理缓存，生成博客了

主题配置文件修改：config.landscape.yml，因为我们主题是采用npm安装的，所以主题相关的文件在node_modules下面的hexo-theme-butterfly下，我们找到config.yml

修改导航菜单：大概第9行开始menu
- 易错点：一定要注意缩进，因为未修改前，代码都被注释了，所以我们要删除注释，并且删除后，后面的内容必须要和menu后面的冒号 ‘:’ 对其，否则会导致页面菜单栏出不来
- 此次修改，去掉了movie、music
- 修改后的界面
修改社交图标，比如github、邮箱的图标等等
- 在主题配置文件里，找到social settings ，我们直接将github和email取消注释
  - 易错点：注意对齐
- 更换图标
  - 前往网站复制图标地址：Font Awesome
  - 选中想要图图标，也可以在里面搜索，我这里搜索blog，找到需要的，点击打开，如果打不开，可以右键打开新的标签页，接着复制代码，点击代码即可自动复制
  - 得到复制的代码：
    - 修改配置文件，将复制的代码的class的值替换掉social下的冒号之前的值，并将博客地址修改为自己的博客地址
      - 初始邮箱的图标地址：fas fa-envelope: mailto:xxxxxx@gmail.com || Email
      - 修改后的博客的地址：fas fa-blog: https://lishang520.github.io/ || 博客
      - 修改github为我的github主页地址：https://github.com/lishang520
  - 配置文章内容节选功能：搜索 index_post_content
    - 这里又3个模式，我们一般推荐选择第二种：如果文章又描述，则节选描述，如果描述不存在，则节选部分正文内容
      - 将method的值修改为2即可
  - 修改图片
    - 在储存文章的位置新建一个image文件夹，将背景图片、顶部图、归档页面的图片都放在里面，注意，image在source文件夹下创建，和post文件夹处于同一级目录
      - 修改背景图（将它放到image下）：搜索index_img
        
        修改：index_img: “./image/bj.jpg”
        
        修改归档页面顶部的图片：搜索 archive_img
        
        修改为：archive_img: “./image/归档图片.jpeg”

新建tags页面，并修改tags页面顶部图片

在source文件夹下新建tags文件夹，和post文件夹处于同一级目录

新建tags页面：在vscode页面，选中tags文件夹，右键–新建文件–index.md

---
title: 标签汇总
date: 2021-08-08 11:02:36
type: tags
top_img: "./image/tags图片.jpg"
---

新建categories页面，并修改categories页面顶部图片

在source文件夹下新建categories文件夹，和post文件夹处于同一级目录

新建categories页面：在vscode页面，选中categories文件夹，右键–新建文件–index.md

---
title: 分类汇总
date: 2021-08-08 11:02:36
type: categories
top_img: "./image/分类图片.jpeg"
---

新建link页面，并修改link页面顶部图片

在source文件夹下新建link文件夹，和post文件夹处于同一级目录

新建link页面：在vscode页面，选中link文件夹，右键–新建文件–index.md

---
title: 友情链接
date: 2021-08-08 11:02:36
type: link
top_img: "./image/link图片.jpeg"
---

新建about页面，并修改about页面顶部图片

在source文件夹下新建about文件夹，和post文件夹处于同一级目录
新建about页面：在vscode页面，选中about文件夹，右键–新建文件–index.md
1
2
3
4
5
6
---
title:
date: 2021-08-08 11:02:36
type: heart
top_img: "./image/关于我.jpg"
---

文章置顶：

在想置顶得文章得title那个代码区域里，加上 sticky: 1

文章得封面设置

搜索关键字：cover ，如果不想要封面，就设置为false
在titile那个区域加上：cover:

如果文章是转载得，一定要在title区域加上如下代码：

对某个文章单独设置版权信息：

请参考文章：Butterfly 安裝文檔(三) 主題配置-1 | Butterfly

修改头像：搜索avatar 有很多结果，它大概在100行左右

将我们得图片放入image文件夹

复制添加版权信息

在52行，将false改为true ，这里得50代表当别人复制得文字超过50个字，就会自动添加版权信息

博客年份设置：搜索footer

大概在426行

修改页面最下面得自定义文本：

在427行

去掉hexo和butterfly的标志

在128行，改为false

修改侧边栏：搜索aside

将侧边栏设置为左边：
- 在652行，这里我选择将侧边栏的位置 position 设置为left
将follow me改为关注我
修改公告：card_announcement
- 将 This is my Blog 改为欢迎来到我的博客

添加搜索功能：需要安装插件

插件地址：wzpan/hexo-generator-search: A plugin to generate search data for Hexo. (github.com)

安装插件，在博客目录安装

1	npm install hexo-generator-search --save

在hexo的配置文件(config.yml)的最底部添加：

search:
  path: search.xml
  field: post
  format: html
  limit:10000

在主题配置文件里搜索：local_search
- 将false改成true

添加百度统计代码：

首先百度搜索百度统计，然后个人账号登录，申请一个统计代码，只要那一部分即可
其次在主题配置文件里搜索 baidu
- 将刚刚获取到的一串字符串写上去

设置网站背景色：

第520行，background ,下面是 footer_bg
易错点：必须要下面这么写
1
background: url("../image/bj.jpg")

五、安装next主题

提示：

关于修改主题配置文件的一些基本方法
- 主要是对照官方文档，搜索关键字修改即可

安装主题+修改主题配置文件

参考官方文档
- 开始使用 - NexT 使用文档 (iissnan.com)
- 参考文章链接：Hexo进阶设置-布布扣-bubuko.com

painter's Blog

hexo免费博客搭建教程

一、环境准备

二、上传博客到github

三、修改配置文件

四、安装butterfly主题

五、安装next主题