Hugo 博客简介

Hugo 是一个强大的静态网站生成器，它具有速度快、配置简单、主题丰富等特点，非常适合用来创建博客网站。本文将详细介绍如何在 Hugo 博客中撰写和发布文章。

创建新博客文章

方法一：使用命令行创建

1# 创建一篇新的博客文章
2hugo new post/article-name.md

命令执行后，Hugo 会在content/post/目录下创建一个名为article-name.md的文件，并自动添加 Front Matter（文章元数据）。

方法二：手动创建

1. 在content/post/目录下创建一个新的 Markdown 文件（.md）
2. 文件名最好使用英文，用连字符（-）替代空格，例如：my-new-post.md
3. 手动添加 Front Matter

Front Matter 详解

每篇 Hugo 博客文章开头都需要包含 Front Matter，它使用三个连字符（—）包围，用于定义文章的元数据：

 1---
 2title: "文章标题"
 3description: "文章简短描述"
 4date: 2023-04-04T10:00:00+08:00
 5image: "/images/cover.jpg"
 6categories:
 7  - 分类1
 8  - 分类2
 9tags:
10  - 标签1
11  - 标签2
12  - 标签3
13weight: 1
14draft: false
15---

常用 Front Matter 字段说明

• title: 文章标题（必填）
• description: 文章简短描述（可选）
• date: 发布日期和时间（必填）
• image: 特色图片 URL 或路径（可选）
• categories: 文章分类，可以有多个（可选）
• tags: 文章标签，可以有多个（可选）
• weight: 权重，用于排序，数字越小排序越靠前（可选）
• draft: 是否为草稿，设为 true 表示不在正式构建中发布（可选）

插入图片的多种方式

使用静态目录

将图片放在static/images/目录下，然后在文章中这样引用：

1![图片描述](/images/example.jpg)

使用 Page Bundle

在文章同名目录中存储图片：

1. 创建目录结构：content/post/my-post/index.md和content/post/my-post/image.jpg
2. 在文章中引用：![图片描述](image.jpg)

使用 Figure Shortcode

1{{< figure src="/images/example.jpg" title="图片标题" >}}

使用图床

图床是存储博客图片的在线服务，可以有效解决本地图片外链问题。使用图床有以下优势：

1. 稳定性：专业的图床服务提供稳定的图片访问链接
2. 加速访问：通常配有CDN加速，访问速度更快
3. 节省空间：不占用博客本身的存储空间
4. 便于管理：图片集中管理，易于更新和替换

主流图床选择

• Cloudflare R2：提供10GB/月免费存储，支持自定义域名，无需备案，配合PicGo使用效果佳
• GitHub：可以将GitHub仓库作为图床，免费但访问速度不稳定
• 七牛云/阿里云OSS：国内服务，速度快但需备案，有一定免费额度
• Imgur/SM.MS：免费图床服务，但可能存在不稳定因素

图床工具推荐

• PicGo：开源免费的图床上传工具，支持多种图床服务
• Typora + PicGo：可以在编写Markdown时自动上传图片
• VSCode + 插件：编辑器中直接上传图片到图床

在Markdown中引用图床图片

1![图片描述](https://your-image-hosting.com/path/to/image.jpg)

更多详细配置可参考本博客的《使用Cloudflare R2 + PicGo搭建免费图床》文章。

预览与发布

本地预览

1# 预览（包括草稿）
2hugo server -D
3
4# 仅预览正式文章
5hugo server

然后在浏览器中访问http://localhost:1313查看效果。

生成静态网站

1# 生成（不包括草稿）
2hugo
3
4# 生成（包括草稿）
5hugo -D

执行命令后，静态网站文件将生成在public目录中。

部署网站

将public目录中的内容上传到你的网站服务器，或者部署到 GitHub Pages、Netlify 等平台。

高级技巧

1. 安排发布时间

将date设置为未来时间，文章将在该时间自动发布。

2. 使用 Shortcodes

Hugo 提供了多种内置 shortcodes，可以在 Markdown 中插入复杂内容：

1{{< youtube dQw4w9WgXcQ >}}
2{{< tweet user="SanDiegoZoo" id="1453110110599868418" >}}

3. 自定义 Front Matter

你可以在 Front Matter 中添加自定义字段，然后在模板中使用它们。

总结

遵循以上步骤和指南，你就可以在 Hugo 博客中轻松创建和管理博客文章了。随着你对 Hugo 的深入了解，还可以探索更多高级功能，如自定义短代码、自定义布局等。

祝你使用 Hugo 愉快！