利用Hexo搭建个人博客

Hexo 是一个基于 Node.js 的静态博客框架，可以帮助用户快速搭建个人博客网站。使用 Hexo，可以使用 Markdown 语法编写文章，然后将其转换为静态 HTML 页面，最后发布到网站上。

快速入门

新建项目

npx init

项目的大致目录结构如下：

其中，_config.yml 是项目的配置文件，source 目录存放源文件，themes 目录存放主题文件，public 目录存放生成的静态文件。scaffolds 目录存放模板文件，默认有三个模板文件：draft.md、page.md、post.md，分别对应草稿、页面、文章。文章就是一般意思上的一篇博客，页面则是一些静态页面，比如关于页面、友情链接页面等。所谓模板则是指执行hexo new 命令时，会根据模板文件生成对应的文件，即填充模板文件中的内容。

_config.yml 文件是全局配置文件，可设置网站标题，作者，描述，主题，部署等信息。

新建博客

hexo new "My New Post"

执行hexo new [layout]命令可以新建草稿，文章或页面，layout也即新建内容的类型(草稿，文章或页面)，默认为post，即新建文章。执行该命令后，会在source/_posts目录下生成一个My New Post.md文件，其内容如下：

---
title: My New Post
date: 2023-10-21 11:11:33
category: example_category
tags:
    - tag1
    - tag2
---

category为文章分类，可理解为文章所在的目录，tags为文章标签，date为文章创建时间，title为文章标题。在该文件中以markdown语法书写博客，更多信息可参考官方文档

主题设置

Hexo提供了一些默认主题，可在themes目录下找到，也可以在官方主题库中找到更多主题。下载到themes文件夹下，在全局_config.yml文件中修改theme字段为主题名称即可。这里题主使用的是Fluid主题，根据其官方文档进行配置即可。

图片引用

在markdown中引入图片时，可以使用图床也可以使用本地文件。如果使用本地文件，需要将图片放在source/images目录下，然后在markdown中使用相对路径引用即可。也可以针对每个文章单独建立一个目录，将图片放在该目录下，然后在markdown中使用相对路径引用，这种情况需要在_config.yml文件中设置post_asset_folder: true，这样在执行hexo new命令时，会在source/_posts目录下为每个文章新建一个同名目录，该目录下存放文章的图片。

题主推荐使用插件hexo-render-marked，该插件支持直接解析markdown语法的图片引用，即可以直接使用![image](./image.png)的方式引用图片，而不需要使用{% asset_img image.png %}的方式引用图片。

安装hexo-render-marked后，在全局_config.yml文件中添加如下配置，当然此处需要保持post_asset_folder: true，否则无法解析图片引用。其解析原理可参考官方仓库Readme中的说明。

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

hexo-render-marked默认只能解析![image](image.png)的方式引用图片，如果想要支持![image](folder/image.png)的方式引用图片，可参考issue，在node_modules -> hexo-render-marked -> lib -> render.js文件中修改代码即可。

在VScode中编写markdown文件，如果直接粘贴图片，则默认图片会保存到当前markdown文件的同级目录下，而我们想要效果是图片保存到与文件名同名的目录下，此时可以修改VScode的设置项markdown.copyFiles.destination，可以自定义不同的markdown文件的图片保存目录。

比如此处做如下设置，则图片会保存到与markdown文件同名的目录下。*代表通配符，即当前设置适用于所有markdown文件，详情可参考VSCode 中自定义 Markdown 插入图片的保存路径。

{
    "markdown.copyFiles.destination": {
        "*": "${documentBaseName}/",
    }
}

网站部署

在_config.yml文件中设置deploy字段，可将网站部署到GitHub Pages，也可以部署到其他平台，比如Coding Pages，Netlify等。此处以GitHub Pages为例，首先需要在GitHub上新建一个仓库，仓库名为<username>.github.io，其中<username>为GitHub用户名，然后在_config.yml文件中添加如下配置：

deploy:
  type: git
  repo: 
    github: <username>/<username>.github.io
    branch: master

然后执行hexo clean命令清除缓存，执行hexo deploy命令部署网站，即可将网站部署到GitHub Pages上。