【声明】本博客所有内容均为个人业余时间创作，所述技术案例均来自公开开源项目（如Github，Apache基金会），不涉及任何企业机密或未公开技术，如有侵权请联系删除
背景
上篇 blog
【Ubuntu】【Hugo】搭建私人博客：Hugo&PaperMod 兼容问题
分析解决了 Hugo 和 PaperMod 的兼容性问题，并搭建好了 blog 站点，并在 PaperMod 主题下，添加了第一篇 blog，下面继续
搭建私人博客
私人博客的写作结构为 VSCode + Hugo，其结构大致如下：
下面推荐一些 VSCode 插件和 VSCode 配置，以便增强写作体验，核心插件有
-
Markdown All in One ：提供自动补全，快捷键支持等功能 ，比如
Ctrl + B（加粗），Ctrl + I（斜体），Ctrl + K（插入链接），写博客时需要频繁用到标题，列表，引用，代码块等，手动敲符号效率低，使用该插件可以大幅提升写作流畅度
-
Markdown Preview Enhanced ：所见即所得，提供实时预览和导出能力，通过
Ctrl + K V可以打开双栏实时预览（当然也可以通过 Hugo 去实时看更改，只要保存下文件即可）
OK，介绍完插件，再介绍几个 VSCode 配置，首先是插入代码块 ，Markdown All in One 对插入代码块没有绑定默认快捷键，需要自己去绑定，在 VSCode 左下角打开快捷键绑定
搜索 Markdown All in One ，找到 toggle code block，中文名触发代码块，可以输入自己习惯的按键组合，这里选择的是 【Shift + `】 组合
然后是关于图片粘贴插入，同样是 Markdown All in One ，集成了图片插入功能，当复制了图片之后，在 Markdown 文件中按下 Ctrl + V，图片便会插入到指定位置
不过特点是图片会直接保存到 *.md 所在目录，不可以自定义路径
在终端输入
bash
nohup hugo server --bind=0.0.0.0 --port=1313 > /dev/null 2>&1 &可以让 Hugo 在后台安静运行，其中这里的命令
nohup：忽略挂断信号，终端关闭后仍可以运行> /dev/null 2>&1：丢弃所有输出，保持静默，避免信息传递到终端&：放入后台--bind=0.0.0.0：所有 IP 都可以访问--port=1313：指定1313端口可以访问 Hugo 站点
OK，粘贴图片后，发现浏览器打不开图片
这涉及到资源引用路径和 Hugo 构建机制的问题，首先 Hugo 支持下面两种文章结构
- 单文件 + 同目录图片 ：就像现在这种情况，
first-blog.md和图片在同一级目录
bash
content/posts/first-blog.md
content/posts/screenshot.png- Page Bundle（推荐） ：用目录名来来作为文章名，其中目录名（文章名）里面有个
index.md，然后图片和index.md都在同一级目录里面，结构如下
bash
content/posts/fist-blog/index.md
content/posts/first-blog/screenshot.png当用单文件 + 同目录图片 时，Hugo 默认不会把 *.md 文件同目录的图片复制到 public/
这里 public/ 文件夹是 Hugo 生成的最终可部署的静态网站目录，public/ 包含：
- 所有的 HTML 页面（由
*.md源文件渲染而来） - 所有的 CSS，JavaScript 文件
- 所有需要被浏览器访问的资源，比如图片，PDF，视频等
public/ 不包含
- 源 Markdown 文件（在
content/目录下） - 配置文件（
config.yaml，在项目根目录下） - 主题源码（
themes/，和*.md源文件一起被渲染） - 还有草稿，未来文章等（除非显式启用）
当把网站部署到 GitHub Pages，Netlify，VPS 时，只需上传 public/ 这一个文件夹即可
OK，本篇先到这里，如有疑问，欢迎评论区留言讨论，祝各位功力大涨，技术更上一层楼！！！更多内容见下篇 blog
【Ubuntu】【Hugo】搭建私人博客：Page Bundle