1.hexo 安装

安装前需要准备好npm环境

安装hexo客户端
npm i hexo-cli -g  #
在空白文件夹下穿件hexo项目
hexo init
项目运行
hexo s [-p 5000]

2.主题安装

​ 选择主题时浪费了很多时间, 主要研究了steller, butterfly主题,我需要的是一个简单配置就能使用的博客,不需要在页面配置上浪费大量精力. 或许以后熟练使用hexo了 可以考虑研究下.

​ 最后选定了 matery 主题, 安装时会有些小问题

主题安装

git clone https://github.com/blinkfox/hexo-theme-matery themes/matery

我安装上述方式安装,最后部署githubpage时 部署失败.

git clone https://github.com/blinkfox/hexo-theme-matery.git

最后采用了在github 下载压缩包 然后 复制解压到 themes 文件夹下的方式安装主题

image-20240703180115686

主题设置按照matery 教程中设置, 实现了文章全文搜索,和文章字数统计.

评论设置一直有问题,未能解决,

3.github 部署

githuppage准备

注册githup 账号  创建github仓库 仓库名称必须设置为  你的名字.github.io (liudongsir.github.io)
如果是单纯设置博客,仓库名可以随便设置; 例如我一开始使用的hexo仓库部署
但是这么做会影响下面的图片部署.

image-20240703181034779

image-20240703181203043

插件安装

首先需要安装发布的插件， 插件发布项目需要用到 github ssh连接方式, 提前配置好ssh key

npm install hexo-deployer-git --save

项目配置

hexo 配置文件 _config.yml 设置如下图

image-20240703181034779

项目部署

# Hexo会根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
hexo d
# 也可以直接输入此命令，直接完成渲染和上传
hexo g -d

4.图片部署

图片部署参看文章 cesh 博客图片访问问题

图片部署有多种方式, 1 通过图床上传图片到oss服务器(常用),2同步图片到仓库直接访问.

我采用的方式2最终采用该方式主要因为文件名变动,该方式不需要再次调整图片路径.

方式2的参考链接

[Hexo博客搭建]第4章 Hexo图片显示问题

解决Hexo关于图片的问题

hexo博客中插入图片失败——解决思路及个人最终解决办法

一些其他解决思路

typora + hexo博客中插入图片

Hexo 文章图片管理

修改配置文件

_config.yml` 文件中的`post_asset_folder` 选项设为 `true
目的 可以生成 md文件的同名文件夹
编写博客(md)使用 typora 在偏好设置中如图设置:

image-20240703180647089

安装图片处理插件

npm install https://github.com/CodeFalling/hexo-asset-image --save
在hexo g  时可以复制图片到生成的静态文件(html) 同级目录中,并且图片路径也对应处理.

image-20240703180835748

5.参考链接

hexo+github搭建博客(超级详细版，精细入微)

Hexo+Github博客搭建教程

6.后记

博客还有很多内容可以设置

本地搜索

代码格式化

github action 自动化部署

安装matery 主题用到的其他插件

npm i  hexo-prism-plugin -S
npm i hexo-generator-search --save
npm i hexo-permalink-pinyin --save
npm i --save hexo-wordcount

本项目部署到hexosource 仓库, 博客发布到hexo仓库

back-title