从零开始搭建属于自己的个人博客从Hexo到Hexo Auroar 超详细！！！

前言：这篇博客预料到了你所有会遇到的问题，大家放心观看。

1.下载git和node

搭建之前需要准备的软件：
Git：官网下载：https://git-scm.com/
Node.js 官网下载：http://nodejs.cn/

以及:注册一个github账号

2.安装Hexo

在你喜欢的地方新建一个文件夹，在新建的文件夹路径上输入cmd，就会直接打开当前目录下的命令窗口

执行npm i hexo，这里我使用的是cnpm，奈何没有wifi只能用热点npm下载总是报错，如果也遇到npm下载不下来可以配置一下淘宝镜像cnpm

 下载好了之后就会生成几个文件，这样就是下载成功了！

3.配置hexo环境变量

第一次接触Hexo的朋友在执行hexo命令的时候会遇到命令不存在的问题，这个时候就需要去桌面右击我的电脑，点击属性就会出现以下弹窗，咱们点击高级系统设置，再点击环境变量

接着找到系统变量，找到path这一行，咱们双击

继续点击新建

到一步了之后，咱们先去打开之前下载hexo的那个文件夹，里面不是生成了node_modules文件夹吗，点进去找到hexo文件夹，点进去，再点bin文件夹，然后复制整个路径下来

复制下来的路径咱们直接放到刚才点击新建的那个地方

注意：配置好了之后一定要点确定！ 

到现在咱们的环境变量就配置好了，可以继续搭建咱们的博客了，大家不要急躁，马上了

4.完成本地搭建！

回到咱们刚才下载hexo的文件夹下，咱们新建一个文件夹名字随便起，这个才是我们博客的文件夹，之前的文件夹只是为了给hexo配置环境变量！

打开新建的文件夹，右键执行git bash ，执行命令 hexo init 咱们进行初始化

注意：hexo init 只能在一个空的文件夹进行，否则会报错！

这个时候基础项目就生成好了

接着执行

cnpm i ；（下载包）

hexo g 或者 hexo generate（生成静态页面）

hexo server (运行本地服务)

 这个时候你如果环境变量配置都是安装我之前配置的，那么就没有任何问题

 这时候访问localhost:4000就可以看到咱们的hexo页面啦！

5.实现连接github仓库

这一步是最关键的一步，可以让咱们的博客在远程服务器上部署！

首先，需要有一个github账号。登上账号后建一个仓库：仓库名为你的用户名.github.io，
举例如下：
创建一个和你用户名相同的仓库，后面加.github.io，
只有这样，将来要部署到GitHub的时候，才会被识别，也就是xxxx.github.io，其中xxx就是你注册GitHub的用户名.
 

这一步完成了之后咱们就需要进行配置ssh公钥，这一步也很关键！

打开C\user\你自己的电脑名\文件下

右键打开Git Bush 输入

ssh-keygen -t rsa -C 3314806775@qq.com

改成你自己注册的github邮箱！！！

接着你就会发现C\user\你自己的电脑名\文件下多了一个.ssh文件夹，打开id_rsa.pub文件复制里面的内容，这就是咱们的公钥

紧接着在github的设置里，咱们去配置这个公钥（不然就会一直报错，没有权限，当时折腾了我很久），点击New Shh Key，title随便起，key里把复制的内容粘贴过去，这样咱们的公钥就配置好啦！

最后一步！！！

打开咱们hexo项目文件夹，打开_config.yml文件，直接滑到最下面找到deploy更改配置,这一步就是为了把hexo和github连接起来

deploy:
  type: git
  repo: git@github.com:TyyGod/TyyGod.github.io.git
  branch: main

完成这一步，保存，咱们接着在这个文件夹下右键打开GirBush，执行 npm install hexo-deployer-git --save  这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

最后依次执行以下命令：

如果缩写没有命令直接执行全称就行

hexo c     #清除缓存文件 db.json 和已生成的静态文件 public （hexoi clean）
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

完成之后去github仓库中看一看

这样就是成功了！！！

 把前面的名字改成你自己的github名就好，后面.github.io不变即可

可能你们看到的页面跟我不一样，这是因为我在hexo的基础上添加了Aurhora风格

6.升级Hexo，变成Auroar Hexo！！！

我只是为了项目样式更加好看，如果没有这方需求的朋友恭喜你们，你们已经完成搭建属于自己的博客了，至于想接着完善hexo的，那咱们继续，不过请放心，升级hexo相较于创建hexo非常简单

步骤 1 - 安装主题包

在控制台中，进入 Hexo 项目的根目录，然后运行以下命令安装主题

注意

对于版本 2.0+ 后，生成脚本全部移植到 hexo-plugin-aurora 包中。所以需要安装这个插件来使用这个主题!

• YARN
• NPM

yarn add hexo-theme-aurora hexo-plugin-aurora

步骤 2 - 生成主题配置

因为主题是使用 NPM 或者 Yarn 安装的，而不是 clone 到 themes 文件夹的。所以我们需要自己创建一个配置文件。你只需要在 Hexo 博客的根目录下创建一个 _config.aurora.yml 配置文件来配置主题。

要获取默认主题模板，对于 Linux 系统 (MacOS/LinuxOS) 用户只需执行以下命令。

对于 Windows 用户，您可以将下面的模板复制到 _config.aurora.yml 中。

Linux 复制模版命令

cp -rf ./node_modules/hexo-theme-aurora/_config.yml ./_config.aurora.yml

也可以直接复制这个下面链接的模版到项目根目录的 _config.aurora.yml 中

https://github.com/auroral-ui/hexo-theme-aurora/blob/main/_config.yml

---

#步骤 3 - Settingtheme

因为要告诉 hexo 你要用的主题是 aurora 所以需要把 _config.yml 中的 theme 值改为 aurora

1. 打开在 Hexo 根目录下的 _config.yml
2. 修改把 theme 的值改为 aurora

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: aurora

---

#步骤 4 - 设置permalink

因为使用了 Vue-router，Hexo 默认生成的页面和文章的 permalink 与我们 Vue router 中的 path 是不相符的，那么就会出现无法访问的问题。所以我们需要修改 Hexo 默认配置文件里面的 permalink 参数。

1. 打开在 Hexo 根目录下的 _config.yml
2. 修改 permalink 参数为 /post/:title.html

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://tridiamond.tech
permalink: /post/:title.html
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

---

#步骤 5 - 设置代码高亮

最后主题是使用 Prismjs 来实现代码高亮显示，但 Hexo 默认是使用 highlightjs，因此你需要更改 Hexo 配置来使用 Prismjs:

• 把 highlight 的启用改为false
• 把 prismjs 的启用改为true
• 把 prismjs 下的 preprocess 改为 false

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: false
  line_number: true
  tab_replace: ''

---

#步骤 6 - 创建 “关于 (about)” 页面

主题默认开启了 about 页面，所以我们需要创建这个 about 页，要不主题就无法正常显示 about 页。

要创建这个默认的 about 页，只需要执行这个 Hexo 的命令：

hexo new page about

执行完毕后，你会发现在 source/ 文件中多处了一个新的文件夹：

.
└── source
    └── about
        └── index.md

你可以随意修改这个 index.md markdown 文件中的内容，此文件的内容将会现在在我们的 about 页面中。

---

#步骤 7 - 重新生成与本地服务器

使用以下命令来运行本地环境。

hexo clean & hexo g & hexo server

提示

改变了任何配置都需要重新生成 Hexo 的静态文件！

当文件都生成完毕之后，就可以通过 https://localhost:4000在新窗口打开 访问你的博客了。

最后在在执行一下hexo deploy从新部署一下，就完成啦，升级hexo到服务端需要一点时间，如果发现页面没有变化的重启几次服务试一下

最终的效果！

最后感谢能看到这里的人，如果遇到了任何问题，可以直接评论我会第一时间回复的！