Pages Hexo 博客使用总结

参考：https://blog.csdn.net/yaorongke/article/details/119089190
Hexo Fluid 首页：https://hexo.fluid-dev.com/docs/
Hexo Fluid 配置：https://hexo.fluid-dev.com/docs/guide/#%E5%B1%95%E7%A4%BA-pv-%E4%B8%8E-uv-%E7%BB%9F%E8%AE%A1

Hexo Fluid 是什么?

Hexo Fluid 是一款高性能的静态站点生成器。它可以快速构建优雅的、可定制的静态网站，使用简单、可扩展的语法。它提供了一个简洁、快速的开发流程，可以让你快速地构建可扩展的站点。

1.创建GitHub账号

直接官网注册即可

2.安装Git

官网下载

3.安装NodeJs

进入nodejs官网下载

4.创建项目仓库

本地创建项目，随便建立一个项目目录，目录中添加 index.html 文件

创建结束以后，提交代码

git init
git add .
git commit -m "first commit"
git remote add origin [远程地址]
git push -u origin master

注意：GitHub里面的项目库名称必须和用户名相同，
并且后缀是username.github.io格式，
因为 github page 解析的时候找的是这个username.github.io的仓库名，
这一步非常重要。

点击地址，进入测试页面

5.创建Hexo博客网站

Hexo是什么？

Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，
只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。

官网地址：https://hexo.io/zh-cn/docs/

Hexo项目安装步骤

1.安装脚手架
npm install -g hexo-cli
查看版本
hexo -v
2.创建项目，并初始化
hexo init hexo-blog
cd hexo-blog
3.安装依赖
npm install
4.本地启动
hexo serve

6.更换主题

安装方式有两种（不考虑Next）

参考：Fluid主题安装

下载最新 release 版本解压到 themes 目录

将解压出的文件夹重命名为 fluid

修改 Hexo 博客目录中的 _config.yml

theme: fluid     // 指定主题
language: zh-CN  // 指定语言，会影响主题显示的语言，按需修改

在项目目录，创建「关于页」

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性

title: about
layout: about
这里写关于页面的正文，支持 Markdown, HTML

本地启动

hexo g -d  // 编译静态文件代码
hexo s     // 重启服务

7.创建文章

修改 _config.yml
打开这个配置是为了在生成文章的同时生成一个同名的资源目录
用于存放图片文件

post_asset_folder: true

执行如下命令创建一篇新文章，名为我的文章

hexo new post 我的文章

8.引入图片

方式一：
{
    
    % asset_img test.png 图片引用方法一 %}

方式二：
![图片引用方法二](test.png)

注意：使用 Markdown 嵌入图片，需启用：

_config.yml
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

然后：

编译
hexo g -d

启动服务
hexo s   

才能生效。

9.个性化页面展示

页面的标题等位置显示默认的文字，可以改下显示一些个性化的信息。

浏览器tab页名称

_config.yml
title: 我的博客    // 浏览器tab页名称

博客标题

主题目录 themes\fluid 下 _config.yml 中的 blog_title 字段

blog_title:"标题测试"

主页正中间的文字

主题目录 themes\fluid 下 _config.yml 中的 text 字段。

text: "说明测试文字"

10.添加阅读量统计

申请LeanCloud账号并创建应用

进入 主页 注册账号

实名认证，完成后使用各项服务

验证邮箱

创建应用，选择开发版

进入该应用的 设置->应用凭证，找到 AppID 、 AppKey 和 server_url

进入文件 themes/fluid/_config.yml 配置 AppID 、 AppKey 和 server_url

web_analytics:  # 网页访问统计
  enable: false # 默认为false，启用网页统计改为true即可
  ……
  leancloud:  # LeanCloud 计数统计，可用于 PV UV 展示，如果 web_analytics.enable 没有开启，PV UV 展示只会查询，不会增加
    app_id: xxxxxxx
    app_key: xxxxxxx
    server_url: xxxxxxx

设置浏览量计数

# Number of visits
views:
  enable: true
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: "leancloud"
  format: "{} 次"

设置 PV 与 UV 统计

footer:
  statistics:
    enable: false
    source: "busuanzi"  # 可选 leancloud | busuanzi  根据自己需求选择
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

11.添加评论功能

打开主题目录 themes\fluid 下的 _config.yml 文件，修改如下配置

# 评论插件
# Comment plugin
comments:
  enable: false
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo | cusdis | giscus
  type: disqus

启用评论插件

# Valine
# 基于 LeanCloud
valine:
  appId: xxxxxxxxx
  appKey: xxxxxxxxx
  path: window.location.pathname
  placeholder: 请输入……

重新部署，查看页面效果，评论功能开启

12.发布到GitHub Pages

安装hexo-deployer-git

npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://github.com/xxxxxxx/xxxxxxx.github.io.git
  branch: main
  token: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

其中 token 为 GitHub 的 Personal access tokens，获取方式如下图

打包，部署

hexo g -d

进入 Git Page 中，设置页面显示分支

进入page，加载页面，即可。

13.Hexo的特殊操作总结

Hexo 设置保存，自动刷新页面

经常本地调试 Hexo 主题, 如果有工具能监视文件更改幷自动刷新页面，那一定能提高不少效率，Browsersync 就是这样一款浏览器同步测试工具。

参考：https://helloblack2017.github.io/2018/04/16/hexo-browsersync/

安装 Browsersync

Browsersync 依赖包较多，Mac 和 Linux 中建议加上 sudo 避免安装时因权限不足而报错

npm install -g browser-sync

安装结束后执行下面命令，能显示对应版本则表示安装成功

browser-sync --version

安装 Hexo 端插件

要把 Browsersync 应用到 Hexo 上，还需要安装一个小插件 hexo-browsersync 。命令行中进入 Hexo 根目录，执行以下命令

npm install hexo-browsersync --save

安装后像往常一样执行 hexo s 开启本地服务器，当相关文件被修改或者保存时，关联的浏览器页面会自带刷新

不足

1. 变动后将重新加载整个页面，不能局部刷新；
2. 使用 Hexo 自带服务器时，无法在移动端调试;
3. 偶尔会报错，需要多保存几次；

14.Hexo Fluid 配置

指南

站点配置

Hexo 博客目录下的 _config.yml

主题配置

theme/fluid/_config.yml 或者 _config.fluid.yml

本指南中提到的 source 目录都指的是博客目录下的 source 文件夹，不推荐修改主题内 source 目录

每次无论 hexo g 或 hexo s，都最好先使用 hexo clean 清除本地缓存

页面结果以本地 hexo s 为准，部署后的异常大部分是线上缓存原因，在确认没有报错的情况下，等待若干时间后即可正常

全局

覆盖配置

首先为什么要配置‘覆盖配置’呢？

原因很简单，就是在不影响原框架逻辑的基础上达到‘自定义’项目的作用，毕竟框架不是我们自己写的，很多地方不了解，有了‘覆盖配置’那即便配置的有问题也不会影响的项目本身。

创建办法：

在博客目录下创建 _config.fluid.yml 文件，将主题的 _config.yml 全部配置或部分配置复制过去

以后如果修改任何主题配置，都只需修改 _config.fluid.yml 的配置即可

注意：

想查看覆盖配置有没有生效，可以通过 hexo g --debug 查看命令行输出

如果想将某些配置覆盖为空，注意不要把主键删掉，不然是无法覆盖的，比如：

about:
  icons:  # 不要把 icon 注释掉，否则无法覆盖配置
    # - { class: 'iconfont icon-github-fill', link: 'https://github.com' }
    # - { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }