废话不多说，直接上教程：

1.环境与工具准备

教程面向Windows用户

操作系统：Windows11

Sublime Text文本编辑

GitHub账号

Node.js

Git

2.Github注册与创建仓库

进入官网，点击右上角Sign up进行注册

填写自己的邮箱、密码、用户名等信息，然后用邮箱验证即可完成

注册完成后，点击右上角+按钮，选择New repository

创建一个名称为用户名.github.io的仓库

必须为**<用户名>.github.io** (注意：前缀必须为用户名，不然会404报错）

勾选 Initialize this repository with a README 初始化一个 README.md 文件

点击 Creat repository 进行创建

3.Node.js的安装

打开Node官网，下载和自己系统相配的Node的安装程序，否则会出现安装问题 下载地址

安装完成后打开 cmd，输入

1

node -v

如果出现版本号代表安装成功

修改npm源。npm下载各种模块，默认是从国处服务器下载，速度较慢，建议配置成淘宝镜像

打开cmd窗口，运行命令

1

npm config set registry https://registry.npm.taobao.org

4.安装Git

进入官网

由于官网下载太慢可以通过淘宝的开源镜像下载 网址

下载后无脑下一步即可，安装目录可以默认，可以自选

在桌面右键，出现Open Git Bash here即代表安装成功

5.安装Hexo

安装之前在电脑一个位置新建一个文件夹，进入文件夹右键点击 git bash here

打开 hexo 官网复制下面的命令

1

npm install -g hexo-cli

输入hexo -v验证是否安装成功，出现版本号即代表成功

5.1.主题配置

安装主题之前务必要把 5 完成

在5创建的文件夹下执行

1
2
3
4

hexo init blog   #初始化博客文件夹
cd blog          #进入博客文件夹
npm install      #安装相关依赖
hexo s           #启动本地服务器，默认地址 http://localhost:4000

5.2.博客的目录结构

1
2
3
4
5
6
7
8
9
10

.
├── _config.yml # 博客网站生成时需要用到的插件的配置文件
├── db.json # 网站数据
├── node_modules # 类库
├── package-lock.json # 该博客网站生成需要的依赖项
├── package.json # 博客网站生成需要的全局依赖项，执行npm install指令可以安装这些依赖项
├── public # 博客网站的静态文件，会把该文件夹发布到远程服务器
├── scaffolds # 新建一篇文章时的front-matter用到的模板，front-matter是后面静态文件生成时，文章显示参数的设置，包括文章标题，新建日期，标签等
├── source # 里面存放着博客编写的文章
└── themes # 博客用到的主题资源库

5.3.博客内容更新

1
2
3
4
5
6
7
8
9
10
11

hexo new [post] new_paper # 创建一篇新的文章，会在/source/_posts中生成new_paper.md

hexo new page new page # 生成一个新的页面，会在/source中生成new_page文件夹，又来存放该页面的文章
hexo new new_page new_paper # 在新的页面中生成一篇新的文章

hexo new draft new_draft # 生成一篇草稿，这个仅自己可见，不会出现在正式网站上
hexo publish draft new_draft # 将草稿发布到post页面

hexo clean # 清除以往生成的博客网站数据，非必须
hexo g # 生成网站
hexo s # 启动本地服务器，默认地址 http://localhost:4000

浏览器中输入 http://localhost:4000 即可访问刚刚建好的博客，当然，现在这个博客是破破烂烂的，还需要下面进行添砖加瓦

5.4博客主题选择

默认的模板是 landscape，看起来 low low 的，有必要自定义一个定制化的主题。官方的主题库中有不少精美的模板，可以根据喜好挑选一个

6.主题安装

我用的是fluid,安装命令为

1

npm install --save hexo-theme-fluid

命令因人而异 需要按照自己挑选的主题配置教程来

6.1 _config.yml 文件的其它修改建议

请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）

建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示

如果你是中文用户，则建议修改 language 的值为 zh-CN

6.2主题目录的文件结构

1
2
3
4
5
6
7
8
9

themes
└── matery
    ├── LICENSE
    ├── README.md
    ├── README_CN.md
    ├── _config.yml # 主题的配置文件
    ├── languages # 默认是英文显示，若要其他语言显示，则需要在此添加对应语言的翻译规则，需要修改语言时，修改 /_config.yml 中的 “language:” 这一项
    ├── layout # 页面js文件
    └── source # 图片等资源存放目录，这个目录对应为生成的静态网站的root路径

在主题文件的根目录下，也有一份 _config.yml 文件，博客根目录下的 _config.yml 是全局配置，优先级较高，主题的配置文件是全局配置的补充，可按需备份

6.3主题项配置

1
2
3
4
5
6

hexo new page "categories"
hexo new page "tags"
hexo new page "about"
hexo new page "contact"
hexo new page "friends"
hexo new page 404

配置指南 | Hexo Fluid 用户手册 (fluid-dev.com)

7.环境配置

配置用户名和邮箱

1
2

git config --global user.name "你的用户名" 
git config --global user.email "你的邮箱"

通过 git config -l检查是否配置成功，现在git安装及配置全部完成

8.连接至Github

8.1.执行以下命令生成ssh公钥，它用于你的计算机连接Github

1

ssh-keygen -t rsa -C "你的邮箱"

然后敲4次回车（Enter）⌨️

输入

1

cat ~/.ssh/id_rsa.pub

可快捷查看密钥

复制从ssh开始的全部字段，或生成之后打开C盘用户文件夹下的.ssh文件夹，有一个名为id_rsa.pub的文件，用编辑器打开，复制里面所有内容，然后开始在github中配置ssh密钥

生成密钥过程中，如果C盘路径下存在中文，可能会导致密钥生成失败，可使用windows的powershell，或去通过超级管理员更改C盘下中文文件名

8.2.将 SSH KEY 配置到 GitHub

进入github，点击右上角头像 选择Settings，进入设置页后选择 SSH and GPG keys，名字随便起，公钥粘贴填到Key一栏

验证鉴权结果

在git bash中输入

1

ssh -T git@github.com

回车，然后再输入yes

出现连接到账户的信息

You've successfully authenticated, but GitHub does not provide shell access.

说明已经大功告成，本地 Git 仓库和 GitHub 仓库已经成功通信，至此完成了环境准备工作。

如果出现ssh: connect to host github.com port 22: Connection refused

可以查看教程更改端口 教程1 教程2 可以解决SSH连接超时等问题

开源项目Github520

通过修改Host文件的方法解决访问速度慢的问题

1
2
3

# 任选其一即可
ping github.com
ssh -T git@github.com

检查是否有加速器 有可以退掉

9. 将静态博客挂载到 GitHub Pages

安装 hexo-deployer-git（自动部署发布工具）

1

npm install hexo-deployer-git --save

其中 --save 会把依赖项添加进 package.json 文件中，新安装的插件源文件在 /node_modules/plugins-name，插件安装其实就是下载了一套模板，这些模板大多是一些 js 文件。其运行机制就是在生成网站的静态文件时，会根据 /_config.yml 中设置的参数，生成对应的 js 文件，在指定的位置插入或替换这些 js 文件

修改 _config.yml 文件
在blog目录下的_config.yml，就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述。
修改最后一行的配置，将repository修改为你自己的github项目地址即可，还有分支要改为main代表主分支（注意缩进，要有空格）

地址获取：去github之前生成的仓库页面，点code，复制SSh链接

将其粘贴到repository：后面然后保存退出

1
2
3
4
5
6
7

deploy:
  type: git
  repository: git@github.com:Fomalhaut-Blog/Fomalhaut-Blog.github.io.git
  branch: main
   # 当有多个服务源时以下设置
   # github: git@github.com:/YourgithubName/YourgithubName.io.git,master
   # gitee: git@gitee.com:/YourgithubName/YourgithubName.git,master

修改好配置后，在Blog文件夹右键打开git bash，运行如下命令，将代码部署到 GitHub

1
2

hexo clean && hexo generate && hexo deploy  // Git BASH终端
hexo clean; hexo generate; hexo deploy  // VSCODE终端

• hexo clean：删除之前生成的文件，若未生成过静态文件，可忽略此命令。

• hexo generate：生成静态文章，可以用hexo g缩写

• hexo deploy：部署文章，可以用hexo d缩写

• 如果出现Deploy done，则说明部署成功了。

  稍等两分钟，打开浏览器访问：https://用户名.github.io ，这时候我们就可以看到博客内容了

  解决hexo报错spwan failed 教程1 教程2 教程3

网站资料

blog文件夹中的_config.yml #Site下面按自己的需求填上

1
2
3
4
5
6
7
8

## Site
title: 标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 站主
language: 语言（可以填写zh-CN）
timezone: 时区（可以填写Asia/Shanghai）

如何上传文章

我们在Blog文件夹中打开git bash,输入下方代码就可以生成新的文章md文件

1

hexo new 文章标题

文章是.md格式，在我们的Blog文件夹中的source/_posts中

写好以后，我们还是一样打开git bash生成、上传 hexo g hexo d

至此，我们就成功搭建好基本的博客了，剩下的就是对博客的一些优化和美化了

Hexo博客搭建基础教程(一) | Fomalhaut🥝

Hexo+github+飞书，手把手从0搭建博客 | 北冥有鱼 (xrh.asia)