Hugo 是什么

静态网站生成器

  • Hugo只有一个二进制文件（比如Windows里只是一个hugo.exe）
  • Hugo可以将你写好的MarkDown格式的文章自动转换为静态的网页。
  • Hugo内置web服务器，可以方便的用于本地调试。

Hugo 常用命令

  • hugo new post/xxx/xxx.md // 新建文章
  • hugo server -D // Start the Hugo server
  • hugo // 构建静态页面，不包含 draft=true 的文件
  • hugo -D // 构建静态页面，包含 draft=true 的文件

Hugo 项目目录

  • config.toml是网站的配置文件，这是一个TOML文件，全称是Tom’s Obvious, Minimal Language，这是它的作者GitHub联合创始人Tom Preston-Werner 觉得YAML不够优雅，捣鼓出来的一个新格式。
  • theme 目录里放的是主题皮肤
  • content 目录里放的是你写的markdown文章
  • archetypes 目录里放的是生成 Markdown 的模板，在使用hugo new PAGE_NAME.md来创造一个新页面时，会根据archetypes目录下的模板，来生成新文件。
  • static 目录里放的是一些图片、css、js等资源，如存在 static/images/test.png，则调用方式为 /images/test.png
  • layouts 目录里放的是网站的模板文件
  • public 存放所有静态页面的数据，如文章、图片

主题推荐

  • even

如何修改主题

如果需要调整更改主题，需要在 themes/even 目录下重新 build

1

cd themes/even && npm i && npm start

如何添加分类和标签

在 your project/config.toml 尾部追加以下代码

1
2
3
4

# 分类和标签
[taxonomies]
tag = "tags"
category = "categories

Markdown 模板示例

修改文件： your project/archetypes/default.md

1
2
3
4
5
6
7
8
9

---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
lastmod: {{ .Date }}
draft: false
tags: [ "博客" ]
categories: [ "博客" ]
comment: true
---

Github Pages 适配

  1. 建立两个 Github 仓库，其中一个是私有库、一个是公有库，分别存放 markdown 原始文章 和 hugo 生成的博客静态页面

  2. .gitignore 配置

    1
2
3
4

    # 原始文章仓库

.DS_Store
/public

  3. public 目录设立为私有库

常用发版命令

1
2
3

git add -A && git commit -m 'blog commit' && git push origin master

hugo && cd ./public && git add -A && git commit -m 'blog commit' && git push origin master && cd ../