操作环境

1. Windows10
2. Hexo
3. Github

问题

  为了实现上传图片的功能，将Hexo主页的配置文件(_config.yml)中的post_asset_folder值修改为true后，在Hexo目录下执行

1

npm install hexo-asset-image --save

安装了一个上传本地图片的插件，该插件会在创建新的文章时同时创建一个同名的文件夹用来存放图片

  文档中采取的加载图片的代码为

1

![](文章名/图片名.png)

  我是用上述方法向文章中添加图片时出现本地无法加载的情况，在localhost:4000或是我部署到Github上的博客中都只能显示出一个小方框，无法读取图片。

分析问题

  因为在网页上还能显示一个小方框，只是不能加载图片，所以可以得出大致的问题出在路径上。
  通过观察GitBash在生成静态文件时返回的信息可得知图片路径的解析情况如图

其中 zhuomian.png 为目标图片，Hexo博客搭建为存放文件夹，其余部分为解析后加上去的，这个路径理所当然是加载不出图片的。

解决方案

  考虑到路径的解析可能会受配置文件控制，于是在配置文件中找到了相关的信息

以上为错误配置路径，于是我尝试把url修改成我自己的网址

之后再次生成静态文件后更新的链接看上去就正常了

再次部署之后，博客文章图片就加载正常了。

总结

  这个问题的解决方案并不完美，因为如果在部署之前先启动本地服务在localhost:4000上预览文章仍然无法加载图片，原因应该是部署过程中图片被上传到了github，新的图片路径指向的是github中图片的路径，但是经过测试发现在断网的情况下也能加载已经部署过的图片，所以这个解决方案暂时没有明显问题。

操作环境

1. Windows10
2. Nodejs v10.16.0
3. Hexo
4. Git v2.22.0

环境安装

Nodejs

建议官网安装，此处选择的是LTS版本（10.16.0），安装成功后在命令行输入:

1
2

node -version  # 查看Nodejs版本号
npm -version  # npm是随同Nodejs一起安装的包管理工具

确认两项都成功安装即可。

Git

建议官网安装，当前安装版本为(v2.22.0)，安装成功后在命令行输入:

1

git --version

获取git版本并确认安装成功。

Hexo

使用命令行:

1

npm install hexo-cli -g

安装Hexo，通过

1

hexo -v

确认安装并且可以得知Hexo是基于Nodejs的。

注意事项

安装Nodejs和Git后要将它们添加进系统环境变量中，如图所示：

使用Hexo搭建博客

创建本地目录

1. 新建一个文件夹，假设取名为Blog
2. 通过GitBash进入该文件夹，使用命令

   1	hexo init # 初始化一个博客

该指令会自动Clone所需文件，结果如图

启动博客

使用命令

1

hexo s  # 启动服务

博客会在localhost:4000被启动

新建文章

使用命令

1

hexo new (文章名)

在 /source/_posts 生成文章，文章可以直接在本地用Visual Studio Code等软件以Markdown的语法编辑。

更新博客

使用命令

1
2
3

hexo clean  # 清除缓存文件
hexo g  # 生成静态文件
hexo s  # 启动服务器

即可在localhost:4000中查看更新的文章

部署到Github

新建仓库

新建一个Repository，必须以“用户名.github.io”的格式命名

安装插件

使用命令

1

npm install --save hexo-deployer-git

安装插件使博客可以部署到Github

编辑配置文件

编辑Blog目录下的文件_config.yml(可以使用Vim, notepad++等)

部署

使用命令

1

hexo d  # 部署

就会自动部署到github，可能会要求输入github的账号和密码，也可以通过SSH完成Git与Github的绑定。
部署成功后本地文件会上传到Github的仓库里，直接通过仓库名作为地址就可以访问，到此已经部署成功。

总结

  这次搭建实验总体顺利，文中有部分内容没有具体讲到，例如Git与Github的绑定，读者都可以在网上找到相应的教程，感谢B站UP主CodeSheep的讲解视频，更多细节可以参考上述视频。