hexo+fluid搭建个人博客

一、准备

1. GitHub配置

首先注册github账号。然后本地安装GIT，网上很多教程。

在GitHub上创建一个仓库，点击Your repositories，进入仓库页面。点击New按钮，进入仓库创建页面。填写仓库名，格式必须为<用户名>.github.io，然后点击Create repository。

创建完成后会提示创建文件，建议首先创建一个README文件，填写内容之后点击Commit new file提交。

回到仓库，点击Settings，然后点击左侧Pages，可以看到GitHub Pages。你的站点就是：https://<用户名>.github.io。[Build and deployment]配置项，选择Deploy from a branch。下面是配置的分支，通常是main。至此，GitHub上配置暂时完成。

2. hexo配置

本地创建一个目录，例如hexo，然后进入该目录，通过npm安装：

1
npm install -g hexo-cli

查看版本信息，确认安装完成：

1
hexo -v

创建一个hexo项目，也就是你的博客目录。

1
2
3
hexo init blog
cd blog
npm install

本地启动hexo服务，

1
2
hexo generate # 生成静态文件
hexo server  # 启动服务器

通过http://localhost:4000/访问页面，此时是默认主题：landscape。

3. fluid配置

默认主题不好看，hexo官网可选择主题：Themes | Hexo

推荐两个主题，一个是NEXT， 另一个是fluid。这里更换主题为 fluid 。推荐从github下载最新压缩包：Releases · fluid-dev/hexo-theme-fluid (github.com)，解压到 themes 目录，并将解压出的文件夹重命名为 fluid。

修改目录blog/_config.yml文件中的主题配置为：theme: fluid。Hexo Fluid 用户手册 (fluid-dev.com)

fluid有一个需要注意的，就是创建关于页，需要手动创建：

1
hexo new page about

创建成功后修改 /source/about/index.md，添加 layout 属性。修改后的文件示例如下：

1
2
3
4
5
6
7
---
title: 标题
date: 2023-12-02 01:59:10
layout: about
---

这里可以写正文，支持 Markdown, HTML

layout: about 必须存在，并且不能修改成其他值，否则不会显示头像等样式。

4. 个性化配置

浏览器tab页名称

修改根目录下 blog/_config.yml 中的 title 字段。

博客标题

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

主页正中间的文字

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

修改之后，通过命令启动服务器，可以看到个性化页面：

1
2
hexo g # hexo generate的缩写
hexo s # hexo server的缩写

5. 访问量统计

Fluid 主题写好了统计阅读量的代码，但是缺少相应配置所以没有开启，需要借助三方服务来统计阅读量，这里是有 Leancloud 的免费服务来进行统计。

5.1 申请LeanCloud账号并创建应用

进入 官网 注册账号，需实名认证，验证邮箱，完成后才能使用各项服务。创建应用，选择开发版即可，免费的进入该应用的 设置->应用凭证，找到 AppID 和 **AppKey**，记录下来后面配置要用。

5.2 修改Fluid统计配置

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

单篇文章阅读量计数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 网页访问统计
# Analysis of website visitors
web_analytics:  # 网页访问统计
enable: true

...

leancloud:
    app_id: 填写你的
    app_key: 填写你的
    # REST API 服务器地址，国际版不填
    # Only the Chinese mainland users need to set
    server_url: 填写你的REST API 服务器地址
    # 统计页面时获取路径的属性
    # Get the attribute of the page path during statistics
    path: window.location.pathname
    # 开启后不统计本地路径( localhost 与 127.0.0.1 )
    # If true, ignore localhost & 127.0.0.1
    ignore_local: false
浏览量计数

修改成leancloud：

1
2
3
4
5
6
7
8
# 浏览量计数
# Number of visits
views:
  enable: true
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: "leancloud"
页面底部展示网站的 PV、UV 统计数
1
2
3
4
5
6
7
8
9
10
11
# 展示网站的 PV、UV 统计数
# Display website PV and UV statistics
statistics:
 enable: true

    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
    # Options: busuanzi | leancloud
    source: "leancloud"
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"
5.3 开启评论功能

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

1
2
3
4
5
6
7
8
# 评论插件
  # Comment plugin
  comments:
    enable: true
    # 指定的插件，需要同时设置对应插件的必要参数
    # 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 | discuss
    type: valine

配置 LeanCloud 的 appId 和 appkey：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/
valine:
  appId: 填写 
  appKey: 填写
  path: window.location.pathname
  placeholder: 说点什么
  avatar: 'retro'
  meta: ['nick', 'mail', 'link']
  requiredFields: []
  pageSize: 10
  lang: 'zh-CN'
  highlight: false
  recordIP: false
  serverURLs: ''
  emojiCDN:
  emojiMaps:
  enableQQ: false

重新部署，可以看到效果。

二、部署

发布博客到GitHub Pages，推荐使用hexo-deployer-git部署。

首先安装hexo-deployer-git：

1
npm install hexo-deployer-git --save

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

1
2
3
4
deploy:
  type: git
  repo: git@github.com:Cjvaely/Cjvaely.github.io.git
  branch: main

注意，这里repo很多推荐填写的格式是：https://github.com/Cjvaely/Cjvaely.github.io.git，但是我遇到报错：err: Error: Spawn failed at ChildProcess.<anonymous>，解决方法参考issue: hexo d ：give me fatal: could not read Username for ‘https://github.com': No error · Issue #2778 · hexojs/hexo，最后成功部署。部署三部曲：

1
2
3
hexo clean
hexo g
hexo d

现在，你可以通过前面的 https://<用户名>.github.io 访问自己的博客了。