title: Hexo - 使用 Hexo 和 Gitee 搭建博客
date: 2023-08-06 00:00:00
categories: [Hexo]
tags: [Hexo, Gitee]
Hexo - 使用 Hexo 和 Gitee 搭建博客
使用 Hexo 和 Gitee 搭建博客，Hexo 官方文档：文档 | Hexo。
预备安装
- Git (git-scm.com)，默认安装即可，推荐勾选添加配置文件到 Windows Terminal；
- Node.js (nodejs.org)，选用 LTS 版本，默认安装即可，安装完成后
node -v可查看版本。
Hexo 安装
-
进入终端，运行命令：
npm install -g hexo # 安装 hexo cd <hexo_web_dir> # 切换到要存放网站的目录 hexo init # 初始化目录 hexo g # 生成静态文件 hexo s -p 80 # 启动服务器，-p 重设端口 -
用浏览器访问命令行中显示的地址即可，
Ctrl+C于终端关闭服务。
主题安装
原版主题不太好用，可以到官网下载其他主题：Themes | Hexo。
这里使用 Hexo Fluid 博客主题，用户手册：Hexo Fluid 用户手册 (fluid-dev.com)。
以下操作都在网站目录下进行：
-
执行
npm install --save hexo-theme-fluid，这将主题安装到.\node_modules\hexo-theme-fluid； -
创建
_config.fluid.yml，将主题的_config.yml内容复制过去； -
修改网站的
_config.yml，指定主题与语言：theme: fluid language: zh-CN -
执行以下命令，更新 Hexo 静态网页代码：
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public) hexo g # 生成静态文件 hexo s -p 80 # 启动服务器
Gitee 托管
首先，注册 Gitee 账号，并建立公开仓库。
-
修改网站的
_config.yml，在deploy:下添加：type: git repo: 仓库地址（例如：https://gitee.com/用户名/仓库名） -
在网站目录下执行以下命令：
npm install --save hexo-deployer-git # 安装 git 插件 git config --global user.email <gitee_user_email> # 将 gitee 邮箱设置为全局邮箱 git config --global user.name '<gitee_user_name>' # 将 gitee 用户名设置为全局用户名 hexo deploy # 上传到 gitee 仓库，部署网站 -
第一次上传仓库时会弹出窗口，要输入 Gitee 邮箱和密码；
-
在仓库页面选择，服务->Gitee Pages 启用静态网页服务，成功启用后会显示网站地址；
-
得到网站地址，形如
https://用户名.gitee.io/仓库名，修改网站的_config.yml，指定 url 与 root：url: https://用户名.gitee.io/仓库名 root: /仓库名/ -
在网站目录下执行以下命令，更新 Hexo 静态网页代码，并上传到 gitee 仓库：
hexo clean # 清除缓存文件 (db.json) 和已生成的静态文件 (public) hexo g # 生成静态文件 hexo d # 部署网站 -
在 Gitee 网页上更新网站。
托管网页需完成实名认证。
Hexo 使用
常用命令：
# 新建一个网站，如果没有设置 folder，Hexo 默认在目前的文件夹建立网站
hexo init [folder]
# 生成静态文件
hexo generate
hexo g
# 等效于 hexo clean && hexo generate && hexo deploy
hexo g -f -d
hexo g -fd
# 启动服务器，-p 重设端口
hexo server
# 部署网站
hexo deploy
hexo d
# 清除缓存文件 (db.json) 和已生成的静态文件 (public)
hexo clean
# 显示 Hexo 版本
hexo version
# 创建新文章或新页面
# layout: post, page, draft
# post_dir: ./source/_posts
# page_dir: ./source
# draft_dir: ./source/_drafts
# layout 不填使用 _config.yml 的 default_layout，默认为 post
hexo new [layout] "<title>"
常用配置：
# 标题
title: Hexo
# 作者
author: John Doe
# 新建文件时将创建同名文件夹，方便存放图片等资源文件
post_asset_folder: true
主题使用
常用命令：
# 安装主题
npm install --save hexo-theme-fluid
# 更新主题
npm update --save hexo-theme-fluid
常用配置：
# 页面头图，可使用本地图片相对路径，或外站链接
# 本地对应存放在 ./source/img/default.png
banner_img: /img/default.png
# 头图高度，屏幕百分比，0 ~ 100
banner_img_height: 100
# 头图黑色蒙版透明度，0 ~ 1.0，1 是完全不透明
banner_mask_alpha: 0.3
# 用于浏览器标签的图标
favicon: /img/fluid.png
# 博客标题，页面左上角
navbar:
blog_title: 博客标题
# 导航菜单
# key 用于关联有语言配置，不关联则显示本身值
# link 跳转链接
# icon 图标，可省略
# name 强制名称，无视语言配置，可省略
navbar:
menu:
- { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
- { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
- { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill', name: '联系我' }
# 二级下拉菜单
menu:
- {
key: '文档',
icon: 'iconfont icon-books',
submenu: [
{ key: '主题博客', link: 'https://hexo.fluid-dev.com/' },
{ key: '配置指南', link: 'https://hexo.fluid-dev.com/docs/guide/' },
{ key: '图标用法', link: 'https://hexo.fluid-dev.com/docs/icon/' }
]
}
# 首页副标题的独立设置
index:
slogan:
enable: true
text: "An elegant Material-Design theme for Hexo"
# 首页副标题的打字机动效
fun_features:
typing: # 为 subtitle 添加打字机效果
enable: true
typeSpeed: 70 # 打印速度
cursorChar: "_" # 游标字符
loop: false # 是否循环播放效果