Hugo 博客中文指南(基础教程)

时间:2024-02-17 10:34:29

1. 安装 Hugo

从 Hugo 项目主页下载 Releases 文件,解压 hugo.exe 文件到 C:\Windows\System32 目录下。

2. 创建站点

hugo new site mysite

新的站点文件夹 mysite 就自动生成到了当前目录下:

在执行完 hugo new site 命令后你会得到一个包含以下文件的目录。

.
├── archetypes/
├── config.toml
├── content/   # 储存网站的所有文章内容
├── data/
├── layouts/   # 全局样式,优先级高于主题下的 layouts 文件夹
├── static/    # 静态文件,优先级高于主题下的 static 文件夹
└── themes/    # 主题目录

3. 新建页面和文章

新建一个 about 页面:

hugo new about.md

about.md 自动生成到了 content/about.md,内容如下:

---
title: "About"
date: 2020-04-07T22:05:28+08:00
draft: true
---

创建第一篇文章,放到 post 目录:

hugo new post/myfirst.md

myfirst.md 自动生成到了 content/post/myfirst.md,内容如下:

---
title: "Myfirst"
date: 2020-04-07T22:05:28+08:00
draft: true
---

其中 draft: true 表示为草稿文件,正式发布前需将值修改为 false,或者直接删除 draft 整个参数,否则正式发布时不会生成文章。

4. 安装主题

Hugo 主题列表 或从 Github 下载一款主题,解压到 theme 目录下:

  • 通过命令行的方式使用主题:hugo -t 主题目录名
  • 通过在 config.toml 配置使用:theme = "主题目录名"

5. 编译输出(构建 Hugo 网站)

在 Hugo 网站文件夹的根目录下,执行 hugo 命令来构建。

hugo

编译输出的静态 HTML 文件,默认会保存到 public 目录。

6. 启动实时预览(本地预览网站效果)

写一篇文章生成一次会很繁琐,可以通过启动网站预览,实时监控页面的更改并刷新页面。

hugo server -D

参数: -D 输出包括标记为 draft: true 的草稿文章

默认地址为 http://localhost:1313 如果 1313 端口被占用,会随机使用其他空端口。

参考阅读