Hexo-Blog搭建教程

HIC Dev Group Lecture 2

在思考如何搭建个人博客时，我决定采用了Hexo+Github Pages的方案。

• 纯静态资源网站，只需修改前端样式和资源文件
• Github托管，免费且易于维护（但有个问题是服务器在国外加载慢）
• Hexo提供了优秀的博客模板和便捷的命令行

参考资料

官方文档：配置 | Hexo

大佬的博客1：Hexo+Github搭建个人Wiki风格博客 | Blogs

大佬的博客2：[三万字教程]基于Hexo的matery主题搭建博客并深度优化一站式完全教程

基本搭建

遵循以下三个原则

• 理解项目的文件组织结构
• 善于使用控制台和AI纠错
• 参考他人发布的搭建经验

工具配置

搭建博客过程中，需要利用npm下载相关包，用git上传到指定仓库。

• Node.js
• git

具体如何安装配置使用请自行搜索CSDN，不要跳步。

项目部署

1.在Github上创建一个仓库并取名为 用户名.github.io

2.准备一个空文件夹，在文件夹里打开终端，使用npm一键安装 Hexo博客程序

npm install -g hexo-cli

3.进行Hexo初始化

hexo init 

4.使用npm安装package.json里面的依赖

npm install

5.安装用于部署的包hexo-deployer-git

npm install hexo-deployer-git --save

6.修改_config.yml文件末尾的Deployment部分（善用查找！注意缩进！）

这里建议大家用SSH配置，可以避免网络问题。

Hexo使用SSH连接GitHub_hexo的ssh连接github-CSDN博客

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: main

博客内容

主题

我选择的是matery，大家也可以去搜索自己喜欢的主题。具体安装视官方文档而定，大部分可以这么安装。

# 主题/插件检索
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# 主题设置
theme: hexo-theme-matery

# 定位到主题文件夹
cd <Your Folder>/themes
# 复制你选的主题仓库（示例）
git clone https://github.com/blinkfox/hexo-theme-matery.git 

随后，请修改主文件夹下的_config.yml的theme。

有两个_config.yml？

主文件夹下的yml控制的是全局配置，比如前文提到的仓库上传。而主题文件夹下的yml控制的是主题引入的配置，比如是否开启背景音乐功能。

公式

由于上传的博客是markdown格式，因此需要配置markdown内容的呈现。

1.安装Pandoc

去Pandoc官网下载最新版本：Pandoc - About pandoc

2.卸载/安装部分插件

npm uninstall hexo-math
npm uninstall hexo-renderer-marked

npm install hexo-renderer-pandoc

3.配置主题配置下的mathjax设置

# MathJax
mathjax:
  enable: true
  per_page: true

安装完将_post里的md文件写入公式测试即可，注意文件开头有mathjax: true。

Note

我按这样操作渲染貌似有点bug，我这边灵光一现试了一下每个公式都打换行符\\可以避免。根本解决方案应该要修改底层代码或者安装其他插件，如果大家出现问题可以自行搜索。

图片

修改_config.yml如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

在文件夹下打开终端，使用hexo new [layout] <title>命令创建一篇新文章（也可以手动创建），此时会在source/_post目录下创建一个同名的文件夹和md文件。接着可以把所有该文章有关的资源文件都放在同名的目录中，在md文件中使用引入格式![image1](image1.png)即可引入图片（如果是网络资源引用网址即可）。

四大命令

hexo clean # 清除生成的网页文件
hexo g     # 生成静态网页
hexo s     # 本地运行博客
hexo d     # 将网页文件推送至远程服务器

内容修改

建议使用你的AI Editor迅速定位修改点/问题点，用LLM没法统筹项目！

静态资源

首先，配置文件一定要修改！无论是板块的激活（例如about）还是跳转链接，许多都需要修改配置文件。

上传的文档在/source/_post中修改，注意文档开头需要配置属性。

网站的图片资源会在主题的静态资源目录下，定位完成后替换即可。

样式呈现

虽然主题的样式编写已经非常完善，但不可避免有我们想要DIY的部分。

Hexo采用的是简单的HTML+CSS+JavaScript的前端三件套结构，并用.yml文件进行配置。有前端基础的同学可以试着改改代码，没有的话试着调教下AI（比如：请把导航栏改成蓝色）。

问题记录

渲染报错

Uncaught TypeError: $(...).lightGallery is not a function

Uncaught：$(.).lightGallery不是函数-腾讯云开发者社区-腾讯云

把所有本地硬编码替换成cdn，包括_config.yml里的lib和main-style.ejs/layout.ejs的引用。

lightgallery:https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.10.0/css/lightgallery.css

<script src="<%- theme.libs.js.lightgallery %>"></script>

<link rel="stylesheet" type="text/css" href="<%- theme.libs.css.lightgallery %>">