参考文章

HEXO官方文档

如何优雅的使用Github Action服务来将Hexo部署到Github Pages

Hexo+Github搭建个人博客教程-CSDN博客

准备工作

安装Git

​ Windows系统下直接去到Git - Downloading Package下载安装即可。

安装Node.js

​ 直接去到Node.js下载网页，它提供了针对不同操作系统和用途环境的安装指令，直接复制对应指令到本地Shell上执行即可。

安装Hexo

​ Hexo 是一个基于 Node.js 的静态博客框架，可将 Markdown 文件快速渲染成静态网页。用户通过编写 Markdown 和配置主题模板，即可生成轻量、高性能的个人博客或文档站点。Hexo 支持插件扩展，并可一键部署到 GitHub Pages 等平台。

​ 通过上面Node.js提供的包管理工具在Shell里面执行$ npm install -g hexo-cli

Github仓库

​ 如果你也准备将你的博客部署到Github上面，那么你需要提前建立一个Github仓库用来挂载你的博客。

​ 如下将仓库名设置为username(你的github账户名).github.io，并将仓库设置Public状态即可。

​ 注意此处乃至全文的username都是你GitHub账户名字1

至此，通过上述步骤就准备好了我们所需要的相关工具。

初始化Hexo

  • 在初始化之前，为避免无法访问导致相关依赖库安装失败，我们可以镜像源切换为淘宝源
1
npm config set registry https://registry.npmjs.org
  • 在本地对应文件夹下单击鼠标右键打开Git bash here
1
2
3
hexo init test_blog   //通过hexo初始化博客框架文件
cd test_blog	      //进入到该文件夹下面
npm install 		  // 安装所需依赖
  • 若你在通过Git bash安装依赖的时候发送以下错误后，是因为权限不够，在此选用通过以管理员身份打开CMD并进入到博客框架对应的文件夹下面重新执行依赖安装指令

2

  • 完成上述初始化操作过后，你的test_blog文件下面是这样的

3

Hexo生成静态文件本地访问

  • 进入到上面Hexo初始化的文件后打开Git bash，通过Hexo工具生成静态HTML文件并进行本地端口访问
1
2
hexo g	// 生成静态文件
hexo s	// 启动本地开发服务器

4

Git生成密钥建立与Github的连接

  • 在Git bash终端输入ssh-keygen -t rsa指令多次点击回车键即可生成密钥对，进到/C/Users/lenovo/.ssh文件下面，复制id_rsa.pub里面的内容
  • 在github设置里面新建SSH key，title随意，将上面得到的公钥粘贴到Key文本框中即可（若你之前已经建立了本地git与github密钥对连接可忽略这步）

5

  • 然后可以通过Git bash 测试ssh是否绑定成功：```ssh -T git@github.com``

6

修改 _config.yml文件

  • 在Hexo初始化生成的文件根目录下面找到 _config.yml 配置文件，打开在文件末尾修改如下内容
1
2
3
4
deploy:
  type: 'git'
  repository: https://github.com/github用户名/新建仓库名.github.io.git
  branch: main

7

  • 通过修改上面配置文件，指定了如何将生成的静态博客发布到远程Github仓库，具体来说，deploy 配置项告诉 Hexo 如何将生成的静态文件（HTML 文件等）推送到 GitHub Pages 或其他支持 Git 部署的服务

将本地博客文件上传部署到Github仓库

  • 首先在Hexo初始化的文件根目录下面通过管理员模式的CMD安装自动部署工具hexo-deployer-git
1
npm install hexo-deployer-git --save
  • 在Hexo初始化的文件根目录下面打开Git bash，通过如下指令进行部署发布
1
hexo d

8

  • 如上图成功部署至你建立的Github仓库，现在可以通过Username.github.io来访问你部署上线的博客网站啦

主题渲染

  • 为了让你的博客页面更加炫酷、美观，可以下载不同主题进行渲染处理，此处推荐我所使用的主题butterfly，及其对应的文档教程Butterfly 文档

安装Admin管理工具

  • 在你博客框架根目录下面通过管理员身份运行CMD，然后输入如下指令即可安装admin管理工具
1
2
npm install --save hexo-admin	// 安装admin管理工具
hexo s							// 本地挂载启用

9

  • 为了安全，不能让所有人访问这个地址都能够有admin的权限，我们需要添加用户名与密码，在localhost:4000/admin/网站中点击右上角的settings，然后点击下面的 Setup authentification here ，然后如下页面按步骤设置将adminauthentification信息复制粘贴到_config.yml文件最后，然后保存后重新运行hexo

10

结语

​ 至此，属于你的一个博客网页就搭建好啦，笔者也是技术小白，也是跟着大佬们的文章学习完成的，该文章记录了作者从环境到部署上线的整个实践历程，分享出来希望能够对你有所帮助，若有技术或者表达描述上的错误，望理解包容