个人博客搭建

本文最后更新于：2024年7月11日晚上

Hexo 安装配置

Hexo 初始化

Hexo配置需要git和node.js两个依赖组件，具体安装步骤可以直接去官方文档查看。
安装Hexo后完成后，初始化Hexo：

1
2
3

hexo init <folder>
cd <folder>
npm install

初始化完成后，打开项目目录下的_config.yml，根据自己需求修改一下内容。

# Site
title:                      # 必填，输入网站标题
subtitle:                   # 此处可不填，子标题
description:                # 此处可不填，网站简介
keywords:                   # 此处可不填，关键词
author:                     # 必填，作者名称
language: zh-CN             # 必填，使用的语言，这里应填为 `zh-CN` 
timezone: 'Asia/Shanghai'   # 必填，时区，在国内建议选择上海时间

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://<你的 Github 用户名>.github.io  # 必填，Github Page 的地址
permalink: :year/:month/:day/:title/
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

在项目目录下执行hexo -g将会生成网站静态文件，hexo -s则会打开本地服务器，此时即可访问http://localhost:4000/查看默认网站。

Hexo Deploy 配置

Hexo内置部署功能，可以很方便的部署到Github上去，并自动同步Github Page，首先安装hexo-deployer-git

1	`npm install hexo-deployer-git --save`

具体需在 _config.yml 文件下找到并修改如下：

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  # 必填，Github 仓库地址
  repo: https://github.com/<Github 用户名>/<Github 用户名>.github.io.git 
  branch: 'master'    # 决定上传到哪个节点下，这里默认选择 'main'
  token:            # Github认证Token

字段功能如下表所示：


选项	描述	默认
`repo`	目标存储库的 URL
`branch`	分支名称	`gh-pages` (GitHub) `coding-pages` (Coding.net) `master` (others)
`message`	自定义提交信息	`Site updated: {{ now('YYYY-MM-DD HH:mm:ss') }}`
`token`	可选的令牌值，用于认证 repo。用 `$` 作为前缀从而从环境变量中读取令牌

配置完成后执行hexo d即可上传至Github。

Hexo 安装主题

接下来，我们给他换个主题，可以在 https://hexo.io/themes/ 上寻找想要的主题，我们这里以Fluid主题介绍安装步骤：
- 进入博客目录执行命令安装
  1
  npm install --save hexo-theme-fluid
- 在博客目录下创建_config.fluid.yml，将主题的 _config.yml (opens new window)内容复制过去。
- 博客目录下的_config.fluid.yml文件
  1
  theme: fluid # 请在此处修改主题名称，比如：fluid

Fluid 主题配置

Fluid主题配置来源于Fluid用户手册，这里只记录了本人所用到一些配置，详细配置转到Hexo Fludi用户手册。

Fluid主题配置文件一般指theme/fluid/_config.yml或者_config.fluid.yml，其中_config.fluid.yml优先级比较高。初始配置可以在博客目录下创建_config.fluid.yml文件，将官方默认配置复制进去即可。

全局配置

页面顶部大图

主题配置中，每个页面都有名为 banner_img 的属性，可以使用本地图片的相对路径，也可以为外站链接：

本地图片：

1	`banner_img: /img/bg/example.jpg # 对应存放在 /source/img/bg/example.jpg`

外部链接：

1	`banner_img: https://static.zkqiang.cn/example.jpg`

网页统计功能

fluid支持多种网页统计方式，下面的选择一个，填写上key即可。

web_analytics:  # 网页访问统计
  enable: true # 默认为false，启用网页统计改为true即可
  baidu:  # 百度统计的Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串
  google:  # Google统计的Tracking ID，参见 https://analytics.google.com/analytics/web/
  tencent:  # 腾讯统计的H5 App id，参见 https://mta.qq.com/h5/manage/ctr_app_manage (开启高级功能才有cid)
    sid:
    cid:
  woyaola:  # 51.la站点统计ID，参见 https://www.51.la/user/site/index
  cnzz:  # 友盟/cnzz站点统计web_id，参见 https://web.umeng.com/main.php?c=site&a=show
  leancloud:  # LeanCloud 计数统计，可用于 PV UV 展示，如果 web_analytics.enable 没有开启，PV UV 展示只会查询，不会增加
    app_id:
    app_key:
    server_url:  # REST API 服务器地址，国际版不填

