Hugo 博客文章添加图片的一种方式

今天将博客从 chenyangguang.github.io 彻底迁移到自己的独立域名 https://gitvim.com 下。费了一点时间。 特别是添加图片的一块,找了一下网上的文档,没看出是怎么构造 hugo 的图片文件夹的,以及怎么引入这些图片。

hugo new site gitvim.com

加 static 目录

创建新的 hugo 项目时, 并没有什么 static 目录产生的。

λ ~/mygo/src/github.com/chenyangguang/gitvim.com/ master* tree -L 1
.
├── config.toml
├── content
├── public
├── resources
└── themes

需要自己手动创建一个 static 目录,然后规划好自己的图片的路径,我是打算自己博客的图片(如gzh.png)都放在 static/images 目录下。

λ ~/mygo/src/github.com/chenyangguang/gitvim.com/ master* mkdir static/images -p
λ ~/mygo/src/github.com/chenyangguang/gitvim.com/ master* tree -L 2
.
├── config.toml
├── content
│   ├── about
│   ├── archives.md
│   └── posts
├── public
│   ├── about
│   ├── archives
│   ├── categories
│   ├── css
│   ├── images # 这里就是static/imags目录下的文件
│   ├── index.html
│   ├── js
│   ├── page
│   ├── posts
│   ├── tags
│   └── true
├── resources
│   └── _gen
├── static
│   └── images  # 这个是新增的
└── themes
    └── maupassant

这样, 当我们在 hugo 博客根目录下执行 hugo 命令,生成 public 目录下各个文件时,static 文件夹中的所有东西都会放到 public 里面去。

引用图片

线上怎么引入 public/images 目录的图片? 比如 content/about/index.md 或者中 content/posts/index.md 引入 public/images/gzh.png, 在 markdown 格式的文章中使用

![](/images/gzh.png)

这样, 图片就加好了。 试试。

扫码关注公众号: