使用hexo + next搭建个人博客 (一)

灰太狼 2022-10-01 10:54 160阅读 0赞

# 使用hexo + next搭建个人博客 (一) #

## 1. 下载hexo博客框架 ##

### 1.安装node和git ###

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。  
这是官方的介绍。具体点这里参考[hexo官方文档][hexo]  
使用hexo之前，默认你已经安装了Git和Node.js.  
如果没有安装的话点击下面自己安装。

1.[Node.js][]

2.[Git][]

记得安装git的时候看到Add to PATH这个选项，一定要勾了，避免一些不必要的麻烦。

### 2.使用npm安装hexo。 ###

下载过Git后你会发现点击鼠标右键会多出两个Git的东西。随便找个地方，点击git bash here，输入下面这条命令。

`npm install -g hexo-cli`

这条命令是用来下载hexo的。

`hexo -v`

然后，你可以使用这条命令查看自己的hexo的版本，并验证自己是不是下载成功。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70]

### 3.使用hexo配置相关文件 ###

你可以新建一个文件夹，比如说my blog。然后在那个文件夹里面打开Git bash here。然后，输入命令。

`hexo init`

`npm install`

然后，你会发现你的my blog文件夹会变成这样。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 1]

### 4.安装NexT ###

首先就是下载主题。  
[点这下载][Link 1]  
点击会跳到github的界面，往下找，点击source code.zip下载源代码。  
找到文件夹里面那个themes,打开，然后将解压过的文件剪切过去。  
![在这里插入图片描述][20190611220625652.PNG]  
这里我把文件重命名了一次。这样基本上文件方面就弄好了。

## 2.博客细节的搭建 ##

### 1.启动主题 ###

首先，我需要说一下，你可能会发现整个文件夹里面有两个配置文件\_config.yml.一份位于站点目录下，也就是配置hexo的时候出现的，包含hexo本身的配置，另一份是位于next主题里面的，用于配置主题方面的选项。前者我们称为站点配置文件，后者叫做主题配置文件。  
打开站点配置文件，找到theme字段，将值改为next。  
最好做完每一项操作可以用一下命令，清理一下hexo缓存，避免很多意想不到的错误。

`hexo clean`

然后就可以启动本地站点。使用命令。

`hexo s`

然后就可以使用浏览器访问 http://localhost:4000，就可以看你搭建成功的博客了。

具体效果如下。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 3]

### 2.细节方面的配置 ###

#### 1.选择Scheme ####

打开主题配置文件，搜素scheme关键字，你将会看到四行关于scheme的配置。选一个你喜欢的风格，将前面的\#去掉就行。

*  Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
 *  Mist - Muse 的紧凑版本，整洁有序的单栏外观
 *  Pisces - 双栏 Scheme，小家碧玉似的清新
 *  Gemini - 左侧网站信息及目录，块+片段结构布局

#### 2.更改语言 ####

打开站点配置文件，搜素关键字language,在后面添上zh-Hans.

`language: zh-Hans`

如果还是英语，用hexo clean 清理一下。

#### 3.设置菜单栏 ####

打开主题配置文件，搜索menu。你会找到这样的代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 4]  
菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。  
说起来有点麻烦，不过默认给了好多菜单选择，你想用哪个把\#去掉就可以显示。

#### 4.设置头像 ####

编辑主题配置文件，修改字段avatr，值为头像的地址链接，我是把头像的地址放在了source/images/目录下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 5]

#### 5.设置作者昵称 ####

打开站点配置文件，设置author为你的昵称。

#### 6.添加菜单页面 ####

你会发现我们设置的菜单选项无法打开。直接打开会显示Cannot GET /categories.  
你需要自己创建这个page。

`hexo new page 'name' #name为你新建的菜单栏。`

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 6]

然后你会发现主source文件夹下面多了tags 和 categories.  
打开tags里面的index.md文件。新增type属性。type: ‘name’.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 7]  
其他与这同理。

### 3.个性化设置 ###

#### 1.动态背景 ####

目前的NexT支持四种动态背景：

*  Canvas-nest
 *  three\_waves
 *  canvas\_lines
 *  canvas\_sphere

我更喜欢第一个,直接搜索名字就行，就可以找到。

#### 2.点击出现爱心。 ####

在/themes/next/source/js/src下新建文件clicklove.js.然后，将下面的代码复制进去。

然后在themes\\next\\layout-layout.swig文件末尾添加：

<script type="text/javascript" src = "/js/src/clicklove.js"></script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 8]

#### 3.代码高亮主题 ####

NexT使用Tomorrow Theme为代码高亮，有五款选择，默认为normal主题。可选，normal, night, night blue,night bright, night eighties.  
打开主题配置文件，搜索highlight\_theme。我用的是night bright。

#### 5.侧边栏社交链接 ####

打开主题配置页面，搜素social字段。格式为显示文本：链接地址 || 图标。  
把前面的\#去掉就可以使用。  
也可以在social\_icons里面设置图标匹配。  
![在这里插入图片描述][20190611220834315.PNG]

#### 6.站点建立时间 ####

在主题配置文件下，新增字段since，后面加时间。

`since: 2019/6/11`

也许会有错误，可以在评论提出。  
参考文档：  
      [hexo官方文档][hexo]  
      [next文档][next]

[hexo]: https://hexo.io/zh-cn/docs/
[Node.js]: https://nodejs.org/en/
[Git]: https://git-scm.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70]: /images/20220118/216b6909737b4ee3925b2aca5c0c73af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 1]: /images/20220118/1154a98609844f75a9bd69d3e565e9b2.png
[Link 1]: https://github.com/iissnan/hexo-theme-next/releases
[20190611220625652.PNG]: /images/20220118/4aa06ac020164b38acc0e93294cbac52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 2]: /images/20220118/65f9b6fe81bb42c18bc304a0927d4186.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 3]: /images/20220118/e65747ea4c1840bcb2cd31e6a84e7e37.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 4]: /images/20220118/bda0a095a5ea4abb909c2d5692ba2fd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 5]: /images/20220118/499cb308ffae4087af7a07b0e80255ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 6]: /images/20220118/d3483637a01c424e875c9d8bc2bf4029.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 7]: /images/20220118/4d33b584a482429ca307814fa450a5c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hwdV95YW5nY2hlbg_size_16_color_FFFFFF_t_70 8]: /images/20220118/93c8774cb4cc4b8eb67b876453507997.png
[20190611220834315.PNG]: /images/20220118/bd3e3d83cff346daad991dbdbf92e616.png
[next]: http://theme-next.iissnan.com/getting-started.html