【hugo】使用

Posted by 西维蜀黍 on 2020-08-09, Last Modified on 2021-10-17

Installation

# macOS
$ brew install hugo

# Ubuntu
$ sudo apt-get install hugo

Operations

Refer to https://gohugo.io/getting-started/quick-start/.

创建新站点

# 创建新站点
$ hugo new site "$mysite"

主题

First, download the theme from GitHub and add it to your site’s themes directory:

cd quickstart
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Then, add the theme to the site configuration:

echo 'theme = "ananke"' >> config.toml

创建文章

$ hugo new index.md  

启动 Hugo Server

  • ‘hugo server’ will avoid writing the rendered and served content to disk, preferring to store it in memory.
# include content marked as draft
$ hugo server -D

编译生成可部署静态文件

The most common usage is probably to run hugo with your current directory being the input directory.

This generates your website to the public/ directory by default, although you can customize the output directory in your site configuration by changing the publishDir field.

# include content marked as draft
$ hugo -D

Draft, Future, and Expired Content

Hugo allows you to set draft, publishdate, and even expirydate in your content’s front matter. By default, Hugo will not publish:

  1. Content with a future publishdate value
  2. Content with draft: true status
  3. Content with a past expirydate value

All three of these can be overridden during both local development and deployment by adding the following flags to hugo and hugo server, respectively, or by changing the boolean values assigned to the fields of the same name (without --) in your configuration:

  1. --buildFuture
  2. --buildDrafts
  3. --buildExpired

Directory Structure

文档中的设置

markdown文档中的设置(Front Matter)

Front matter allows you to keep metadata attached to an instance of a content type—i.e., embedded inside a content file—and is one of the many features that gives Hugo its strength.

https://gohugo.io/content-management/front-matter/

slug

appears as the tail of the output URL. A value specified in front matter will override the segment of the URL based on the filename.

url - 重写当前markdown文档对应页面的URL

the full path to the content from the web root. It makes no assumptions about the path of the content file. It also ignores any language prefixes of the multilingual feature.

Theme

管理静态资源

s3配置

https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html

$ s3cmd sync --recursive "." s3://swtestiznzwbzxihzi/ --delete-removed

一个idea

By default, the static/ directory in the site project is used for all static files (e.g. stylesheets, JavaScript, images). The static files are served on the site root path (eg. if you have the file static/image.png you can access it using http://{server-url}/image.png, to include it in a document you can use ![Example image](/image.png) ).

https://gohugo.io/content-management/static-files/

因此,在generate时,把所有.md中的图片路径都override成/<….png>

然后存储图片文件对应的assets文件夹复制到./publish/.static下即可。

页面生成

hugo生成页面的时候有以下一些流程:

  • copy静态资源到public文件夹,包括:

    • copy theme/static/* 到 public/下
    • copy static/* 到 public/下
  • 遍历所有content/下所有文件

    • 获取文件头信息,并把正文markdown转换为html
  • 渲染生成每个页面对应的正文页面,生成文件夹对应的列表页面,生成分类页面,生成主页

    • 每个静态页面生成的时候需要两个东西,一个模版,一个结构体数据。

Official

Reference