1. 安装 Hugo
从 Hugo 项目主页下载 Releases 文件,解压 hugo.exe
文件到 C:WindowsSystem32
目录下。
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 端口被占用,会随机使用其他空端口。
参考阅读
- Reset hugo 中文帮助文档:https://archive.is/nDLEl
- 使用 Hugo 来生成静态博客:https://archive.is/XV4vY
- 利用 hugo 制作静态网站:https://archive.is/WnfLR
- Hugo 生成静态网页有大量空行怎么办:https://archive.is/mwbv2