展示 PV 与 UV 统计

PV与UV可以展示当前站点总访问量，总访客数，busuanzi似乎已经凉了。

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

文章相关配置

Front-matter

Front-matter 是文件开头的 YAML 或 JSON 代码块，用于配置写作设置。例如在博客MD文件开头，我们可以添加如下代码块指明文章基本信息：

---
title: 个人博客搭建
excerpt: 摘要
date: 2024/7/11 20:46:25
update: 2024/7/11 21:00:00
comments: false
tags:
 - 教程文档
categories:
 - 博客搭建
 - hexo
---

字段及解释如下：

设置	描述	默认值
`layout`	布局	`config.default_layout`
`title`	标题	文章的文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	`true`
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章的永久链接. 永久链接应该以 `/` 或 `.html` 结尾	`null`
`excerpt`	纯文本的页面摘要。使用该插件来格式化文本
`disableNunjucks`	启用时禁用 Nunjucks 标签 `{{ }}`/`{% %}` 和标签插件的渲染功能	false
`lang`	设置语言以覆盖自动检测	继承自 `_config.yml`
`published`	文章是否发布	对于 `_posts` 下的文章为 `true`，对于 `_draft` 下的文章为 `false`

值得注意的是分类和标签字段，在Hexo中，分类具有顺序性和层次性；而标签没有顺序和层次。在配置上需要注意，下面配置将为文章添加Diary和Life分类。

1
2
3

categories:
  - Diary
  - Life

如果需要为文章添加多个子分类，请使用以下列表格式，必须要添加[]，否则将会识别为层次格式：

categories:
- [Diary, PlayStation]
- [Diary, Games]
- [Life]

首页滚动标题

index:
  slogan:
    enable: true
    text: 这是一条 Slogan
    api:
      enable: false
      url: "https://v1.hitokoto.cn/"
      method: "GET"
      headers: {}
      keys: ["hitokoto"]

api字段可以指定首页标题内容来源
- url: API 地址，必须返回的是一个 JSON 格式
- method: 请求方法，可选 GET、POST、PUT
- headers: 请求头，如果接口需要传一些验证的头部信息，在这里设置
- keys指明从请求结果中获取名称，例如['data','content']表示获取json数据中data字段中的content值。

文章摘要

Fluid默认开启自动摘要：

1
2
3

index:
  auto_excerpt:
    enable: true

也可以在MD文档中Front-matter手动指定摘要：

1 2	`title: 文章题目 excerpt: 文章摘要`

日期/字数/阅读时长/阅读数

显示在文章页大标题下的文章信息，除了作者和阅读次数，其他功能都是默认开启的。

post:
  meta:
    author:  # 作者，优先根据 front-matter 里 author 字段，其次是 hexo 配置中 author 值
      enable: false
    date:  # 文章日期，优先根据 front-matter 里 date 字段，其次是 md 文件日期
      enable: true
      format: "dddd, MMMM Do YYYY, h:mm a"  # 格式参照 ISO-8601 日期格式化
    wordcount:  # 字数统计
      enable: true
      format: "{} 字"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    min2read:  # 阅读时间
      enable: true
      format: "{} 分钟"
    views:  # 阅读次数
      enable: false
      source: "leancloud"  # 统计数据来源，可选：leancloud | busuanzi   注意不蒜子会间歇抽风
      format: "{} 次"

Tag插件

在 markdown 中加入如下的代码来使用便签：

1
2
3

{% note success %}
文字 或者 `markdown` 均可
{% endnote %}

success可更换为primary、secondary、success、danger、warning、info、light。

我是便签。

我也是便签。

我还是便签。

我当然是便签。

我肯定是是便签。

我不是便签吗？

我绝对是便签。

教程文档 Hero

#Hexo #Fluid

个人博客搭建

https://genioco.github.io/2024/07/11/Hexo/个人博客搭建/

作者

BadWolf

发布于

2024年7月11日

许可协议

Hexo图床图片不显示上一篇

Openwrt自编译教程下一篇