Hexo 博客搭建

发表于 2024-09-05 分类于工具应用， Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

安装应用

Hexo 基于 Node.js 开发，并托管在 GitHub 上，因此需要以下工具支持：

Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
Git

安装 Hexo 应用。

1	npm install -g hexo-cli

创建博客

1	mkdir test-blog

初始化 Hexo 博客，新建和下载所需要的文件。

1 2	cd test-blog hexo init

完成后，目录基本结构如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

依次执行以下命令，可以在本地预览博客。

1
2
3

hexo clean      # 清除缓存文件和已生成的静态文件
hexo generate   # 缩写hexo g，生成静态文件。
hexo server     # 缩写hexo d，启动服务器。

默认情况下，访问 http://localhost:4000 进行预览。

预览博客

配置博客

Hexo 博客的一些基本配置。

引用图片

默认情况下，可以使用 MarkDown 语法通过绝对路径在文章中引用本地或者图床中的图片。

1 2	![This is an example image](/images/example.png) ![This is an example image](https://xxx.xxx.com/images/example.png)

为了便于组织和管理图片资源，可以启用资源目录，将图片与文章放置在一起，通过相对路径进行引用。

1 2	# _config.yml post_asset_folder: true

文章与图片的目录结构如下，每篇文章对应一个同名的资源目录。

_post
├── example.md
└── example
	└── example.png

使用 MarkDown 语法或者标签插件在文章中引用图片。

1 2	![This is an example image](example/example.png) {% asset_img example.png This is an example image %}

在 hexo-renderer-marked 3.1.0 中，引入了一个新的选项，用于简化 MarkDown 引用图片的语句。

# _config.yml
post_asset_folder: true
marked:
  prependRoot: false
  postAsset: true

使用 MarkDown 语法在文章中引用本地图片。

1	![This is an example image](example.png)

部署博客

Hexo 提供了一键部署功能，可以将博客快速部署到指定服务器。

GitHub

由于通过 HTTP 方式上传至 GitHub 时可能存在问题，所以使用 SSH 方式上传博客文件。

在本地配置 Git 用户信息，并生成 SSH 密钥对。

1
2
3

git config --global user.name "<用户名称>"
git config --global user.email "<指定邮箱>"
ssh-keygen -t rsa -C "<指定邮箱>"

复制 ~/.ssh 目录下 id_rsa.pub 文件中的 SSH 公钥信息，将其添加到 GitHub 站点。

添加密钥

编辑 _config.yml 博客配置文件，修改部署相关配置。

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:<GitHub用户名>/GitHub用户名>.github.io.git
  branch: main

部署博客到 GitHub 仓库。

hexo d

等待一段时间后，可以通过 https://<GitHub用户名>.github.io 访问博客。

参考链接

文档 | Hexo