Hexo+NexT 个人博客搭建

2023-12-28 12:46:16

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

你可以把生成的静态页面部署到gitee Page、github page上快速搭建个人博客。

1、前言

1.1、文章目标

  • 搭建Hexo站点
  • 安装配置NexT主题
  • NexT的一些扩展设置

1.2、环境版本

  • Windows 10
  • Git 2.21
  • Node 14.15.4
  • Hexo 5.3.0
  • NexT 7.8.0

1.3、参考网址

2、开始安装Hexo

2.1、安装Git和Node.js

Git官方下载链接
nodejs官方下载链接

2.2、安装Hexo

使用cnpm安装Hexo

$ cnpm install -g hexo-cli

2.3、建站

创建网站文件夹，cd到文件夹目录下，执行下列命令Hexo将会在指定文件夹中新建站点文件

$ hexo init
$ npm install

新建完成后目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

2.4、验证安装结果

启动服务器，建议首次启动加上debug参数，方便排查启动过程中出现的错误

$ hexo serve --debug

启动后默认访问网址为http://localhost:4000/，若访问正常则安装完毕，恭喜进入配置阶段~

3、Hexo基础配置

您可以在 _config.yml 中修改大部分的配置

3.1、网站配置

在配置文件中找到并替换

# Site
title: qing's blog #网站标题
subtitle: 'keqinglee的个人博客' #网站副标题
description: '千里之行，始于足下' #网站描述
keywords: 'keqinglee,blog,清' #网站的关键词。支援多个关键词。
author: 'keqinglee' #您的名字
language: 'zh-CN' #请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN
timezone: '' #默认使用您电脑的时区

3.2、分页配置

index_generator:
  path: '' #索引页根路径
  per_page: 10 #每页显示的文章量 (0 = 关闭分页功能)
  order_by: -date #排序方式，默认按日期降序

3.3、插图配置

文章中插图是必不可少的，使用Hexo时图片路径会有各种问题导致显示异常，
目前官网的解决方案是修改站点配置文件下的post_asset_folder为true，每次创建文件时会在文件相同目录下生成一个资源文件夹，
然后使用标签插件引用图片，但这种方式markdown就失去了意义

{% asset_path slug %}
{% asset_img slug [title] %}
{% asset_link slug [title] %}

网上解决方案是打开post_asset_folder的同时，安装https://github.com/CodeFalling/hexo-asset-image插件，然后就能使用markdown的语法引用图片，
虽在文章详情页面显示正常，但首页或存档页依然异常，还需修改插件代码。。

我想继续使用markdown的语法，又不想装完插件还改代码。。试着在hexo的source目录下创建资源文件夹_(img)_，使用相对路径试了下各页面显示都正常！
如： ![图片说明](/imgs/7380095.png)
_

3.4、部署配置

Hexo 提供了快速方便的一键部署功能，让您只需一条命令就能将网站部署到服务器上。
安装 hexo-deployer-git。

$ cnpm install hexo-deployer-git --save

修改配置项

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: [branch]
  message: [message]

发布项目

hexo clean && hexo deploy

3.5、其他配置

详见Hexo官方文档

4、NexT主题安装

Hexo默认的主题不太符合我的预期，在官方主题库挑选许久，NexT的“精于心，简于形”更符合我的预期。

4.1、下载主题

在终端窗口定位到hexo站点目录，注意新版本github仓库地址迁移到了https://github.com/theme-next/hexo-theme-next

$ git clone https://github.com/theme-next/hexo-theme-next themes/next

根据自身网络环境，github可能被墙。安装完成后\themes文件夹下会有next的主题

4.2、启用主题

打开站点目录下的_config.yml，找到文件中的theme并更换

theme: next

4.3、验证主题

$ hexo clean
$ hexo serve --debug

5、NexT基本配置

5.1、设置样式

NexT自带了4中样式，个人比较中意Mist样式。在主题的_config.yml中修改

# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

5.2、设置头像

avatar:
  # 根据路径换成自己的图片
  url: /images/avatar.gif
  # 是否圆角显示
  rounded: true
  # 光标触达，头像旋转
  rotated: false

5.3、设置侧边栏

sidebar:
  position: right #显示在右侧
  display: post #文章页面默认展开

5.4、设置社交链接

social:
  GitHub: https://github.com/keqinglee || fab fa-github
  E-Mail: keqinglee@126.com || fa fa-envelope

5.5、设置菜单

根据自己的需要设置菜单项，如果是新增的菜单，还需要在NexT 主题目录下languages/zh-CN.yml文件的menu属性下增加对应的翻译文字。

menu:
  home: / || fa fa-home
  categories: /categories/ || fa fa-th
  tags: /tags/ || fa fa-tags
  archives: /archives/ || fa fa-archive
  about: /about/ || fa fa-user

5.6、代码高亮

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: normal

5.7、返回顶部

back2top:
  enable: true
  sidebar: false #显示在侧边栏
  scrollpercent: true #显示百分比

5.8、文章版权声明

creative_commons:
  license: by-nc-sa
  sidebar: false
  post: true #使用版权说明
  language:

5.9、阅读全文

新版不支持设置，需要在文章中使用作为分隔

6、NexT扩展配置

6.1、本地搜索

安装插件

$ cnpm install --save hexo-generator-searchdb

在站点的_config.yml中添加（此处注意，不是主题的配置文件）

search:
  path: search.xml
  field: post
  content: true
  format: html

修改主题配置文件

local_search:
  enable: true

6.2、评论系统&数据统计

经对比valine是相对好用的，但目前leancloud需要实名+支付宝验证后才能使用
另推荐基于github的评论系统

7、NexT进阶配置

NexT默认首页展示文章的全部内容，即使用了最顺眼的Mist样式，依然感觉首页排版不符合预期，故修改

7.1、首页调整

打开并编辑hexo\themes\next\source\css_schemes\Mist_posts-expand.styl文件

.post-eof {
    //display: none;
    width: 100%;
    background: var(--menu-item-bg-color);
    margin: 60px auto 60px;
  }

 .post-block:not(:first-child) {
    //margin-top: 120px;
  }

待续...

7.2、分类调整

待续...

上一篇：哟呵，Github 免费从 0 到 1搭建个人博客网站


下一篇：next5主题自定义摘要