前置环境

安装与配置

安装hexo

安装hexo脚手架

使用以下命令安装hexo-cli

1
npm i -g hexo-cli

安装成功显示：
image-20240408225038274

初始化hexo

使用以下命令初始化博客结构

1
hexo init

常见问题：

  • 未以管理员身份运行

  • 报出安装依赖失败问题，npm install之后报错Log files were not written due to an error writing to the directory,解决方案参见npm ERR

  • 环境变量配置错误：

    注意：无论如何配置环境变量，必须在系统变量中有一条指向hexo位置的路径，即文件夹中包含如下文件，缺少某一个会导致在cmd、powershell、git bush的某一个中运行时找不到hexo命令

    image-20240408231036971

初始化成功：

image-20240408235303522

开启本地hexo服务

控制台运行命令：

1
$ hexo server

运行成功在本地开启hexo服务，默认占用4000端口

配置hexo

hexo目录功能如下：

  • scaffolds：模板文件夹，存放博客文档排版的模板
  • source：
    • _posts：文章文件夹，所有的markdown文档都放在这里
  • themes：下载的主题存放在这里
  • _config.yml：全局配置

config全局配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 全局相关
title: alcohol_js #网站标题
subtitle: '举目见日，不见长安' #副标题
description: '' #描述
keywords: #关键字
author: Wang #作者
language: zh-CN  # en|zh-CN

# github一键部署相关配置
url:  https://alcohol-js.github.io/ #访问的url地址，从你的github仓库设置中的page页查看

deploy:
  type: git # 固定该值
  repo: git@github.com:alcohol-js/alcohol-js.github.io.git # github 仓库地址
  branch: gh-pages # 固定该值
  message: update # 随意
  
#主题配置
theme: butterfly #当前主题名称。值为false时禁用主题

使用hexo

新建文章

新建空文章

  1. 使用如下命令，在项目的source\_post文件夹下生成文章标题.md文件，文章标题自定义：

    1
    $ hexo new "文章标题"

  2. 使用markdown编辑器编辑生成的md文档并保存

  3. 将写好的文章推送到服务器

    1
    2
    $ hexo g  
    $ hexo d

发布以前编辑好的md文件

  1. 将文章保存到项目的source\_post文件夹下

  2. 在文件的开头编辑Front-matter

  3. 在博客根目录下打开命令行，输入以下命令

    1
    2
    $ hexo g  
    $ hexo d

Front-matter

Font-matter是md文件上方以---分分隔的区域，用于指定个别文件的变量，比如下面这个例子：

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

一些常见变量及其默认值

image-20240410220627220

为文章添加分类、标签

创建分类选项

生成分类页并添加type属性

打开命令行，进入博客所在文件夹，执行以下命令：

1
$ hexo new page categories

执行成功后会显示创建页面的路径，根据路径找到index.md文件，在其Front-matter区域添加type属性：

1
2
3
4
5
---
title: categories
date: 2024-05-27 21:57:50
type: "categories"
---

添加后保存文件并关闭。

给文章添加categories属性

打开需要添加分类的文章，在其Front-matter区域添加categories属性，一篇文章只能属于一个分类，分类可以嵌套，不可以并列

1
2
3
4
5
---
title: hexo博客使用教程
categories:
- hexo使用教程
---

创建标签选项

生成标签页并添加type属性

打开命令行，进入博客所在文件夹，执行以下命令：

1
$ hexo new page tags

执行成功后会显示创建页面的路径，根据路径找到index.md文件，在其Front-matter区域添加type属性：

1
2
3
4
5
---
title: tags
date: 2024-05-27 22:10:13
type: "tags"
---

添加后保存文件并关闭。

给文章添加tags属性

打开需要添加分类的文章，在其Front-matter区域添加tags属性，一篇文章可以有多个分类

1
2
3
4
5
---
title: hexo博客使用教程
tags:
- hexo
---

远程部署到github

创建仓库

仓库名必须遵循用户名.github.io的规范

image-20240409021443007

设置url和deploy

1
2
3
4
5
6
7
url:  https://alcohol-js.github.io/ #访问的url地址，从你的github仓库设置中的page页查看

deploy:
  type: git # 固定该值
  repo: git@github.com:alcohol-js/alcohol-js.github.io.git # github 仓库地址
  branch: gh-pages # 固定该值
  message: update # 随意

部署

安装插件

第一次部署需要安装插件

1
npm install hexo-deployer-git --save

开始部署

  • 确认ssh公钥正确，如出现问题请参见公钥

hexo clean：清除上次编译结果

hexo deploy：一键部署到GitHub

注意：请把你的网站构建页面依赖分支设置为_config.yml配置中的分支名称：

image-20240409030008830

仓库默认分支设置为_config.yml配置中的分支名称：

image-20240409030059232